Wordpress

【WordPressでブログ構築③】Cocoon(コクーン)のインストールと設定

  • このエントリーをはてなブックマークに追加
Wordpress Cocoonの設定

WordPressでブログ構築講座第3回はテンプレートのインストールと設定です。

テンプレートはCocoon(コクーン)というフリーのテンプレートを使います。

フリーのWordpressテンプレートとしては非常に優秀だったSimplicityの後継テンプレート、ということで今回使ってみることにしました。

 

SEO対策、レスポンシブ対応がしっかりしているのはもちろん、AMPにも対応しているという優れもの。

AMPについてここでの細かい説明は割愛しますが、簡単に言うと「ページをめちゃくちゃ早く表示でき、なおかつGoogle様推奨で検索順位が上がりやすい技術」のことです。

今はとりあえずそんなことはほっといていいので、ひとつのサイトを作り上げるところまでいきましょう。

 

アフィ子
さとやんさん、新しもの好きですね・・・。
さとやん
そうです。新しもの好きなのです。

【Cocoonのインストールと設定の動画をアップしました】

Cocoon(コクーン)のダウンロード

まずはCocoonをダウンロードしましょう。

Cocoon公式サイト

 

「親テーマ」と「子テーマ」という2種類のダウンロードボタンがあると思うので、両方ともダウンロードしておいてくださいね。

➀Cocoonの親テーマ(zipファイル)

➁Cocoonの子テーマ(zipファイル)

 

アフィ子
え・・・と、「親テーマ」と「子テーマ」ってなんですか?
さとやん
WordPressって自分でいろいろとカスタマイズしたいときがあるでしょ?例えばデザインを変えたいときとか。
アフィ子
あ、phpファイルってやつをイジるんですよね。難しくてよくわかっていないんですけど・・・。
さとやん
そうそう。テンプレートがバージョンアップされると、phpファイルも勝手に上書きされちゃって、せっかく変更した箇所が消えちゃうんだよね。
アフィ子
あ、だから影響を受けないファイルが必要なんだ。それが子テーマってことですか?
さとやん
そのとおり!バージョンアップしても子テーマは上書きされないので、修正した箇所は残っているんだ。基本的に僕らがカスタマイズするのは子テーマの方だけ。どうしても親テーマを触る場合にはバージョンアップ時に注意が必要だよ。
アフィ子
了解しました!

Cocoon(コクーン)のインストール

じゃあ、Cocoonをインストールしていきます。ダウンロードしたzipファイルをアップロードしてインストールを行います。

 

WordPressの左のメニューから「外観」→「テーマ」→「新規追加」と進みます。

 

画面上の方にある「テーマをアップロード」を押して、ダウンロードしたzipファイルを選択するんですが、まずは親テーマを選択してください。

 

ファイルを選択したら「インストール」をクリックします。

 

インストールが正常に行われたら「有効化」はせずに、「別のテーマをインストールする」をクリックします。

 

そして、今度は同じ手順で子テーマをインストールしてください。

 

インストールが終わったら子テーマを有効化します。

 

以上でCocoonのインストールは終了です!簡単だったでしょ?

Cocoonの設定

では次にCocoonの設定をしておきましょう。

 

デフォルトの設定でもかなりイケてるんですけど、好みに合わせて調整しておきたい箇所があるので、そこだけ紹介していきますね。

 

まずは左のメニューから「Cocoon設定」をクリックします。

Wordpress Cocoonの設定

表示されたタブがすべてCocoonで設定できる内容です。(全部でタブは36個あります)

 

アフィ子
うわ~、めちゃくちゃ設定箇所あるじゃないですか・・・!
さとやん
それだけカスタマイズ性が豊富だっていうことだね。でも、実は変更箇所はそこまでたくさんなくて、ここで紹介するものも大部分は僕の好みの設定です。

全体

ページ全体の表示に関する設定です。PC版のサイズについてだけ微調整しました。

サイトフォント:18PX→16PX

スマホは「モバイルサイトフォント」なので好みで変更してみてください。

ヘッダー

ブログのヘッダーについての設定です。

僕は変更なしでしたが、ヘッダー画像を設定したい場合は「ヘッダー背景画像」をアップロードして変更します。

スキン

Cocoonのデザインテンプレートみたいなものです。

僕は「COLORS(ブラック)/作者:わいひら」を選択しました。

完全に時分の好みなので好きなのを設定してください。

広告

アドセンス広告の設定と表示位置について設定します。

別の記事で詳しく紹介しますね。

タイトル

SEO対策のmetaタグに関する設定です。

変更なし。

SEO

コンテンツ重複時の優先度やnoindexなど、こちらもSEO関連の設定です。

変更なし。

OGP

自分のブログのリンクがFacebookやツイッター上でどう表示されるかの設定です。

Twitterカード設定で、Twitterカードタイプを「大きな画像のサマリー」に設定。

これでTwtterで大きなサムネイル画像とともに表示されます。

アクセス解析・認証

GoogleアナリティクスやSearch Consoleなどの設定です。

別の記事で詳しく紹介します。

カラム

ブログの横幅や余白に関する設定です。

変更なし。

インデックス

トップページの記事一覧の並びに関する設定項目です。

「枠線の表示」にチェック。お好みで。

「スマホ端末でスニペットを表示」のチェックを外す。

投稿

投稿記事の表示設定です。

「カテゴリ・タグ表示」を「カテゴリーのみ」に設定しました。

タグを入れてもいいのですが、ごちゃごちゃしそうなので。

 

関連記事の「表示タイプ」は「縦型カード3列」に設定しました。これも完全にお好みです。

 

ただし、注意書きにもあるとおり、3列の場合には、すぐ下の「表示数」を6の倍数にするのが推奨です。

(そうしないと関連記事のサムネ同士の間に変な隙間が生じます)

 

「最大自動生成抜粋文字数」で「スマホ端末でスニペットを表示」のチェックを外しました。

タイトルとサムネで十分だったからです。

 

「パンくずリスト配置」を「メインカラム手前」に設定しました。

固定ページ

固定ページの表示設定です。

「パンくずリスト配置」を「メインカラム手前」に設定しました。

本文

記事本文内の設定です。

 

外部リンク設定で「外部リンクの開き方」は「新しいタブで開く(_blank)」を設定します。

 

同じタブで他サイトにページ移動してしまうと、ユーザが自分の記事に戻ってくれない可能性があるからです。

 

内部リンクでは明示的に「同じタブで開く(_self)」を設定します。

 

投稿者情報設定で「投稿関連情報の表示」では、投稿者名の表示からチェックを外します。

 

執筆者を推していくサイトではチェックを付けたままでもOKだと思います。

目次

もともとはTable of contentsとかでやっていた目次設定です。

変更なしでOKです。

SNSシェア

SNSボタンの表示に関する設定項目です。

SNSは「Google」と「Pocket」はチェックを外します。

 

これは自分がこの4つしかSNSをやっていないからで、皆さんがGoogle+やPocket、Pinterestをやっているならチェックを入れてもOKだと思います。

 

ただし、個数を変更した場合には「カラム数」の変更にも注意してください。

 

上部SNSボタンは1行なので、チェックした数=カラム数で大丈夫です。

 

同様の設定が「本文下シェアボタン」にもあり、こちらは2行なので「カラム列」はチェックの数÷2です。

SNSフォロー

フォローボタンの表示に関する設定です。

変更なし。

画像

投稿・固定ページの画像に関する設定です。

 

「アイキャッチの表示」で「アイキャッチの中央寄せ」、「アイキャッチをカラムの幅に引き伸ばす」にチェックを入れました。

 

他は変更無しで大丈夫です。

ブログカード

ブログのURLをWordpressに貼り付けたときのボックス表示(これをカードといいます)のデザイン設定です。

変更なし。

コード

ブログに何らかのソースコードなどを紹介する際の表示設定です。

変更なし。

ただし、ブログの内容がプログラミングなどに関係する場合にはデザイン変更してみてください。

コメント

投稿記事に対するコメントの設定です。

 

「ウェブサイトの表示」で「ウェブサイト入力ボックスを表示する」のチェックを外しました。

 

ウェブサイトあんまり入力しないだろうなーと思いまして。

通知

サイト内共通で上部に表示したいメッセージなどを設定できます。簡単なテキスト文の場合です。

 

サイト内のLPや人気記事に誘導する場合には使えると思います。

アピールエリア

通知に似ていますが、箇条書きの文章やボタンなどを交えてもう少しリッチに設定ができます。

カルーセル

ヘッダにサムネイルを並べて一定秒数ごとにくるくる回るようにできます。

 

「表示カテゴリー」ですべてのカテゴリーにチェック。

「オートプレイを実行」にもチェックを入れました。

 

フッター

フッターのデザインやコピーライト表記などを設定します。

変更なし。

ボタン

トップに戻るボタンのデザインを変更できます。

変更なし。

モバイル

モバイル版でのボタン表示の設定ができます。

変更なし。

404ページ

公開したページを削除した際、ユーザに表示するページを404ページといいますが、そのデザイン設定です。

変更なし。

AMP

AMP(Accelerated Mobile Pages)に関する設定です。

別の記事で詳しく説明しますが、「AMP機能を有効化する」にチェックを入れます。

管理者画面

管理者でログインしているときに、ブログの上部に出る「管理者メニュー」の設定や、ブログの下部に出る「管理者パネル」の設定を行います。

 

「チェックツールエリアの表示」にチェックを入れます。

ウィジェット

ウィジェットの設定画面で表示したくないウィジェット項目を設定できます。

変更なし。

ウィジェットエリア

ウィジェットの設定画面で表示したくないウィジェットエリアを設定できます。

変更なし。

エディター

投稿・固定ページの記事作成時のエディター機能に関する設定です。

 

そのままでOKだと思いますが、「Gutenbergエディター」が嫌な人はチェックを外せば従来のエディタになります。

API

Amazon、楽天、Yahooショッピングの広告カードを作成するための必要項目を設定する場所です。

 

Amazonアソシエイトは審査が厳しくて通りづらいので、もしもアフィリエイト経由のルートも用意してくれています。

 

このあたりは開発者の細かい心遣いがありますね。

その他

HTTPS化やSimplicityからの移行する場合などの設定です。

変更なし。

リセット

Cocoonの設定をすべて初期状態に戻したい場合の画面です。

 

「全ての設定をリセットする」と「リセット動作の確認」の両方にチェックを入れて更新すると元通りになります。

テーマ情報

現在のWordpressやCocoonのバージョン情報などを見るための画面です。

高速化

あと、左のサイドバーにある「高速化」のメニューで「ブラウザキャッシュ」「最小化」「Lazy Load設定」がありますが、すべての項目にチェックを入れておきます。

 

以上でCocoonの設定は終了です。お疲れ様でした・・・!

 

アフィ子
項目多かったですね!でも一通り触ってみるとどこに何があるかわかります。
さとやん
そうだね。テンプレートって一つ詳しく知っていると、いろいろなサイトで使い回せるからCocoonに詳しくなっておくのもいいと思うよ!

まとめ

今回はCocoonのインストールと設定について紹介しました。

設定内容は僕の好みが多分に入っていますので、みなさんも一通り設定をいじってみて自分に最適な設定を見つけてみてください!

それでは最後まで読んでいただきありがとうございますm(_ _)m

  • このエントリーをはてなブックマークに追加

コメント

  1. ブログ初心者 より:

    YouTubeの検索からです。
    ワードプレス5になってからの、説明動画がなかったので非常に助かりました!
    アップありがとうございます。

    このサイトはコクーンですか??

    画像を止めつつ、自分の設定もしたので大体できましたが、細かいところは記事を見て確認していこうと思います。
    まだ自分の記事投稿まで至っていないので、記事投稿動画をリクエストしたいです。
    初心者ブロガー向けで、サイト構築を考えた(カテゴリーとかです)のが希望です。

    あとBGMはもう少し小さい方が声が更に聞き取りやすです。40分ハイスペースなBGMがちょっと疲れました。

    1. さとやん より:

      コメントありがとうございます。

      >このサイトはコクーンですか??
      このサイトはstork(ストーク)というテンプレートですね。
      (コクーンに変えようか検討中ですが)

      >記事投稿動画をリクエストしたいです。
      記事投稿動画近日アップしますね!

      >40分ハイスペースなBGMがちょっと疲れました。
      おお、非常にありがたいご意見です。
      自分の作業BGMが結構ノリノリなのでこんな感じにしちゃいましたが、検討してみますね。

コメントを残す

*