WordPressのテーマCocoonの初心者でもわかる初期設定|WordPress入門講座(7)

Cocoon
この記事は約10分で読めます。

はじめに

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

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

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

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

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

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

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

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

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

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

スキン

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

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

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

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

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

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

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

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

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

全体

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

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

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

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

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

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

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

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

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

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

ヘッダー

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

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

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

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

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

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

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

広告

 広告の設定は、初心者の内、まはた、最初に始める方は設定する必要はありません

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

タイトル

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

 私のおすすめの設定

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

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

SEO

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

 私のおすすめの設定

  • 「canonicalタグの追加」、「分割ページにrel="next"/"prev"タグの追加」、「
  • 「カテゴリページの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の使い方などについては、次の記事を参照。

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

カラム

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

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

インデックス、投稿

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

固定ページ・本文

この部分は、デフォルトのままでOK

目次

 目次は、読者にとっても大事であり、何が書いてあるかを見るために絶対必要な要素です。

 Cocoonは、自動で目次を作成する機能があり、その目次の表示の仕方などを細かく設定できます。

 あなた自身が目次をどのように設定したら良いか、ご自分で考えた末に設定してください。

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

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にするのは止めた方が良いでしょう。

エディター

 エディターは、Gutenbergエディターの利用がおすすめ

  • Gutenberg : 「Gutenbergエディターを有効にする」にチェック
  • エディタースタイル : 「エディターにテーマスタイルを反映させる」にチェック
  • ブロックエディター設定 : デフォルトのままでOK

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

高速化

 高速化の設定は、WordPressのメニューの「Cocoon設定」にカーソルを合わせると表示される「高速化」をクリックすると設定ができます。

 この設定をすることにより、あなたのサイトの表示スピードを速くすることが可能となります。

 その設定は、次の通り。

  • ブラウザキャッシュ : 「ブラウザキャッシュの有効化」にチェック
  • HTML縮小化 : 「HTMLを縮小化する」にチェック
  • CSS縮小化 : 「CSSを縮小化する」にチェック
  • JavaScript縮小化 : 「JavaScriptを縮小化する」にチェック
  • Lazy Load設定の遅延読み込み : 「Lazy Loadを有効にする」にチェック

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

おわりに

 如何だったでしょうか?

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

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。 以上です。

以上です。

 

コメント

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