ワードプレスの立ち上げ(3/3) ツールの登録・Cocoon設定・サイドバーやメニューの作り方

ワードプレスの立ち上げ(3/3) ツールの登録・Cocoon設定・サイドバーやメニューの作り方

ワードプレスの立ち上げ、その3は、全体の流れの10~を書いています。

11~14は、アドセンス審査に出すまでに作ればOKなので、記事投稿と並行して進めた方がいいかもしれません。

  1. レンタルサーバー契約(A8ネット経由のセルフバックで)
  2. ドメイン取得(A8ネット経由のセルフバックで)
  3. ドメインとサーバーの紐づけする(ネームサーバー設定)
  4. サーバーにドメインを追加(SSL化も一緒に)
  5. WordPressをインストール
  6. WordPressにテーマ(Cocoon)をインストール
  7. WordPressにプラグインをインストールして有効化(設定は後)
  8. WordPressの初期設定
  9. プラグインの設定
  10. サーチコンソールやアナリティクスにブログを登録する
  11. Cocoon設定
  12. サイドバーの設定
  13. お問い合わせ/プライバシーポリシー/運営情報(プロフィール)/サイトマップ(必要なら)を固定ページで作る
  14. グローバルメニューを作り、13で作った固定ページを表示させる
  15. その他使うツールがあれば登録
  16. アドセンス審査に通ったら行う設定

その1はこちら

その2はこちら

サーチコンソールやアナリティクスの登録

サーチコンソールにブログを登録します。

アナリティクスも登録して、さらにサーチコンソールと紐づけします。

Cocoonが入っていれば簡単です!

サーチコンソール

マニュアルどおりに作業するだけです。

Google Search Consoleに登録する方法はこちら(Cocoon公式サイト)

私の場合はサイトの追加登録なので、その方法を書きますが、新規登録でもほとんど同じだと思います。

サーチコンソールにログインして、左上の窓(登録しているサイトの切り替えができる所)をクリックして「プロパティを追加」を選択。

右側の「URL プレフィックス」に登録するので、右のURLを入力するところに、トップページのURLをコピペします。

「続行」をクリックすると、所有権の確認というウインドウが表示されます。

ここで開いている「HTML ファイル」ではなく「HTML タグ」をクリック。

後半の「””」で囲まれた部分だけを使うので「コピー」をクリック。

サーチコンソールのページは開いたまま、ワードプレスの「Cocoon設定」→「アクセス解析・認証」タグの真ん中辺りにある「Google Search Console設定」のIDの所に貼り付け。

後半の「””」で囲まれた部分(40文字ちょい)以外をDelete。

一番下までスクロールして「変更をまとめて保存」をクリック。

その後、先ほどのサーチコンソールの画面の「確認」ボタンを押します。

「所有権を証明しました」と出たら完了です。

何かミスったら「所有権を獲得できませんでした」となるので、間違ったところを直すか、もう一度やり直してください。

「プロパティに移動」をクリック。

XML Sitemapsで説明したように、「サイトマップ」→「新しいサイトマップの追加」の欄に「sitemap.xml」と入力して送信します。

すると、送信されたサイトマップのステータスに「成功しました」と出るはずです。

(すぐに出ない場合もあるかも?以前はよくわからなくて、送信だけして確認すらしていませんでした)

失敗したら、サイトマップの入力ミス(スペースとか半角が全角になっているとか)なので、もう一度トライ。

コピペで上手く行かない時は、勝手に半角が全角に変換されてたってこともあるので、手入力してみるといいと思います(この場合に限らず)。

※ワードプレスの「設定」→「XML Sitemap」で上の方にあるpingの結果の欄にある、「あなたのサイトマップのインデックスファイルのURL(https//ドメイン/sitemap.xml)」のことなので、上手く行かなかったら、設定ページのURLをコピペするといいです。

ちなみに、サーチコンソールやアナリティクスもブックマークしておくと便利です。

(メインで見るサイトやページを選んだ状態でブックマーク)

アナリティクス

Googleアナリティクスは、今はGA4というタイプになったらしいのですが、従来型のユニバーサルアナリティクスを作成するのがよいとのこと。

(誰かのブログで見ました)

【追記】2023年7月1日からGA4しか使えないみたいなので、従来型とGA4の両方を作っておくとよいかも。手順7参照

アドセンスブログを運営している人は登録しているツールですが、エクアドを始めるまでほとんど使ったことがありません。

みんな、PVってどこで見てるんだろう、サーチコンソールとは何が違うんだろう…というレベルでした。

しかも、サイトごとに登録が必要だということも知りませんでした…。

追加登録の方法です。

  1. アナリティクスにログインしたら、左のメニューの一番下の「管理」をクリック
  2. 真ん中の列にある「プロパティを作成」をクリック
  3. プロパティ名(サイトがわかる名前)を入力。日本を選んで日本円を選ぶ。ここで「次へ」を押しちゃだめです!
  4. 「次へ」のすぐ上にある、「詳細オプションを表示」をクリック
  5. ユニバーサルアナリティクスプロパティの作成をON(クリックして青に)
  6. ウェブサイトのURLの所に入力(最後のスラッシュはいらないみたいです)
  7. ユニバーサル アナリティクスのプロパティのみを作成するを選択(上を選択するとGA4と2種類できる)
  8. 「次へ」
  9. ビジネス情報は何をチェックしてもいいのでチェックして「作成」で完成
  10. 一番上にUAから始まる「トラッキングID」があるので、コピーしてCocoonのさっきのページに貼ります(UAも含めて入力)
  11. 「Cocoon設定」→「アクセス解析・認証」タグの真ん中辺りにある「Google Analytics設定」のIDの所に貼り付け
  12. 一番下までスクロールして「変更をまとめて保存」をクリック

アナリティクスの設定ができたら、アナリティクスの左メニューの一番上「ホーム画面」をクリック。

登録したサイトにアクセスして、カウントされるかチェックするといいと思います。

私はPCのGoogleChromeからのアクセスをカウントしない設定にしているので、スマホで確認しました。

自分のアクセスの除外設定

アクセスが来てると思ったら自分だった、ということにならないように、アクセスの除外設定ができます。

でも、アナリティクスにIPアドレスを設定するという方法をやっても上手く行かなかったので、やめました。

GoogleChromeの拡張機能で除外する、という方法にしています(Google アナリティクス オプトアウト アドオン)。

ダウンロードして拡張機能に追加するだけだと思います(忘れてしまいました)。

ちなみに、「Cocoon設定」→「アクセス解析・認証」タグの一番上の「解析全般」のチェックを外すと、アナリティクスのカウントされないようですが、上手く行かなかった気がします…(うろ覚え)。

これでできれば一番簡単ですね!

アナティリスクとサーチコンソールの関連付け

  1. 先ほどと同じく、アナリティクスの左のメニューの一番下の「管理」をクリック
  2. 真ん中の列にある「プロパティ」のプルダウンメニューで、登録したサイトを選ぶ
  3. 上から2つ目の「プロパティ設定」をクリック
  4. 下にスクロールして「サーチコンソールを調整」をクリック
  5. 「追加」をクリック(完了のすぐ上にあるリンク)
  6. 紐づけするドメインを選んで、確認して「続行」
  7. 確認して「関連付ける」をクリック
  8. 途中からサーチコンソールの画面に行ってたので、最後、アナリティクスの画面に戻って「完了」

Cocoon設定

Cocoon設定も、一度ブログを作ったらそれを見ながら同じように設定すればOK。

(Cocoonのインストール方法はその1で紹介しています)

必要な所以外は、自分で触ってどうなるか見てみるといいです。

「Cocoon設定」をクリックすると一番左のタブが開きます。

タブごとの設定

タブごとに変更点を書いておきます。

変更した時は「変更をまとめて保存」をクリックします。

ワードプレスの設定の時と違って、全部のタブを設定してからいっぺんに押しても変更できますが、つい忘れたりすることを考えると、その都度保存した方が安全です。

スキン

変更なし。

簡単に見た目(デザイン)を変えたい時に使うのですが、Cocoonデフォルトのシンプルな方が、広告が目立っていいと思います。

トラブルがあっても嫌だし。

親テーマのスキンということは、Cocoonをバージョンアップするごとにリセットされて、選び直す感じ?(よくわかってません)

全体

変更なし

ヘッダー

ヘッダー画像やロゴを入れたい時は変更します。

アドセンスブログは凝ったものは必要ないので、デフォルトのままでもOKです。

ブログのキャッチフレーズの表示ありなしも設定できます。

アドセンスの審査の時にオリジナリティが欲しいというなら、ヘッダーの色を変えるだけでも雰囲気が変わっていいと思います。

(ヘッダーの色を変えると、なぜか文字色が変わることがあるので、その時は、その下の文字色を指定するといいです)

ここに時間をかけるともったいないので、試すなら、ブログに行き詰ってやる気がない時などにやるのがおすすめです。

後からいくらでも変えられますしね。

参考までに、私がやってみたことを書いておきます。

(調べてもよくわからなかったので、合っているかはわかりません)

ロゴ画像を入れると、もともとブログ名が入っている辺りに入ります。

(ロゴを入れるとブログ名は表示されません)

私はCanvaしか使ったことがないので、何でもCanvaです。

以前ロゴを作ってみたら超ボッケボケになったので、かなり大きいサイズで作って幅を適当に設定してます(このブログのロゴを見てみると幅170に設定してました)。

アドセンスブログでは、ブログ名でキーワード狙ったりしないのでいいと思いますが、キーワードを狙う時には、ブログ名やキャッチフレーズは表示した方がいいのかなと思います。

ロゴや背景画像を試してみると、PCで見た時と、スマホで見た時で大きさや表示される範囲が違うので、ベストな方法がわかりませんでした。

キャッチフレーズも、長いと2行になってスマホ画面で邪魔な感じになります。

そのため、変更した時は必ずPCとスマホ画面で確認した方がいいです。

記事を読む前に離脱されたらもったいないですからね。

ちなみにサイトアイコン(サイトのマーク:デフォルトではCocoonのマークが入っている)を設定する方法も書いておきます。

(Cocoon設定にはありません)

WordPressの左のメニュー「外観」→「カスタマイズ」→「サイト基本情報」とクリック。

「サイトアイコンを選択」をクリックして選んで設定します。

512×512とありますが、200くらいでも大丈夫でした。

ロゴもサイトアイコンも圧縮してできる限り軽くしています。

私は、ロゴやヘッダー色などを変えなくてもサイトアイコンだけは変えてます。

サイトが増えると区別がつかなくなるからです。

極端な話、色だけの画像を入れておいてもいいです。

アドセンスブログのデザインを凝る、ということは本当に無駄だと思っています(そもそも続くかさえわからないので)。

でも、かわいいマークでモチベーションが上がるなら、サイトアイコンや簡単なロゴくらいは、作業に支障のない範囲で作るならいいと思います!

広告

「広告設定」の広告ラベルの欄に「スポンサーリンク」を入れています。

今は広告の上に「スポンサーリンク」や「広告」と書かなくてもよくなったみたいですが、書いていないと広告なのかなんなのか、紛らわしいので一応入れてます。

※教材に書いてあれば従ってください

私は再利用ブロックでアドセンス広告を作り、それを記事内に手動で入れています。

そのため「アドセンス設定」は使っていません。

以前試した時に、うまく表示されないことがあったからです。

「アドセンス設定」を使う場合は、CocoonのAdSense広告設定方法の記事を参考にどうぞ。

アドセンス広告は「AdSense Integration WP QUADS」などのプラグインを使っている人も多いと思います。

ウィジェットで、好みの場所に入れることもできますね。

ただ、入れたくない記事にも入ってしまうかと。

(Cocoonの広告設定を使った場合は、記事ごとに表示するしないを変えられるはずです)

要は、アドセンス広告がちゃんと表示されればいいので、自分で管理できればどんな方法でやってもいいと思います。

あとは、記事ごとに広告を入れる位置を変えたいかどうか、変えたい場合は変えられるかどうか。

次に、バリューコマース関連の広告設定について。

(登録には多分審査があるので、ある程度記事入れしてからの話です)

バリューコマース(ASP)にサイトを登録した場合は、LinkSwitchを有効にするにチェック。

解説ページを見てIDを入力します。

LinkSwitch対象の広告は勝手にリンクになってくれるので、設定したほうがいいです。

タイトル

「フロントページタイトル」を「サイト名」にする。

「サイトの説明」「メタキーワード」は入れたことがないです。お好みで?

「投稿・固定ページタイトル」を「ページタイトル」にする。

「カテゴリー・タグページタイトル」を「ページタイトル」にする。

SEO

下にスクロールして、日付の設定を変えたければ変える。

投稿日や更新日を表示するのとしないのと、どちらが正解かわからないです。

ブログを定期的に修正しながら運営するなら日付を入れて、投稿して終わり(修正しない)なら表示しない方がいいのかな?

※教材で指定がある場合は従ってください

ちなみに「インデックス」や「本文」タブにも似たような設定があります。

(記事一覧や関連記事に表示される分)

投稿記事は日付表示をして、固定ページのみ日付表示を消したい場合は、追加CSSに記述すると消えます。

.page .date-tags {
display: none;
}

場所は「外観」→「カスタマイズ」→「追加 CSS」です。

コピペでうまくいくかは不明なので、ダメだったら手入力で。

固定ページを見て、日付が消えていればOK。

OPG

よくわかってないけど、下の方の「ホームイメージ」は、何でもいいのでCocoon画像以外にしたほうがいいのかなと。

ほとんどないと思いますが、トップページやカテゴリー、タグのページなど、アイキャッチ画像がない場合に表示される画像だと思います。

何でもCanvaの私は、アイキャッチ用の800×450で簡単に作って入れてます(暇があれば)。

アクセス解析・認証

サイト管理者も含めてアクセス解析するのチェックを外しています。

「Google Analytics設定」や「Google Search Console設定」は、サーチコンソールとアナリティクスの設定で書いています。

IDの欄に入力するだけです。

横にCocoonの解説もついています(親切!)

「その他のアクセス解析・認証コード設定」は、アドセンス審査を申請する時のコードや、その他ツールで必要な時に使うと便利です。

カラム

変更なし。

ボーダー色を設定すると、サイドバーの検索の枠のように、コンテンツやサイドバーに枠がつきます。

インデックス

記事の一覧(トップページやカテゴリーページなど)は、私はデフォルトのままで使ってますが、2列に並んだページもよくみかけます。

必要があれば、投稿日や更新日の表示を変更します。

(記事に表示される日付ではなく、カードに表示される日付の表示)

投稿

  • ページ送りナビを表示するのチェックを外す(お好みで)
  • コメントを表示するのチェックを外す(WordPressの設定でコメント欄作っていないから関係ないと思うけど)

2022年3月1日から、関連コンテンツユニットが変わるようなのであまり関係ないですが、関連記事のところに関連コンテンツユニットを表示させる場合は、Cocoon設定の「広告」タブの「広告コード」にある「関連コンテンツ用コード入力」からコードを入力してから、「関連記事設定」の「表示タイプ」の「AdSense関連コンテンツユニット」にチェックを入れます。

固定ページ

変更なし

本文

投稿者名の表示のチェックを外す。

投稿日や更新日の表示は、必要なければ外す。

ちなみに、レスポンシブテーブルの横スクロールを試してみたら、私にはいまいちでした。

(今は改善されているかもしれませんが)

目次

「表示ページ」は、目次がいらないページのチェックを外す。

私は投稿ページだけにしてます。

「目次タイトル」を変えたい場合は変更。

目次を開いたり閉じたりする時の文言を変えたい場合は「目次切り替え」の「開く」「閉じる」を変えることもできます。

あまり長いと2列になります。

最初は目次を閉じておきたいなら「目次切り替え」の「最初から目次内容を表示する」のチェックを外す。でも、閉じた目次は、わざわざ開かない(気づかない)と思います。

「目次表示の深さ」はH3までにしてます。

あまり目次が長すぎるのもよくないので、常に目次が多いなら、H2までにするといいかもです。

記事ごとに、目次を表示しないこともできます(でも目次はあったほうが便利ですよね)。

「目次ナンバーの表示」は数字以外が見やすいと思います。

他は変更なしです。

SNSシェア

どれが必要なのか、全くわかりません…。

このボタンはクリックされることがあるのかが、そもそも謎です。

ただ、デフォルトだとたくさんすぎるので、適当にスッキリさせているだけです。

参考にならないと思います。

そのうち、誰かのサイトを見て直せばいいかなと思いつつ、放置です(景色になっています)。

トップシェアボタンの「メインカラムトップシェアボタンを表示」のチェックを外す。

ボトムシェアボタンは「タイトルとURLをコピー」は使わないかなと思ったので外して、「カラム数」を5にしたら1列に収まったので、とりあえずそのままにしてます。

SNSフォロー

そんなわけで「本文下のフォローボタンを表示する」のチェックを外しています。

画像

本文画像設定

「アイキャッチの中央寄せ」にチェックを入れる。

「アイキャッチにキャプションがある場合は表示する」のチェックを外す。

「画像の拡大効果」は、なしを選択。

その他変更なし。

ブログカード

内部ブログカード設定は、例えば記事内で、関連記事のURLを記載した時に、それをブログカード表示にするかどうかということです。

ブログカード表示にしたくない時はチェックを外します。

ブログカード表示する場合は、日付表示や、リンクの開き方をお好みで変更します。

ケースバイケースでブログカード表示したくないという時は、URLを記載するのではなく、テキストリンクにすればOKです。

(リンクの記号をクリックして、記事一覧から選ぶとか)

外部ブログカード設定は、他のサイトのリンクをブログカードにするかどうかの設定です。

私はしていません。

コード・コメント・通知・アピールエリア・おすすめカード・カルーセル

変更なし

フッター

フッター表示タイプやクレジット表記はお好みで。

ボタン

お好みで。

モバイル

私は「モバイルボタンの固定表示」と「モバイルボタン時コンテンツ下のサイドバーを表示」のチェックも追加してます。

(この方が自分が使いやすかったからです)

404ページ・AMP・PWA

変更していません。

管理者画面

「投稿一覧設定」は、投稿一覧ページに表示される項目です。お好みで。

ウィジェット・ウィジェットエリア

お好みで。

エディター・API・その他

変更なし。

Gutenbergエディターは、デフォルトのブロックエディタ―のことです。

サイドバーの設定

サイドバーの設定は、「外観」→「ウィジェット」で行います。

左側の「ウィジェット」から表示したいものを選んで、右側の「サイドバー」や「サイドバースクロール追従」というところに入れるだけで表示されるという、とても便利なものです。

サイドバーにはいつも、「検索」と「新着記事」「カテゴリー」を入れています。

もともと「サイドバー」と「サイドバースクロール追従」にウィジェットが入っているので、削除します。

※ウィジェット一覧から消えてなくなるわけではないので削除して大丈夫です

やり方は、サイドバーに入っていウィジェットをクリックして削除。

もしくは、ウィジェットをつまんで左側にポイっとすると削除できます(ドラッグ&ドロップ)。

ウィジェットを追加する時は、追加したいウィジェットをクリックして「サイドバー」→「ウィジェットを追加」とクリックするだけです。

グローバルメニューの設定

「お問い合わせ」「プライバシーポリシー」「運営者情報(プロフィール)」をグローバルメニューとして表示する方法をご紹介します。

アドセンス審査では必ず必要です。

「お問い合わせ」は、プラグインの所に作り方を書いています。

Contact Form 7を使った問い合わせの作り方はこちら(立ち上げその2)

「運営者情報(プロフィール)」は、簡単でいいので固定ページで作ります(パーマリンクはprofileなど)。

「プライバシーポリシー」も固定ページで作ります。

教材を参照してください(ない方は検索してください)。

「外観」→「メニュー」をクリック。

メニュー構造の「メニュー名」に、「グローバルメニュー」と入力。

(名前は何でもいいです)

右下の「メニューを保存」すればメニューができます。

左側の「メニュー項目を追加」の所に、すでに作った固定ページ3つが表示されていると思うので「メニューに追加」をクリック。

グローバルメニューに「サイトマップ」も含めたければ、固定ページで作ったサイトマップも選択してください。

すると、右のメニュー構造の所に入ります。

メニューに「ホーム」を加えるなら、「メニュー項目を追加」の所に「全て表示」というタブがあるので、クリックしてメニューに追加すればOKです。

項目の並び替えは、項目をクリックしたまま上下に移動するか、項目の右端の三角マークをクリックして「移動」の横の文字(ひとつ上へ、など)をクリックすればできます。

メニュー設定を、「ヘッダーメニュー」と「モバイルスライドインメニュー」にチェック。

今作ったグローバルメニューをどこに表示するかってことです。

右下の「メニューを保存」すればメニューができます。

PC画面のヘッダー部分と、スマホ画面の左下のメニューの位置にできたはずです。

スマホも上部に表示したければ「モバイルスライドインメニュー」をやめて「ヘッダーモバイルメニュー」にすればOK。

(そもそもグローバルメニューってヘッダーメニューを指すのかな…?)

「ヘッダーメニュー」だけでもOK。

スマホのメニューには載りませんが、ページ下部までスクロールすると表示されてます。

審査に通ったら「フッターメニュー」と「モバイルスライドインメニュー」、または「フッターメニュー」だけでもいいと思います(アドセンスブログではきっと誰も見ないので、上にあっても邪魔かなと)。

その他使うツールがあれば登録

その他、使うツールがあれば登録してください。

エクアドを実践している場合は、教材に従って必要なツールを登録します。

あとは、記事を投稿してアドセンス審査へ。

アドセンス審査(追加審査)に通らない人へ!ワードプレスと無料版はてなブログに受かるコツ
グーグルアドセンスの追加審査に通らない、という方の参考になればと思い、実際に私が受かった内容から気づいた点を挙げてみました。私の場合は、教材通りにやってみたけど追加審査に落ちてしまいました(3回落ちた)。今でも、どこが悪かったのかはっき...

アドセンス審査に合格したら行う設定

アドセンス審査に合格したらすること。

  • アドセンス広告の設定(記事に広告を入れる)
  • ads.txt(アズテキスト)の設定
  • ASPの登録
    • Amazonアソシエイトを使う場合は、プライバシーポリシーに明記しないといけないので追記する
    • LinkSwitchのID登録(バリューコマース)Cocoon設定参照
  • Rinker設定(必要なら)
  • にほんブログ村や人気ブログランキングなどに登録(必要なら)

など。

教材に従ってください。

Google AdSenseにログインすると、ads.txtを設置してください、みたいなメッセージが表示されるので、エックスサーバーのマニュアル(ads.txt)を見て設定します。

数日するとメッセージが消えます。

登録に審査が必要なASPもあるので、記事数が少し増えた頃(アドセンス審査に通った頃)に申請するといいと思います。

A8.net

バリューコマース

Amazonアソシエイト

もしもアフィリエイト(Amazon・楽天もあります)

アフィリエイトフレンズ

などなど(アフィリエイトフレンズは登録しておくと便利です)。

Amazonアソシエイトは現在、アソシエイトIDを取得(登録)して、180日以内に3商品売れないと審査していただけません(初心者にはハードルがかなり高い)。

審査前の条件が厳しくて、期限切れのたびにリンクを全部貼り直すという大変な思いをしました。

私はなんとか通りましたが、もしもアフィリエイトでもAmazonを紹介できるので、まずは、もしもアフィリエイト経由にしたほうがいいと思います(Rinkerにも使えます)。

Amazonの売り上げが毎月出るくらいになってから、AmazonアソシエイトIDを登録してRinkerに設定すれば、スムーズに審査を受けられるはずです。

Rinkerを使うと、Amazonアソシエイトの審査に通った後、IDを入れなおすだけで全部のリンクが変わるので楽ちんなので。

楽天アフィリエイト報酬は、基本的に楽天キャッシュでの支払いです。

現在の規約では、3ヶ月連続で月間3001円以上の成果報酬をあげることができたら銀行振込も選べますが、私は程遠く…。

今の所、楽天キャッシュだとあまり使い道がないので、もしもアフィリエイト経由にしています。

毎月3000円以上報酬が出るようになったら、Rinkerの設定を楽天アフィリエイトにしてもいいのかなと思ってます(楽天キャッシュの使い道を考えた方が早いかも?期限は最終利用日から10年あるみたいですね)。

↓ 私が使っている教材です

エクアド(アドセンスや中古ドメインなど)

FAAP(アドセンスや外注化など)

タイトルとURLをコピーしました