Google Search Console(その1)

直前の投稿「WordPressのサイトマップ」で、ブログのサイトマップをGoogle Search Console を使ってGoogle に送信しましたが、このSearch Console を使い始める際の手順を記載していなかったので記載しておきます。

Search Console についての解説は最低限に留め、あくまでも今回の作業記録を記載します。

Google Search Console とは

Google が提供する無料のサービス(ツール郡)で、自身のウェブサイトのコンテンツをGoogle に送信したり、Google での検索の状況を確認することができます。

Google Search Console を始める

1. Search Console にアクセス

Google検索セントラルのサイトにアクセスして[ご利用開始] ボタンをクリックして表示されるページで、[Search Console に移動] ボタンをクリックします。

2. プロパティタイプを選択

登録するウェブサイトをドメインまたはURL のどちらで指定するのかを選択します。

プロパティタイプの選択

ドメインとURLプレフィックスの違いを簡単に記載しておきます。

ドメインURLプレフィックス
ウェブサイトの入力
(例)
example.com
sub1.example.com
https://example.com
https://www.example.com
https://sub1.example.com
所有権の確認方法ドメイン名プロバイダ以下のいずれか
・HTMLファイル
・HTMLタグ
・Google Analytics
・Googleタグマネージャー
・ドメイン名プロバイダ
比較(ドメイン⇔URLプレフィックス)

今回、”URLプレフィックス” を選択したので、下記のように自サイトのURLを入力して[続行] ボタンをクリックしました。

URLプレフィックスを選択

3. 所有権の確認(URLプレフィックス)

プロパティタイプ:”URLプレフィックス” を選択すると、所有権の確認方法を選択するページが表示されます。

所有権の確認 > HTMLファイル

所有権の確認は、下記の5つの方法から選択できます。

内容
HTMLファイル指定されたHTMLファイルを自身のウェブサイトのルートフォルダにアップロードする
HTMLタグ指定されたHTMLメタタグを自身のウェブページのHTMLページのheadタグ内に記述する
※<meta name=”google-site-verification” 〜
Google AnalyticsGoogle Analytics のアカウントを使用する
(自身のウェブページのHTMLページのheadタグ内に以下を記述する)
・Google アナリティクス タグ
・トラッキング コード
GoogleタグマネージャーGoogleタグマネージャーのアカウントを使用する
(自身のウェブページのHTMLページのbodyタグ内に以下を記述する)
・タグ マネージャー コード
ドメイン名プロバイダ指定されたTXTレコードを自身のウェブサイトのDNSレコードに追加する
所有者の確認方法

今回、”HTMLファイル” を選択しました。
以下、HTMLファイルで所有権の確認をする手順を記載します。

  1. 「1. ファイルをダウンロード」の「↓ xxxx〜xxx.html」ボタンをクリックして、HTMLファイルを端末上にダウンロードする
  2. FTPツール(FileZilla など)を使って、ダウンロードしたHTMLファイルを自身のウェブサイトのルートフォルダにアップロードする
  3. アップロードしたファイルのパーミッションを読込のみ(404など)に変更する
  4. 所有権の確認の[確認] ボタンをクリックすると所有権の確認処理が始まり、下記の”所有権を証明しました” のページが表示された
所有権を証明しました

4. 所有権を証明した後の作業

この後、直前の投稿「WordPressのサイトマップ」の「サイトマップをGoogle に送信する」に記載した作業を行いました。

あとがき

今回、プロパティタイプは”URLプレフィックス”、所有権の確認は”HTMLファイル”を選択した理由を記載しておきます。

  • プロパティタイプ:”URLプレフィックス” を選択した理由
    • 所有権の確認を”HTMLファイル”にしたかったため
  • 所有権の確認方法:”HTMLファイル” を選択した理由
    • ブログのウェブページとDNSサーバの設定に影響がない
    • 他の確認方法と比べて、第三者が確認方法を特定しづらい
    • 静的HTMLファイルをサーバーに配置するのみで容易
    • Google Analytics と Googleタグマネージャーを使っていない

今後、以下のようなことがあれば、変更を検討することになりそうです。

  • Google Analytics を使うことになった場合、”Google Analytics”
  • Googleタグマネージャーを使うことになった場合、”Googleタグマネージャー”
  • サブドメインを使うことになった場合、サブドメイン向けの”HTMLファイル”を追加するか、プロパティタイプを”ドメイン”に変更する
  • 所有権の確認が2つ以上の方法で行われるようにしたくなった場合、HTMLファイル+HTMLタグ+ドメイン名プロバイダ

参照

WordPressのサイトマップ

WordPress のサイトマップについて調べてみました。

サイトマップとは

サイトマップは、ウェブサイトの投稿やページ、その他のファイルの情報を記述したファイルで、Google などの検索エンジンがこのファイルを読み込むことで、ウェブサイトの情報を効率的に収集することができるようになります。

サイトマップにはオプションとして、コンテンツがいつ更新されたのかや、ウェブサイトがどれぐらいの頻度で更新されているのか等の検索エンジンにとって有益な情報を記述することもできます。

サイトマップの記述ルール等の仕様は、大手検索エンジンのGoogle、Yahoo、Microsoft で標準化を行っています。

  • Sitemaps.org − Sitemap.org (スポンサー:Google、Yahoo、Microsoft)

WordPress 標準のサイトマップ

WordPress は標準でサイトマップが出力されるようになっています。
以前はプラグインが必要でしたが、どうやらWordPress 5.5 で出力されるようになったみたいです。

サイトマップの場所は、ルートの”wp-sitemap.xml” です。
当ブログのサイトマップは下記のURLになります。
※ “sitemap.xml” にアクセスすると”wp-sitemap.xml” にリダイレクトされるようになっていました。

ブラウザからアクセスすると、下記のように表示されます。

WordPress標準のサイトマップ

なお、デフォルトのままでは問題や改善すべき点があったので、以下その対応について記載します。

ユーザ名を非表示にする

デフォルトでは”wp-sitemap-users-1.xml” というサイトマップにWordPress に登録しているユーザのユーザ名が表示されてしまうので、function.php を更新してこのサイトマップを非表示にします。
※ ユーザ名が漏洩すると、攻撃者に管理画面でユーザ名を固定したパスワードのブルートフォース攻撃の機会を与えてしまうので、ユーザ名の漏洩はセキュリティの観点であまり望ましくないことと考えています。

function.php に下記を追記します。(末尾に追記しました)

/**
 * Removing Certain Sitemaps
 * users
 */
add_filter(
    'wp_sitemaps_add_provider',
    function( $provider, $name ) {
        if ( 'users' === $name ) {
            return false;
        }
        return $provider;
    },
    10,
    2
);

これで、“wp-sitemap-users-1.xml” が出力されなくなりました。

“wp-sitemap-users-1.xml” が表示されなくなった

最終更新日を表示する

デフォルトでは最終更新日が出力されないので、function.php を更新して出力されるようにします。
※ 最終更新日がないと、検索エンジンのクローラがコンテンツがいつ更新されたのかや、ウェブサイトがどれぐらいの頻度で更新されているのか等が判断できないので、表示した方がよいみたいです。

function.php に下記を追記します。(末尾に追記しました)

/**
 * Adding Additional Tags to Sitemap Entries
 * lastmod
 */
add_filter(
    'wp_sitemaps_posts_entry',
    function( $entry, $post ) {
        $entry['lastmod'] = date('c', strtotime($post->post_modified_gmt));
        return $entry;
    },
    10,
    2
);

これで、下記のように最終更新日が表示されるようになりました。

最終更新日が表示されていない
最終更新日が表示されるようになった

なお、後述「サイトマップのカスタマイズについて」で案内しているリンク先に最終更新日を追加するサンプルコードが記載されていますが、そのままだと日付の書式がW3C Datetime フォーマットになっていなかったので、W3C Datetime フォーマットで出力されるようにしました。
(Google Search Console でサイトマップのステータスが、”無効な日付” でエラーになっているのがこれで解消されました)

サイトマップのカスタマイズについて

他にも、カスタムサイトマップの追加や、特定の投稿やページの除去、サイトマップ自体を完全に表示しないようにするなど色々できるみたいです。
詳しくは、以下のサイトをご参照ください。

サイトマップまわりの仕組み

robots.txt

robots.txt は、検索エンジンのクローラに対して、サイトのどの URL にアクセスしてよいかを伝えるものです。
robots.txt の場所は、ルートの”robots.txt ” です。
当ブログのrobots.txt は下記のURLになります。

WordPress 標準のサイトマップが出力される状態でrobots.txt を見てみると、下記のようにサイトマップのURLが記述されていました。
この記述により、クローラがサイトマップファイルを見つけることができるようになります。

Sitemap: https://madoverload.com/wp-sitemap.xml

robots メタタグ

robots メタタグは、HTMLページのheadタグ内に「<meta name=’robots’ 〜」と記述するもので、ページ単位で検索エンジンに対して、登録の是非や、ユーザに対して検索結果をどのように表示してもらいたいのかを指定するものです。
当ブログのHTMLページのrobots メタタグは下記の記述になっていました。

<meta name='robots' content='max-image-preview:large' />

WordPress の設定

WordPress の設定画面で、検索エンジンのクローラにサイトマップやページを読み込んでもらいたいかどうかを設定することができます。
管理画面の[設定] > [表示設定] の”検索エンジンでの表示” で行います。

管理画面の[設定] > [表示設定]

“検索エンジンがサイトをインデックスしないようにする” のチェックをOFFにしていると、サイトマップ、robots.txt、robots メタタグはこれまで説明した状態になっていました。

試しにチェックをONにすると、下記の状態になりました。

  • サイトマップのURLにアクセスすると、”お探しのページが見つかりません”というWordPressのページが表示される
  • robots.txt から「Sitemap: https://madoverload.com/wp-sitemap.xml」が消える
  • robots メタタグが下記の記述になる(noindexはページをインデックスに登録してもらいたくない、nofollowはページのリンクを辿ってもらいたくない)
<meta name='robots' content='noindex, nofollow' />

当ブログはもう初期設定も終え、投稿もいくつかしているのでチェックをOFFにして検索エンジンのクローラを受け入れる状態にしておきますが、ブログの開設中はチェックをONにしておいた方がよかったのかもしれません。
(とはいえブログを開設して1ヶ月経ちますが、ドメイン名をググってもヒットしませんでした)

サイトマップをGoogle に送信する

当ブログは開設して1ヶ月になりますが、誰も存在を知らない状態です。Twitter への自動投稿でブログのURLを貼るようにしましたが、アクセス数が0という日も普通にあります。

せっかくサイトマップが出力されるようになっているので、Google にサイトマップの存在を知らせてインデックスに登録してもらうよう働きかけてみたいと思います。

調べてみると、Google Search Console にサイトマップを送信することで、それができるようです。
以下、その手順を記載します。

1. Search Console にブログを登録する

サイトマップをGoogle Search Console に送信する為には、Search Console に自身のウェブサイトのドメインまたはURLを登録して、そのウェブサイトが自身に所有権があることを証明する必要があります。
具体的な手順は省略しますが、今回は下記で行いました。

  • プロパティタイプの選択:URLプレフィックス
  • 所有権の確認:指定されたHTMLファイルをダウンロードして自サイトにアップロード

2. Search Console にサイトマップを送信する

Search Console にウェブサイトを登録すると、Search Console の管理画面が表示されます。
サイドメニューの[インデックス] > [サイトマップ] をクリックすると、”新しいサイトマップの追加” というサイトマップのファイル名を入力するフォームが表示されるので、ファイル名を入力して[送信] ボタンをクリックします。

サイドメニューの[インデックス] > [サイトマップ]

サイトマップの送信が完了すると、下記のメッセージが表示されます。

[OK] ボタンをクリックすると元の画面に戻り、送信する前は何も表示されていなかった”送信されたサイトマップ” に、今回送信したサイトマップが表示されます。
送信してすぐはステータスが”取得できませんでした” となっていましたが、1〜2分待つと”成功しました” に更新されました。

サイドメニューの[インデックス] > [サイトマップ]

ここで、送信したサイトマップをクリックすると、読み込まれたサイトマップの処理結果を確認することができます。

読み込まれたサイトマップ(エラーあり)

ステータスがエラーになっているサイトマップがあるので、エラーになっているサイトマップをクリックすると詳細情報が表示されます。

サイトマップの詳細情報(エラー)

サイトマップの読み込みはできるようですが、「親タグ:url、タグ:lastmod」の日付の値に問題があるということです。

このエラーは、前述「最終更新日を表示する」に記載した最終更新日の日付の書式がW3C Datetime フォーマットになっていなかったことが原因によるもので、W3C Datetime フォーマットで出力されるようにすることで解消することができました。

読み込まれたサイトマップ(エラーなし)

エラーが解消されたサイトマップをクリックすると、詳細画面も”サイトマップは正常に処理されました” となっていました。

サイトマップの詳細情報(正常)

なお、エラーの原因を解消しても直ぐにはステータスが更新されず、24時間経ってから見てみるとステータスが”成功しました” に更新されていました。
試しに、送信した日にSearch Console に登録したサイトマップを削除し、再度”新しいサイトマップの追加” をしてみたのですが、エラーのままだったので、この登録はキャッシュに登録されて定期的に処理されているのかもしれません。

サイトマップの再送について調べてみると、Search Console のヘルプに「サイトマップを変更した場合でも、Google がすでに認識しているサイトマップを再送信する必要はありません。Google は、次にサイトをクロールしたときに、変更を検出します」という記載がありました。
これは、再送は即時に反映される訳ではないということの裏返しの表現なのかもしれません。

あとがき

サイトマップを表示させるためにはプラグインの導入が必要と思っていましたが、調べてみるとプラグインがなくてもなんとかなりました。
ただ、プラグインを入れたからこそできることというのがあるかもしれないので、もし必要にかられたら導入を検討したいと思います。

サイトマップのGoogle への登録が成功し、エラーもなくなりましたが、今回の作業が完了した後にドメイン名をググってもヒットしませんでした。
はたして、いつになったら検索結果に表示されるのでしょうか。。

参考

WordPress→Twitter の導線

WordPress のブログからTwitter への導線について考察してみます。
ブログを見に来てくれた人がTwitter をやっていることに気づき、ツイートを見に来たり、アカウントをフォローする流れが感覚的にできる状態になっているのかを整理したいと思います。

Twitter のフォロアーになってくれれば、タイムラインに流れるTwitter へのブログの自動投稿が目に入り、ブログに来てくれることにつながるので、ブログとTwitter の両方を運用するのであれば意識しておいた方がよさそうです。

1. Twitter をやっていることに気づく

ブログのトップページや投稿のページを開いた時は、PCとスマホともに画面上にTwitter をやっていることがわかるボタンやアイコンは表示されていないです。
ただ、投稿を読んで気に入ってくれた時に気づいてもらえれば良いというのと、デザイン上もページが表示された時にあまり雑音がない状態にしておきたいので、これでよいことにします。

上記の「投稿を読んで気に入ってくれた時に気づいてもらえれば良い」という点で、投稿の下には共有ボタンを表示するようにしてあります。

また、PCではサイドバーが右に表示されるので、投稿を読んでいる途中でサイドバーにあるTwitter ボタン(フォローボタンとメンションボタン) に気づいてもらえるかもしれません。

あと、ページの先頭になければ末尾に探しに行くという行動を想定して、ページの末尾のフッター部にTwitter アイコンを表示してあります。

2. Twitter のツイートを見に来たり、アカウントをフォローする

投稿の共有ボタン

投稿の下に共有ボタンを表示してあります。
投稿の先頭に配置してもよいのかもしれませんが、投稿を読み終わった時にそのままシェアという行動に移れるので、ここに配置するのが自然かと思います。

共有ボタンをクリックすると、Twitter のツイートするウィンドウが開き、そこには投稿のタイトルとURLが既に入力された状態になります。

サイドメニューのTwitterボタン(フォローボタン)

サイドバーに“@RodentGiantさんをフォロー” というボタンを表示してあります。
このボタンのデザインから、このボタンをクリックすればフォローする流れにつながると予想できると思います。

ボタンをクリックすると、Twitterアカウントのページが開き、[フォロー] ボタンが表示されるようになっています。

サイドメニューのTwitterボタン(メンションボタン)

サイドバーに”@RodentGiantさんへツイートする” というボタンを表示してあります。
このボタンのデザインから、このボタンをクリックすれば@RodentGiant 宛にツイートする流れにつながると予想できると思います。

ボタンをクリックすると、Twitter のツイートするウィンドウが開き、そこには”@RodentGiant” が入力された状態になります。

このTwitter ボタンはTwitter Publish で生成したHTMLコードをウィジェットに貼り付けて表示しています。

ページ末尾のTwitterアイコン

ページの末尾のフッター部にTwitter アイコンを表示してあります。
鳥の絵だけの文字がないアイコンのデザインなので、このアイコンをクリックすればTwitter のアカウントのページが表示されると予想できると思います。

このアイコンはWordPress 標準のソーシャルリンクメニューを使って表示しています。
以下、表示させる手順を記載します。

  1. [外観] > [メニュー] をクリック
  2. [メニューを編集]タブの[メニュー構造] を編集する
    • Twitter 以外(Facebook、Instagram、メール)のカスタムリンクを削除
    • Twitter のURLに自身のTwitter アカウントのURLを指定
  3. [メニュー設定] の[メニューの位置] にある”ソーシャルリンクメニュー” のチェックを入れて、[メニューを保存] ボタンをクリック

※ 上記の手順だけでなく、[外観] > [カスタマイズ] > [メニュー] > [サブメニュー] でも同じ設定ができます。

3. その他

投稿の本文へのツイートの埋め込み

直前の投稿「Twitter Publish」で記載した方法で、Twitter の特定のツイートを投稿に埋め込むことができるので、ここからTwitter のツイートのページを表示させることができます。

位置づけがなんとなく上記「2. Twitter のツイートを見に来たり、アカウントをフォローする」と違うのでその他として記載しておきました。

  • 自分以外のTwitter アカウントのツイートの埋め込み
    • クリックすると、その人のツイートが表示される
    • 投稿に誰かのツイートを掲載したい時に使う
  • 自分のTwitter アカウントのツイートの埋め込み
    • クリックすると@RodentGiant のアカウントのツイートが表示される
    • 自分のツイートを掲載したい時に使う(やる機会があまりなさそう)

あとがき

投稿の共有ボタンを表示する方法について、今回は記載しませんでした。機会があったら書こうと思います。

参照

Twitter Publish

自身のブログやホームページにTwitter のツイートやボタンを埋め込む方法として、Twitter社がTwitter Publish というサービスを提供しています。
Twitter Publish − Twitter

使い方

1. URLを指定

“What would you like to embed?” と表示されているので、埋め込みたいページのURLを入力して[→] をクリック。

URLを指定

2. タイムラインの埋め込み(左)かTwitter ボタン(右)か選択

“Here are your display options” と表示されているので、”Embedded Timeline”(左)か”Twitter Buttons”(右)のどちらかをクリック。

選択(タイムラインの埋め込み、Twitterボタン)

3. タイムラインの埋め込み

“Embedded Timeline” を選択すると、
埋め込み用のHTMLタグが表示されるので、下の方に表示されているプレビューでよければ、[Copy Code] ボタンをクリックして、自身のブログ等に貼り付けます。
※ [Copy Code] ボタンをクリックすると、クリップボードにHTMLタグがコピーされます。

“set customization options” という青文字がリンクになっているので、このリンクをクリックすると、デザインをカスタマイズすることができます。
デザインを選択するオプションが表示されるので、適宜変更して[Update] をクリック。

4. Twitter ボタン

Twitter Buttons” を選択すると、
“Select the button you’d like to use” と表示されるので、”Follow Button”(左)か”Mention Button”(右)のどちらかをクリック。

選択(フォローボタン、メンションボタン)

4-1. フォローボタン

“Follow Button”(左)を選択すると、
埋め込み用のHTMLタグが表示されるので、下に表示されているプレビューでよければ、[Copy Code] ボタンをクリックして、自身のブログ等に貼り付けます。
※ “set customization options” のリンクからデザインのカスタマイズが可能

4-2. メンションボタン

Mention Button”(右)を選択すると、
埋め込み用のHTMLタグが表示されるので、下に表示されているプレビューでよければ、[Copy Code] ボタンをクリックして、自身のブログ等に貼り付けます。
※ “set customization options” のリンクからデザインのカスタマイズが可能

実際の埋め込み結果

実際にこのページに埋め込んでみました。
埋め込むと以下のように表示されます。

タイムラインの埋め込み

プロフィールページのURL(https://twitter.com/RodentGiant)

ツイートページのURL(https://twitter.com/RodentGiant/status/1481924474740293645)

Twitterボタン(フォローボタン)

Twitterボタン(メンションボタン)

WordPress での利用

WordPress へのHTMLタグの埋め込み

[Copy Code] ボタンをクリックしてクリップボードにコピーしたHTMLタグは、WordPress ではカスタムHTMLのブロックに貼り付けるだけで、ページに埋め込むことができます。

WordPress の埋め込みブロックの機能

なお、WordPress には埋め込みブロックという便利な機能があるので、埋め込みたいTwitter のページのURLを指定するだけで簡単に、Twitter Publish で作ったHTMLタグを使うのと同じように表示させることができます。
デザインのカスタマイズをしたい場合はTwitter Publish を使う、あまり凝らずに簡単に貼り付けたい場合は埋め込みブロックを使う、というように使い分けをしてもよいのかもしれないです。

参照

Twitter はじめました

Twitter のアカウントを作りました。
ブログとTwitter の両方をいい感じに使い分けできればと思います。

いい感じに使い分けのイメージ

  • ブログの投稿は情報の整理、Twitter は気軽な備忘録
  • ブログに投稿すると、投稿のリンクが自動でツイートされる

参考

  • Twitter − Twitter の公式サイト

WordPressのユーザーのアバター

WordPress のユーザーのアバターを設定します。ここでいうアバターはアイコン画像のことで、管理画面のログインユーザや投稿の投稿者の表示などで使われます。

WordPress のユーザーのアバターは、Gravatar というサービスにアカウントを作りアイコン画像を登録することで、WordPress 上に表示されるようになります。管理画面でアイコン画像をアップロードして設定するということはできないようです。

Gravatar とは

Gravatar の公式サイトに「Globally Recognized Avatar」と説明があります。登録したアバター(アイコン画像)が世界中の色々なウェブサービス(Slack、GitHubなど)で認識されて、アカウントと紐付けて自動で表示される、という感じでしょうか。
運営はAutomattic というWordPress.com を運営している会社が行っています。この会社はプラグインのAkismet やJetpack の運営も行っていて、2018年にはTumblr社を買収しているので、世間的にはある程度の信頼を得ている会社なのではないかと思われます。
Gravatar(公式サイト)

Gravatar のアカウント登録

Gravatar のアカウント登録は、WordPress.com アカウントを使って行います。つまり、既にWordPress.com アカウントを持っている人はそのアカウントを使ってGravatar のアカウントを登録することができますが、持っていない人は新たにWordPress.com アカウントを登録する必要があるということになります。
WordPress.com(公式サイト)

具体的にアカウント登録の方法は、以下の3つのパターンがあります。

  • 既にWordPress.com アカウントを持ってる人向け
  • 新たにWordPress.com アカウントを登録する人向け(メールアドレスとパスワードを使ってアカウントを登録)
  • 新たにWordPress.com アカウントを登録する人向け(GoogleまたはAppleのアカウントを使ってアカウントを登録)

Gravatar のアカウントを登録するためには、まずはGravatar のウェブサイトにアクセスします。
WordPress の管理画面で、
[ユーザー] > [プロフィール写真] の [Gravatar でプロフィール画像の変更が可能です] のリンクをクリックしてGravatar のウェブサイトにアクセスすることができます。

既にWordPress.com アカウントを持ってる人向け

既に持っているWordPress.com アカウントを使ってGravatar のアカウントを登録します。

  1. Gravatar のトップページにある[Gravatar を作成] ボタンをクリック
  2. [すでに WordPress.com のアカウントをお持ちですか?] のリンクをクリック
  3. 持っているWordPress.com アカウントでログインします。(下記のいずれか)
    • メールアドレスまたはユーザー名とパスワードを使ってログイン
    • GoogleまたはAppleのアカウントを使ってログイン
  4. “Sign in to Gravatar with WordPress.com Connect” で[Sign in with WordPress.com] ボタンをクリック
  5. WordPress.comからメールが送られてくるのでメール本文の[有効化]ボタンをクリックすると、Gravator のアカウントが登録されます

新たにWordPress.com アカウントを登録する人向け(メールアドレスとパスワードを使ってアカウントを登録)

Gravatar のウェブサイト上で、メールアドレス、ユーザー名、パスワードを入力してアカウントを登録する方法です。登録完了後のGravatar へのログインは、登録したメールアドレスまたはユーザー名とパスワードを入力して行います。いわゆるパスワード認証です。

アカウントの登録は以下の手順で行います。

  1. Gravatar のトップページにある[Gravatar を作成] ボタンをクリック
  2. “WordPress.com アカウントを使用して Gravatar にサインアップする” と表示されているページで下記を入力して[アカウントを作成] ボタンをクリック
    • メールアドレス
    • ユーザー名
    • パスワード
  3. “Sign in to Gravatar with WordPress.com Connect” で[Sign in with WordPress.com] ボタンをクリック
  4. WordPress.comからメールが送られてくるのでメール本文の[有効化]ボタンをクリックすると、WordPress.com とGravator のアカウントが登録されます

新たにWordPress.com アカウントを登録する人向け(GoogleまたはAppleのアカウントを使ってアカウントを登録)

WordPress.com とGravatarのアカウントのパスワードを管理したくない人向けです。Gravatarを使う為にはWordPress.com アカウントを持つ必要がありますが、WordPress.com アカウントはGoogle またはApple のアカウントを使ってログインすることができるので、これを利用します。いわゆるソーシャルログイン(SNS認証)です。

手順としては、(1) Google またはApple のアカウントを使ってWordPress.com アカウントを作成してから、(2) 上記”既にWordPress.com アカウントを持ってる人向け” の手順でWordPress.com アカウントでGravatar にログインしてGravatarにサインアップ(Gravatar のアカウントを登録)する、という流れになります。

  • WordPress.com アカウントの作成
    1. WordPress.com のウェブサイトにアクセスします。(ブラウザのアドレスバーに https://wordpress.com を入力してWordPress.com のページを開くなど)
    2. 右上の[始めてみよう]ボタンをクリック
    3. “ここからスタート。まず、WordPress.com アカウントを作成してください” と表示されているページで、下記のいずれかの方法でアカウントを作成する。(細かい手順は省略します)
      • メールアドレス、ユーザー名、パスワードを入力して作成
      • GoogleまたはAppleのアカウントを使って作成
    4. ドメインを選択します
      • 選択窓に任意の名称を入力します。入力した名称が未登録だと、入力した名称をサブドメインとした「入力した名称.wordpress.com」のような無料のドメインが選択できます。
    5. プランを選択します
      • パーソナル、プレミアム、ビジネス、eコマースなど有料のプランが目立って表示されていますが、[無料サイトで開始] のリンクから無料のサイトを選択することが可能です。
    6. WordPress.comからメールが送られてくるのでメール本文の[今すぐ認証]ボタンをクリックすると、WordPress.com のアカウントが登録されます
  • Gravatar アカウントの登録
    • 上記”既にWordPress.com アカウントを持ってる人向け” 参照

Gravatar のアバターを登録

Gravatar アカウントの登録が完了したら、自身のアバター(アイコン画像)をアップロードします。
わたしがアップロードした画像はこちらです。

Capybara dim
Capybara(dim)

ちなみに、Google のカウントにプロフィール写真を登録しておくと、Gravatar アカウントを登録した際にその画像が登録されます。

画像は複数アップロードしておいて選択することができるので、気分でアバターを変えたい場合は使いたい画像をすべてアップロードしておいて、変えたくなったら都度変更するという使い方もよさそうです。

Gravatar への画像の追加は、いろいろなところでできるようです。
・右上のアイコンをクリックして表示されるメニューから[画像を追加] をクリック
・メニューの[マイプロフィール]をクリックし、サイドバーの[フォトギャラリー] を選択して[新規画像を追加]ボタンをクリック
・メニューの[マイGravatar] をクリックし、”2. 新規画像を選択”の”新規画像を追加” のリンクをクリック

Gravatar に画像を追加する方法は下記の4種類の方法があります。
・新規アップロード
・過去のアップロード
・URLから
・ウェブカメラから

この中から”新規アップロード” の手順を記載します。

画像を新規アップロードする手順

  1. [ファイルを選択] ボタンをクリックして端末上の画像ファイルを選択し[次へ] をクリック
    • アップロードする画像のサイズは10MBという制限があります
  2. アップロードした画像の切り抜きを行います。
  3. レーティングの選択
    • 年齢を確認するオプションで、画像が誰に対して表示するのに適切であるのかを指定します。
    • 通常は”G” を選択すると思いますが、子どもには不適切な場合や人によっては不快に感じる可能性がある場合は”G” 以外を設定します。
      • G:誰に対してもOK
      • PG:失礼な振る舞い、挑発的な服装、冒涜的な言葉、軽い暴力を含む
      • R:冒涜的な表現、激しい暴力、ヌード、薬物の乱用等を含む
      • X:ハードコアな性的画像や非常に不快な暴力を含む
  4. 画像に割り当てるメールアドレスを選択
    • 割り当てる場合は、対象のメールアドレスにチェックを入れて、[選択したアドレスに使用する] をクリック
    • 割り当てない場合は、[この画像はまだ使用しない] ボタンをクリック

WordPress 上にアバターを表示する

WordPressのユーザーとGravatarのアカウントの紐付けは登録したメールアドレスで行われる仕組みになっています。
もし、WordPressのユーザーとGravatarのアカウントのメールアドレスが同じであれは、この時点でWordPress上にアバターが表示されているのではないでしょうか?

管理画面の[ユーザー] > [プロフィール] のプロフィール写真
ログイン中の右上
投稿ページの投稿者

WordPress のユーザのメールアドレスと、Gravatar に登録されているメールアドレスが異なる場合

もし、WordPress のユーザーとGravatar のアカウントに登録されているメールアドレスが異なっている場合は、Gravatar に登録したアバターをWordPress のユーザーに紐付けることができないのでWordPress に表示されません。この場合は、WordPress のユーザーのメールアドレスを、Gravatar に追加することで紐付けることが可能です。

Gravatar のアカウントにメールアドレスを追加する手順

  1. Gravatar にログインして右上のアイコンをクリックして表示されるメニューから[メールアドレスの追加] を選択します
  2. 追加するメールアドレスを入力して[追加] ボタンをクリック
  3. Gravatar(gravatar.com ドメインのメールアドレス)からメールが送られてくるのでメール本文の認証用のURLをクリック(またはブラウザにURLを貼り付ける)すると、Gravatar アカウントにメールアドレスが追加されます
  4. メニューの[マイGravatar] をクリックして、”Gravatars を管理” の”1. 修正するメールを選択” で追加したメールアドレスを選択
  5. “2. 新規画像を選択” でメールアドレスに紐付ける画像を選択します。画像を追加したい場合は、[新規画像を追加] リンクをクリックして画像を追加してから選択します。

参照

WordPressのセキュリティ対策(WP本体)その3

WordPress本体に対して行うセキュリティ対策「WordPressのセキュリティ対策(WP本体)その2」の続きです。

サイトヘルス機能

管理画面を見ていたら「サイトヘルスステータス」というのがあるのに気づきました。

緑の丸で”良好” となっていますが、パフォーマンスやセキュリティを改善する余地があるようです。”サイトヘルス画面” のリンクをクリックすると、サイトヘルスというページが開きました。
[ツール] > [サイトヘルス] でもこの画面が開けるようです。初めて知りました。この画面には”ステータス”と”情報”の2つのタブがあり、デフォルトでは”ステータス”タブが表示されるようになっています。

サイトヘルスステータス

ステータス

セキュリティ観点の改善点が2つあるようです。
・停止中のプラグインの削除
・停止中のテーマの削除

プラグインについては、さくらインターネットのクイックインストールという機能を使ってWordPressをインストールしたのですが、自動的に幾つかのプラグインがインストールされていてそのまま放置していました。有効にするか検討してから不要なものを削除したいので、今回はこのままにしておきます。(宿題)

テーマは、先月デザインのカスタマイズをしたところで、敢えて変える理由が現状はないので停止中のものは削除することにしました。
テーマの削除は、[外観] > [テーマ] で削除したいテーマを選択して表示されるテーマの詳細画面の右下に”削除” ボタンがあるので、これで削除できます。
(今回削除したのは、”Twenty Nineteen”、”Twenty Twenty”、”Twenty Twenty-One”の3つ)

セキュリティ以外で、パフォーマンスの改善点も1つありますが、今回は対応を見送ります。(宿題)

「テスト通過 v」というボタンがあるのでこれをクリックすると、問題ないと判断された複数の項目が表示されました。セキュリティの項目は7つありました。
・サイトは他のサービスと安全に接続可能です
・このサイトは設定ではデバッグ情報を出力しません
・プラグインとテーマの自動更新は正しく設定されているようです
・WordPress.org に接続可能です
・バックグラウンド更新が動作中です
・サイトは有効なHTTP 接続を使用しています
・Authorization ヘッダーは適切に動作しています

詳しくは、公式サイトに記載されています。
サイトヘルス画面 − WordPress.ORG(日本語)

サイトヘルス情報

もう一つのタブ”情報” をクリックすると、サイトヘルス情報という画面が表示されます。

情報

ここでは、WordPress の構成に関する詳細情報が、10個の分類で表示されていて、各分類の”v”をクリックすると詳細の項目が表示されます。
・WordPress
・ディレクトリとサイズ
・現在のテーマ
・使用中のプラグイン
・停止中のプラグイン
・メディア処理
・サーバー
・データベース
・WordPress 定数
・ファイルシステムパーミッション

どうやら、レンタルサーバーの管理画面で確認していたものが、WordPress の管理画面で確認できるようです。

ここで挙げられている項目に改善点があれば、ステータスの方に表示されるという仕組みになっているようです。セキュリティ対策が最低限できているかが一目瞭然でとても親切で助かります。

あとがき

今回はここまで。
停止中のプラグインの削除が宿題として残っていますが、とりあえずこの程度の個人ブログとしては、一通りのセキュリティ対策はできたのではないかと思います。次回また何かネタがあれば投稿しようと思います。

WordPressのfavicon

WordPressのfaviconをデフォルトから自分が用意したアイコン画像に変更します。

favicon の作成と設定

[外観] > [カスタマイズ] で開いたテーマのカスタマイズ画面で、サイドメニューの[サイト基本情報] を選択するとサイドメニューに表示される「サイトアイコン」で自作のアイコン画像を選択して指定することができます。

画像のサイズは「サイトアイコンは512 × 512ピクセル以上の正方形にしてください」とのことです。

今回、このブログ向けにアイコン画像を自作してみました。画像のサイズが間違えて512 × 512ピクセルより少し大きく作ってしまったのですが、画像をアップロードした後に512 × 512ピクセルで切り抜きする機能があったので調整することができました。
自作のアイコン画像はこちら(PNG形式で作りました)↓

あとがき

自作のアイコン画像は、ブログの名前「Mad Overload」の頭文字「M」にしました。
ゲームWizardryの頭文字「W」を回転させると「M」になるので、ここでもWizardry感を出してみました。
ただ、実際に指定してブラウザのタグを見てみると、字が細くて何かしょぼい。。
気が向いたら字を太くするとか、もっといいデザインを考えようと思います。

WordPressのデザイン

WordPressをインストールした際の最新のデフォルトテーマは「Twenty Twenty-One」でしたが、文章が読みやすくシンプルなデザインにしたかったので、過去のデフォルトテーマを眺めてその中から「Twenty Sixteen」を使うことにしました。

テーマのカスタマイズ

テーマを選択したデフォルトのままではあまりにも個性がないので、テーマをカスタマイズしてWizardry FC版のような雰囲気にすることにチャレンジしてみました。

追加CSS を使って簡単にカスタマイズ

テーマのカスタマイズは、サブメニューに[追加CSS] という便利な機能があるので、この機能を使うことにしました。(テーマのソースコードを直接修正しません)

ウェブデザインの知識については、HTML5とCSS3ことをよく理解できていないのですが、Chrome のデベロッパーツールを使って変更したい箇所で有効になっているCSSの定義を探しては[追加CSS]にコピペして値を変更するという作業を繰り返して、なんとかWizardry っぽい感じにすることができました。
今回[追加CSS] に記載した内容は下記になります。

/* layout */
.site-header {
  padding: 0.5em 7.6923%;
}
.site-branding, .site-header-menu, .header-image {
  margin-top: 0.375em;
  margin-bottom: 0.375em;
}
.site-header-menu {
  margin-top: 1.575em;
  margin-bottom: 0;	
}
.site-main {
  padding: 0.5em;
  border: solid;
  border-radius: 6px;
}
/* font */
body {
  font-family: Montserrat, "Helvetica Neue", sans-serif;
}
h2 {
  font-family: Merriweather, Georgia, serif;
}
.site-branding .site-title a {
  color: red;	
  font-family: Merriweather, Georgia, serif;
}
.site-description {
  color: red;
  font-family: Merriweather, Georgia, serif;
}
.main-navigation {
  font-family: Merriweather, Georgia, serif;
}
.entry-title {
  font-family: Merriweather, Georgia, serif;
}
.wp-block-code {
  color: #0ff;
}
.wp-block-search .wp-block-search__label {
  font-family: Merriweather, Georgia, serif;
}
.site-info {
  font-family: Merriweather, Georgia, serif;
}

できたのがこちら↓

Chrome デベロッパーツール

Chrome デベロッパーツールのことを少し書いてみます。Chrome デベロッパーツールはChromeに備わっている機能で、ブラウザに拡張機能を追加しないで使うことができるツールです。

ツール自体は、確認対象のページを表示した状態で、メニューから[その他のツール] > [デベロッパーツール] をクリックして起動します。

今回はページのデザインに関する調査なので、”Elements”タブに表示されるHTMLのコードを展開して調査したい行をクリックで選択し、下の”Styles”タブに表示されるCSSの定義の中からレイアウトであれば(margin, padding, border)、フォントであれば(font-family, color)を探すという感じで進めます。

この[Style]タブはとても便利で、カーソルを当てると現れるチェックをOFFにするとその定義が無効になって即時で表示中のページに反映されます。それだけでなく、値の変更や、プロパティの追加もできるので、ここでちょこちょこと編集してから[追加CSS]にコピペするという使い方をするのも効率がよくていいです。

今回のデザイン変更は約3時間でできました。画面を少し動かして目に見えた箇所を調整した感じなので、WordPressのいろいろな機能を使うとデザインが崩れるかもしれませんが、とりあえず今回はこのくらいで満足しておきます。使っていて気になったら適宜直していこうとは思います。

参照

WordPressのセキュリティ対策(WP本体)その2

WordPress本体に対して行うセキュリティ対策「WordPressのセキュリティ対策(WP本体)」の続きです。

WordPressのバージョン情報を隠蔽する

WordPressのバージョンが分かってしまうと、それをヒントに攻撃者からそのバージョンの脆弱性が狙われるリスクが高くなるため、バージョン情報はページ上のどこにも出力されない方がよいという考えに基づく対策です。

WordPressのデフォルトテーマのままでは見た目上はバージョン情報が表示されませんが、HTMLのソース上にはWordPressのバージョン情報が出力されてしまうようです。
テーマ「Twenty Sixteen」で、ページのソースを調べると下記のように出力されていました。(パスの部分は*に置き換えてあります)

headタグ内に出力

<script>window._wpemojiSettings = {*.js?ver=5.8.2"}};
<link rel='stylesheet' id='*-css' href='*.css?ver=5.8.2' media='all' />
<meta name="generator" content="WordPress 5.8.2" />

bodyタグ内に出力

<script src='*.js?ver=5.8.2' id='admin-bar-js'></script>

バージョン情報を出力しないようにする方法

function.php に所定のコードを追記追記することで対応できるようです。function.php の編集はWordPressの管理画面上でも行うことができます。([外観] > [テーマエディター]でfunction.php を選択して編集します)

metaタグのgeneratorを非表示にする

function.php に下記を追記します。(末尾に追記しました)
これで、metaタグ自体が出力されないようになります。

remove_action( 'wp_head', 'wp_generator' );

JavaScriptやCSSのパラメータを非表示にする

function.php に下記を追記します。(末尾に追記しました)
これで、scriptとlinkのタグ自体は変わらず出力されますが、パラメータの”?ver=5.8.2″の部分は出力されなくなりました

function remove_cssjs_ver2( $src ) {
    if ( strpos( $src, 'ver=' ) )
        $src = remove_query_arg( 'ver', $src );
    return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver2', 9999 );
add_filter( 'script_loader_src', 'remove_cssjs_ver2', 9999 );

なお、下記のコード追記でも非表示にできるようでしたが、headタグ内のscriptタグのパラメータのみ非表示にすることができませんでした。(原因は分かりませんが、実際に起きたこととして記録しておきます)

function remove_src_wp_ver( $dep ) { 
	$dep->default_version = '';
}
add_action( 'wp_default_scripts', 'remove_src_wp_ver' );
add_action( 'wp_default_styles', 'remove_src_wp_ver' );

今回は以上です。WordPress本体に対して行うセキュリティ対策、他にも何かあれば掲載しようと思います。