WordPressのテーマCocoonの初心者でもわかる初期設定｜WordPress入門講座（７）

はじめに

　WordPressの入門講座の第七弾として、WordPressのテーマCocoonの初心者でもわかる初期設定について紹介します。

　レンタルサーバーを借りるならば、価格対費用効果の良いCoreserverV2プランがおすすめ。

CORESERVER.JP（コアサーバー）は、
PHP+MySQLの快適性を重視した大容量の次世代レンタルサーバーサービスです。
左のバナーまたは下のボタンをクリック下さい。

　　この記事を読むと次の疑問について知ることができます。

●Cocoonテーマの初心者でもわかる初期設定はどうすればよいの？
・スキン
・全体
・ヘッダー
・広告
・タイトル
・SEO
・OGP
・アクセス解析・認証
・インデックス、投稿
・固定ページ、本文
・目次
・SNS シェア、SNSフォロー
・画像
・AMP
・エディター
・高速化

Cocoonテーマの初心者でもわかる初期設定

　Cocoonの設定は、WordPress左メニューの「Cocoon設定」、または、上部メニューの「管理者メニュー」⇒「Cocoon設定」から行えます。

　Cocoon設定には、「リセット」、「テーマ情報」を除き３６の設定項目があります。

　これらの設定項目について初心者が最初にすべき設定について、順次紹介していきますが、その前にテーマ設定で分からないことなどがありましたら、次のことをしてください。

Cocoonのマニュアルを参照しましょう。
Cocoonファオーラムに入会すると、あなたのサイトを紹介できる書き込みもできますし、分からないことなども質問できます。
Cocoonに関する情報はインターネット上に沢山あるので、自分で調べる癖をつけましょう。

スキン

　スキンは、WordPressの外観を大きく変更できる設定で、Cocoonのスキンには８７ものスキンが存在し、あなたがこれらの中から自由に変更ができます。

　十分に利用して見ないと、どれを選んだら良いかは明確には分かりませんが、外観をどのように変化するかを見るには、各テーマの左横にある「絵マーク」の上にカーソルを合わせると外観がどのように変化するかを見ることができます。

　また、インターネットで「cocoon」におすすめのスキンを調べました。

「カスタマイズほぼ不要、テーマ「Cocoon」のおすすめスキン」と「Cocoon標準スキン全種・画面サンプル一覧とファイル構成」を参考にしてください。

　私のおすすめは、季節によりスキンを変更できるSeason [作者: ぽんひろ]です。

　スキンを「「Season（spring）」に設定してみましょう。

　下にスクロールするとスキン一覧があり、その１つに「「Season（spring）」があります。

　下の画面は「「Season（spring）」の左横の〇をクリックした状態の画面です。

スキンを選択した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

全体

　キーカラー、サイトフォント、モバイルサイトフォント、文字の太さ、サイト背景画像、サイト幅の均一化、サイトリンク色、サイト選択文字色、サイト選択背景色、サイドバーの位置、サイドバーの表示状態、ファビコン、サムネイル表示、　日付フォーマットなどの設定ができますが、基本はデフォルトのままでOK。

ただ一つファビコンの設定はしておいた方が良いでしょう。

　ここで、ファビコンについて簡単に説明します。

　ファビコンとは、あなたのサイトの顔となるアイコンで、サイトを表示した際にサイトの左横に示される小さなアイコンのことをファビコンと言います。

　例えば、Yahoo！ですと「赤いY！」、Googleですと「白い○内にカラフルなG」、Twitterですと「青い鳥のマーク」、Facebookですと「青○内に白いｆ」などを見ることができるのですぐに分かります。

　作り方は、色々あると思いますが私はPhtoScape Xを利用しています。

PhotoScape Xによるブログ用ロゴの作成｜初心者のあなたもチャレンジしてみよう！

PhotoScape Xを使って、ブログ用のロゴを作成する方法について解説した記事です。

　PhtoScape Xは、サイトのロゴの作成にも利用できます。

　ファビコンの画像サイズは、512×512ピクセルのPNG画像が推薦です。

　ファビコンを作成したら、上部の管理メニューから「カスタマイズ → サイト基本情報」にある「サイトアイコン」から設定を行ってください。

　全体を設定した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

ヘッダー

　あなたのサイトのヘッダーのサイズ、ヘッダーロゴ、ヘッダー画像、メニューの色や文字色などを変更できます。

　ヘッダータブ画面でヘッダーレイアウトのデフォルトが「センターロゴ（デフォルト）」となっていますが、「センターロゴ（スリムメニュー）」に変更することをおすすめです。

　この状態の画面を下に示します。

　ここでは、ヘッダーロゴーとヘッダー画像を設定しましょう。

　先ずヘッダー画像ですが、無料画像サイトからあなたの好みで選んだ画像を取ってきて、横：1900ピクセル × 縦：お好きなサイズ（ヘッダーの高さに合わせる）の画像にトリミング（あなたの好きな部分を切り取る）し、その画像を「ヘッダー背景画像」に設定します。

　次がヘッダーロゴですが、横1200ピクセル以下 × 縦ヘッダーの高さ以内であなたのサイト名でも良いですし、サイトを表現する言葉や絵などを入れてヘッダーロゴを作成し、ヘッダーロゴの部分に設定します。

　ヘッダーの全てを設定した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

　GoogleのアドセンスやアフィリエイトでASPの広告を貼ったりする際に必要になる設定になりますので、あなたが、広告の設定をする必要が出てきた際には「Cocoonテーマの初心者でもわかる初期設定」で述べたCocoonマニュアル、Cocoonファオーラム、インターネッ手での検索などであなた自身で調べて設定することをおすすめします。

タイトル

　フロントページ、投稿・固定ページ、カテゴリー・タグページ、タイトル共通の設定が行えます。

　私のおすすめの設定

フロントページタイトル　：　サイト名
投稿・固定ページタイトル　：　ページタイトル | サイト名
メタディスクリプションとメタキーワードにチェック

　タイトルの設定した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

SEO

　SEOでは、headタグの設定と表示する日付の設定ができます。

　私のおすすめの設定

「canonicalタグの追加」、「分割ページにrel="next"/"prev"タグの追加」、「JSON-LDを出力」にはチェック（デフォルトのまま）
「カテゴリページの2ページ目以降をnoindexとする」にチェック
「タグページをnoindexとする」にチェック
「その他のアーカイブページをnoindexとする」にチェック
「添付ファイルページをnoindexとする」にチェック
日付の設定　：　「投稿日・更新日」を表示
その他をチェックを外す

　SEOの設定した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

OGP

　OGP(Open Graph protocol)とは、SNSなどで共有したときに表示される画像のことで、初心者の内、まはた、最初に始める方は設定する必要はありません。

　あなたがFacebook、TwitterなどのSNSをやり始めた際には、この設定を再度見直して見ると良いでしょう。

　もし、あなたがOGPの画像を設定したいのであれば、Facebook、Twitterの推奨サイズは「1200×630ピクセル」ですので、あなたが作成される際には参考にしてください。

アクセス解析・認証

　解析全般、Googleタグマネージャー、Google Analytics　、Google Search Console　、その他のアクセス解析・認証コード設定が行えますが、ここでは、解析全般の設定（「サイト管理者も含めてアクセス解析する」のチェックを外す）のみ実施し、他のGoogle系のアクセス解析に関しては、プラグインの「Site Kit by Google」に任せましょう。

　Site Kit by Googleの使い方などについては、次の記事を参照。

Site Kit by Googleの設定と使い方｜Google Analytics、Console、AdSense、 PageSpeed Insightsなどが簡単設定できるよ！

Site Kit by Googleとはどのようなもの？、Site Kit by Googleのインストール方法はどうすればよいの？、Site Kit by Googleの設定方法はどうすればよいの？、Googleアカウントデータへのアクセス許可、Search Consoleの連携、Adsenseの連携、Analyticsの連携、Page Speed insightの連携、Site Kit by Googleアクセスデータの確認方法はどうすればよいの？、ダッシュボード、Search Console、AdSense、アナリティックス、設定などについて解説した記事です。

　アクセス解析・認証の設定した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

カラム

　カラムの設定は、サイトを表示させたときの投稿の幅やサイドバーの幅などを設定する部分で、あなた自身がカラム幅を変えてみたいと思った際にはこの設定を見直してみてください。

　この部分は、基本的にデフォルトのままでOK。

インデックス、投稿

　インデックスや投稿は、スキンともかかわってきますので、スキンを「Season」を利用しているならばデフォルトのままでOK。

固定ページ・本文

この部分は、デフォルトのままでＯＫ。

SNSシェア、SNSフォロー

　あなたがFacebook、Twitter、LineなどのSNSをやっているならば、シェアやフォローしてもらうために、あなたがやっているSNSにチェックを入れて設定しましょう。

　SNSシェア、SNSフォローの設定した後、最後に「変更をまとめて保存」を必ずクリックしてくださいね。

画像

　画像の設定では、アイキャッチ画像の設定がいろいろ設定でき、私のおすすめの設定は次の通り。

画像の囲み効果　：　シャドー（薄い影）
画像の拡大効果　：　aguetteBox（軽量・スマホ向け）
NO IMAGE画像の設定
この設定は、アイキャッチ画像がない場合にこの設定をすることにより「NO IMAGE画像」で設定した画像がアイキャッチ画像として表示さるます。
その他はデフォルトのままでOK

AMP

　AMP（Accelerated Mobile Pages）の設定は、モバイル上で投稿・固定ページを高速表示させる仕組みで、設定する方が良いことは当然ですが、Google Search Cnsoleを設定した後に、エラーが多発して送られてくることがあり、これに対処できるようになってからでも遅くはありません。

　最初の内は、AMPの設定をONにするのは止めた方が良いでしょう。