こんにちは！大阪でWeb制作や動画編集・撮影を主に活動しています。tiraです！
今回、新しくWordPress無料テーマ Cocoon (コクーン) でブログを作ったので、
使いかたを初心者でもわかりやすく解説をしていきたいと思います♪
Cocoonの使いかた
STEP１.テーマのダウンロード
まず、こちらからテーマをダウンロードしましょう！
ダウンロードの際、『親テーマ』『子テーマ』の2種類があるのでどちらもダウンロードしましょう！
そして、ダウンロードができたらZIPファイルを解凍せずにSTEP2へ！
STEP２.ワードプレスにインストール
次にWordPressの管理画面からテーマをインストールしていきます。
【外観 ⇒ テーマ ⇒ 新規追加 ⇒ テーマのアップロード ⇒ ファイルを選択】
ファイル選択で先ほどの『親テーマ』『子テーマを』インストールするのですが、
先に『親テーマ』をインストールしてから『子テーマ』をインストールしてください。
どちらもインストール出来たら『子テーマ』の方を有効化しましょう。
STEP３.スキンの設定
Cocoonのインストールができたら、スキンの設定をしましょう。
【Cocoon設定 ⇒ スキン】
スクロールしていくとたくさんのデザインがあるので好きなものを選んでください♪
STEP４.ヘッダーの背景画像とロゴの設定
次にヘッダー背景画像とヘッダーロゴの設定をしていきます。
ロゴはイラストACで素材をダウンロードしてPhotoshopやillustratorで自分なりにアレンジするのが楽でおすすめです♪
STEP５.メニュー設定
ヘッダーの部分やフッターの部分に配置するメニューの設定を行います。
まず、メニューのカテゴリーを作成していきます。
【投稿 ⇒ カテゴリー】
『名前』のところに自分が作りたいカテゴリー名を入れます。
『スラッグ』に『名前』の英語表記で記載します。
例えば、名前がブログだとするとスラッグにblogまたはburoguなど。英語であれば何でも構いません。
カテゴリーの追加ができたら、サイトに先ほど作ったメニューを追加していきます。
【外観 ⇒ メニュー】
Cocoonではメニューの位置で『ヘッダーメニュー』にチェックを入れると、作ったメニューがグローバルメニューになります。
これで保存し、サイトを見るとヘッダーの下にメニューが表示されます。
Cocoon設定【応用編】
ここからはさらに細かくサイトをカスタムしたい！という方に向けて解説していきます♪
応用１.ウィジェット
【カスタマイズ ⇒ ウィジェット】
ウィジェットでは主にサイドバーの設定を行います。
基本的には、『サイト検索』『最近の投稿』『カテゴリー』『人気記事』の4つは入れておくことをオススメします。
ウィジェットを追加で様々なコンテンツを追加できますが、とりあえず最初は最低限の設定だけで問題ないです。
いつでも何回でも変更できるので、色々試して自分のサイトに合ったコンテンツを追加すると良いでしょう！
応用２.サイトマップ
Cocoonでサイトマップを作る手順は、sitemapのショートコードを入れるだけなので最初にサクッとやってしまいましょう！
サイトマップはなくても問題ないですが、ないよりはあったほうがわかりやすくて、読者さんに喜ばれます♪
【固定ページ ⇒ 新規追加】
上記写真のように『サイトマップ』と『sitemap』を記載して更新するだけです！
プラグインがいらなくて、ショートコードだけで簡単に作成できるのがいいですね！
応用３.全体設定
【Cocoon設定 ⇒ 全体】
Cocoonの『全体設定』では、ページ全体の表示に関する設定を行います。
- サイトの背景色や背景画像
- フォントの種類やサイズ
- モバイル用のフォント設定
- リンク色の設定
- サイドバーの表示設定
応用４.タイトル
【Cocoon設定 ⇒ タイトル】
『タイトル設定』では、主に２つの設定を行います。
１つ目が、検索エンジンの検索結果での表示方法についてになります。
表示される検索エンジンによって変わることもありますが、こちらでは検索結果にどのような形式で表示させるか選択できるようになっています。
上記の写真はTOPページの設定ですが、投稿ページや固定ページ用の設定も、こちらで選択できます。
２つ目が『メタディスクリプション・メタキーワード』を設定するかどうかの選択です。
こちらにチェックを入れておけば、投稿・固定ページでメタディスクリプションとメタキーワードが設定できるようになります。
現在は、キーワードを入れてもSEO効果はない。と言われていますが、入れていても損はありませんので、僕は全ての記事で設定するようにしています。
ですので、メタキーワードにチェックは入れなくても構いませんが、メタディスクリプションにはチェックを入れておき、記事作成時には毎回個別に設定するようにしましょう。
応用５.SEO
【Cocoon設定 ⇒ SEO】
『SEO設定』では、主に２つの設定を行います。
１つ目が、カテゴリー・タグ・アーカイブ・添付ファイルをインデックスさせるか、の設定です。
こちらにチェックを入れていれば『noindex＝検索エンジンに載せない』という設定になります。
「検索エンジンに載せたほうがいいんじゃないの？」と思われるかもしれませんが、基本的にSEOでの集客は記事ページで行います。
カテゴリー・タグ・アーカイブは記事ページの集合体なので、検索エンジンにインデックスさせ過ぎると、同じようなページが増えてしまい、逆にSEOでは不利と考えられています。
ただし、カテゴリーだけは記事が増えれば同じジャンルの記事の集合体として一定の価値がありますので、1ページ目だけインデックスさせておいて、2ページ目以降はnoindexにしておくのがオススメです。
また、添付ファイルも画像1枚1枚をインデックスさせると逆に評価が下がる恐れがあるため、noindexを推奨します。
２つ目が『表示する日付』の設定です。
こちらは「いつ記事を公開して、いつ更新されたか？」を検索エンジンに伝えるために『投稿日・更新日』の両方を表示させるのがオススメです。
応用６.アクセス解析設定・認証
【Cocoon設定 ⇒ アクセス解析設定・認証】
『アクセス解析設定』では、主に３つの設定を行います。
１つ目が「サイト管理者も含めてアクセス解析するかどうか？」の設定です。
こちらにチェックが入っていると、自分自身が管理画面にログインしている際、ブログのページを見た時のPVもカウントされてしまいます。
より正確にアクセス解析を行いたい場合はチェックを外しておきましょう！
２つ目が『Google Analytics設定』です。
こちらに、Googleアナリティクスに登録して取得したトラッキングIDを設定します。
３つ目が『Google Search Console設定』です。
こちらに、Googleサーチコンソールの登録に必要な認証IDを入力します。
応用７.インデックス
【Cocoon設定 ⇒ インデックス】
『インデックス設定』では、最新記事やカテゴリーページなど、記事一覧ページの表示形式が選択できます。
このブログではカードタイプをデフォルトにしていますが、自分好みのデザインを選択してみてください♪
応用８.投稿設定
【Cocoon設定 ⇒ 投稿設定】
『投稿設定』では、投稿ページに関する設定を行います。
- カテゴリ・タグの表示設定
- 関連記事設定
- ページ送りナビ設定
- コメント設定
- パンくずリスト設定
このブログではコメントを受け付けていないので、「コメント設定」はチェックを外して非表示にしています。
それ以外は特に何も変更せず初期設定のままですが、関連記事設定では、デザインや表示させる記事数などの変更ができますので、お好みで変更してみることをオススメします。
応用９.目次
【Cocoon設定 ⇒ 目次】
『目次設定』では「目次の表示/非表示」のほかに、「どのように表示させるか？」も設定可能です。
- 目次を表示させるページの種類
- 目次のタイトル（例：目次）
- 目次切り替え
- 最初から目次内容を表示させるかどうか？
- 表示条件
- 目次表示の深さ
- 目次ナンバーの表示
- 目次の中央表示
- 目次の表示順
- 見出し内タグ
目次には「SEO効果」と「読者さんの利便性アップ」という２つのメリットがありますので、表示させたほうが良いです。
細かい設定に関してはお好みで構いませんので、色々と試しながら変更してみてください。
設定が面倒な方は、とりあえず表示だけしておいて、その他は何も変更しなくてもOKです。
応用１０.SNSシェア
【Cocoon設定 ⇒ SNSシェア】
『SNSシェア設定』では、以下の９つのシェアボタンの、表示位置(記事上・記事下)、表示ページ、デザインなどが選択できます。
- はてなブックマーク
- LINE@
- タイトルとURLをコピー
- コメント
これもお好みで、必要に応じて設定してみてください。
応用１１.画像
【Cocoon設定 ⇒ 画像】
『画像設定』では、主にアイキャッチ画像の設定ができます。
- 本文上のアイキャッチの表示/非表示
- アイキャッチラベルの表示/非表示
- アイキャッチの中央寄せ
- アイキャッチ自動設定を有効にする
- 画像の囲み効果
- 画像の拡大効果
- サムネイル画像の比率
- NO IMAGE画像
応用１２.フッター
【Cocoon設定 ⇒ フッター】
『フッター設定』では、フッターの色やクレジット表示などが設定できます。
こちらもお好みで設定してみてください。
応用１３.エディター
【Cocoon設定 ⇒ エディター】
『エディター設定』では、投稿画面で『Gutenbergエディター』と『旧エディター』のどちらを使うか？が選択できます。
応用１４.スライドショー
【Cocoon設定 ⇒ カルーセル】
『カルーセル』機能を使うと、ヘッダー下にこのようなスライドショーを設置することができます。
『カルーセルの表示』でスライドショーを表示させたいページのタイプを選ぶだけで、簡単に設置できます。
表示させるカテゴリーやオートプレイなど、お好みに合わせて細かく設定することも可能です。
応用１５.SNS用画像(OGP)の設定
【Cocoon設定 ⇒ OGP】
Cocoonを使っているブログのトップページのURLをSNSに掲載すると、デフォルトではCocoonの画像が表示されます。
その画像は、Cocoon設定の『OGP』で変更可能です。
一番下のホームイメージに設定した画像が、トップページのSNS用画像になります。
応用１６.アピールエリア
【Cocoon設定 ⇒ アピールエリア】
『アピールエリア』を利用すると、ヘッダー下に画像と合わせて読んでほしい記事のリンクを設置することができます。
表示させるページやボタンの色など、細かく設定することが可能です。
応用１７.ブログカード
【Cocoon設定 ⇒ ブログカード】
Cocoonでは記事内にURLをそのまま入力するだけで、リンクをこのようにおしゃれなカードタイプにして表示させることができます。
まとめ
今回は『Cocoon(コクーン)』の初期設定と使い方をご紹介してきました。
Cocoonは、基本的な機能は揃えていて無料テーマとは思えないほどできることが多いです。
- SEO内部対策がしっかりしてる
- シンプルで初心者でも使いやすい
- カスタマイズが豊富
- 無料テーマで利用者が一番多い
- 高速化
- モバイルフレンドリー
- 100%GPLテーマ
- ランキング機能が使える
- プロフィール画像が簡単に記事に挿入できる
- フォーラムで質問できる
- 広告設置も簡単
上手にカスタマイズすることでレベルの高いブログに仕上げることができるので頑張ってみてください♪
