ただ、機能が多いだけに「この設定はどこですればいいの？」「ここを変更したいんだけど出来ない」なんてこともザラにあるのがCocoon。

私自身も使い始め…いや、今でも「どこだっけ！？」となることが多いので、自分用としても、初心者の方用としても便利な、「Cocoon初心者向けポイント」をまとめました。

かなり初心者の方向けの内容になっています！

見出しデザインの変更が出来ない

カスタマイズの中ではかんたんな「見出しカスタマイズ」。
多くのサイトで可愛いCSSを使った見出しが紹介されており、「自分のサイトの見出しもこれにしたい！」なんて時がありますよね。

しかし、CSSに記述をしても「あれ？反映されない…」ということも。

これはCSSの指定にちょっと工夫が必要です。

多くの場合、

.h2 {
Color:ccc;
font-size:20px;
}

といったコードになっていると思いますが、このまま採用すると反映されなかったり、本文以外のサイドバーの見出し部分まで変わってしまうなど、色々と弊害が出ることも。

そこで、<h2>を

.article h2

とすることで、本文の見出しのみ変更することが出来ます。

あとのデザインは、お好きなものをコピペするだけでOK！<h3>や<h4>も同様です。

初心者のころ、この設定につまづいて半日くらい費やしました（ドヤ顔）

CSSはどこを編集するの？どこから行くの？

Cocoonでカスタマイズをしたい！だけどCSSはどこを編集すればいい？メニューのどこから？と迷う方もいると思います。

こちらはWordpressの管理者メニューの「Cocoon設定」ではなく「外観＞テーマエディター」にあります。

この緑色の文字になっているところですね。

続いて表示されるのは、謎のファイルたち。

赤枠で囲まれている部分をチェック。「Cocoon」の場合はCocoonの親テーマを指していますので、こちらを編集してしまうと、Cocoon本体のアップデートが行われた際、カスタマイズしたCSSが消えてしまいます。

ではどうすればいいのか？といいますと、赤枠で囲まれている部分のプルダウンから「Cocoon Child」を選択します。（「選択」を押さないと遷移しませんのでご注意を！）

これが「子テーマ」のCSSとなり、こちらでCSSを編集すれば、親テーマのアップデートがあっても、カスタマイズ部分が問題なく反映されたままになります。

きちんと子テーマのCSSファイルが表示できているかは、赤枠部分をチェックすることで確認できますよ。

ファイルの内容に、上記の記載を確認することでも子テーマ用CSSになっていることが確認できます。

Cocoonでやっておくべき設定・忘れがちな設定箇所

「Cocoon」を導入した際にやっておくべき設定についてざくっとかんたんに解説していきます。
より詳しいことが知りたい！という方は、個別記事（ある場合）にジャンプ出来ますので、そちらからどうぞ！

ホームイメージの設定

大事な設定のひとつが「ホームイメージの設定」です。

ホームイメージとは、ブログのアドレスを記載した時に表示される、ブログ自体のイメージ（画像）のこと。
たとえばこのブログだとこうなります。

まろっぱげ。旧館 | ゲーム＆Cocoon＆イラスト＆雑記の4つでできていた。

play.maro-cyanin.site

この左側に表示されている画像をオリジナルのものに設定出来ます。

これは「Cocoon設定＞OGP」で設定が可能です（画像で黄色くなっている部分）

かんたんに自分のオリジナリティを出すことができるので、ぜひともやっておきたいところです！

画像サイズなど詳しくはこちらの記事に記載していますので、興味のある方はどうぞ！

【Cocoon】忘れがち！ホームイメージの変更方法

WordPressテーマ「Cocoon」でサイトの顔だと言える「ホームイメージ」画像の設定方法やサイズについて、画像入で解説しています。

play.maro-cyanin.site

2019.12.20

ホームイメージはHPの顔！TwitterなどのSNSで積極的にシェアしたい！と考えているならぜひとも設定してくださいね。

インデックスページのアクセス解析消去

Cocoonには独自のアクセス解析機能が備わっており、ページごとのアクセス数を出してくれます。
これで人気のページを簡易的にですがチェックすることもできちゃいます！
管理者のアクセスを含める・含めないの設定も出来る便利機能！

初期設定では、この画像のように「インデックスページ」にもCocoonのアクセス解析結果が表示されています（画像黄色部分）。

これは閲覧者から見えるものではないのですが、結果を表示するのに多少時間がかかるとテーマ内に記載されていること、そして見た時にアクセスがなかったら切なくなるので、私は毎回表示しないようにしています。

設定箇所は「Cocoon設定＞管理者画面」タブにあります。

その中の「管理者パネル＞PVの表示」内、「インデックスにPV数を表示」に入っているチェックを外します。

これでインデックスページの記事に、アクセス解析が表示されることはありません。

上の「PVエリアを表示する」というのは、プレビュー画面などでしばらく待つと画面下に出てくるグレー色のバー部分のことを指します。

こちらもいらない！という方はチェックを外してもいいかもしれませんが、レスポンシブのテストが行えるなど便利な機能がついていますのでもったいないかも…？

アイキャッチ画像の中央揃え

アイキャッチ画像を横800ピクセル以上で作成している方であれば不要ですが、 私のように画面よりも小さいサイズで作っている場合、中央揃えにしないと左よりになってしまい、ちょっと見た目がよろしくない雰囲気になります。

なので、Cocoonの設定でアイキャッチ画像を「中央揃え」になるように設定します！

こちらの設定箇所は「Cocoon設定＞画像」タブになります。

その中の「アイキャッチの表示」メニューから、「アイキャッチの中央寄せ」にチェックを入れればOKです！

トップページの記事表示方法の変更

ブログのトップページの記事一覧の表示方法は、適用している子テーマによって変わりますが、こちらもCocoon設定より変更することが出来ます。（テーマによっては制御され、変更できない場合もあります）。

「Cocoon設定＞インデックス」より変更可能。

カードタイプは6種類から選べます。
個人的に好きなのは「縦型カード2列」ですね。現在のまろっぱげ。でもこちらを採用しています。

エントリーカードも嫌いではないのですが、せっかくアイキャッチに自作のイラストを使用しているので、ちょっとでも大きめがいいなとｗ

「大きなカード」は本当に大きなカード（メインカラムいっぱいになります）なので、写真やイラストがメインのサイトにオススメかもしれません。この記事を書くために私も一度変更してみましたが、「でけえ！」って感じでした…。

あんまり画像が大きいと、それはそれで見づらい気がしてしまいました…

メインカラム幅の調整

Cocoonはデフォルトのメインカラム幅が「800px」ですが、これはちょっと広いなと感じる方もいると思います。
こちらも設定でかんたんに変更することが出来ます。後から変更するとアイキャッチ画像やサムネイル画像などに崩れが出てくる恐れがありますので、できれば初期にちゃちゃっとやっちゃいましょう！

場所は「Cocoon設定＞カラム」です。

まろっぱげ。では「680px」に設定しています。細すぎるのもなんだかなーなので、ちょっと狭め、くらいですかね。

アクセス解析・アドセンスのコードを貼りたい

ブログを運営していくと「Google Analyticsを使いたい」とか「Google Adsenceを利用したい」といった気持ちも出てきますよね。

Cocoonではそのあたりもかんたんに設定できるようになっています！

タブもそのまま「Cocoon設定＞アクセス解析・認証」。

それぞれのコードを入力できる箇所がわかりやすく記載されていますので、迷うことはないでしょう。

Google Adsenceのコードを貼る場所もここにあります。
「その他のアクセス解析・認証コード設定＞ヘッド用コード」に貼り付ければOKです。

また、設定の一番上部に「サイト管理者も含めてアクセス解析する」という項目がありますが、個人的にはこちらのチェックを外したほうがいいかなと思います。（確かデフォルトで外れてる気がしますが）

また、私はこのエリアに「もしもアフィリエイト」の「かんたんリンク」を使用する際のレスポンシブ用コードを記載しています。
Cocoonは完全レスポンシブなので、別に必要ないのかな？とも思いましたが、念の為。

ちなみにもしもアフィリエイトは、ひとつでAmazon・楽天・Yahooショッピングの3つをまとめて管理できるので、アフィリエイトをしたい方の入門としてめっちゃオススメです。

アドセンス＝広告なので、つい広告タブをチェックしがちなのですが、Metaタグはこちらなんですよね…

覚えてしまえばかんたん、だけどなかなか…。

設定が多岐にわたるので、どうしても「これどこだっけ～！？」となりがちなCocoon。
覚えてしまえば無意識レベルで的確に行けますが、なかなかそこまで覚えられないってことも多いですよね。

そんな時に、この記事のことを思い出して索引代わりにでもしていただけたら嬉しいです。
また、何か気づいたり「ここ必要かも」と思ったら追記していきます～！

他に設定でつまづきやすい箇所などはこちら↓の記事に記載しています！

見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ

無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。

play.maro-cyanin.site

2020.02.01

Cocoonデフォルトであれば横幅800px

Cocoonは、カラム幅（横幅）の初期設定が「800px」に設定されていますので、そこから特別カラム幅をいじっていることがなければ「800px」の画像を使うことでキレイに収まります。

しかし、個人的には800pxカラムはちょっと幅が広すぎるかな…とも思っています。

当ブログでは650px×400pxにしています

当ブログ「まろっぱげ。」では、カラム幅を「680px」に変更していますので、アイキャッチ画像もそれに合わせています。

具体的には「650px×400px」です。カラムめいっぱいの幅ではないのですが、その点に関してはあんまり気にしていません。

Facebookに共有することが多いなら横幅1200pxも

どのようにブログを運営するのかは人それぞれですが、「私はブログ記事をFacebookでシェアをしている・することが多い」という方であれば、横幅が1200px程度あったほうがいいと言われていますね。

とはいえそうなると画像サイズが大きくなってしまい、100kbを超えることも珍しくないので「アイキャッチの画像サイズはできるだけ控えたい」という方は、画像サイズを小さくする方がいいかもしれないです。

個人的に、アイキャッチ画像の美しさを厳しくチェックする読者の方は少ないと思うので、画像サイズは小さめでもいいかなと思いますし、容量を抑えた方がいいんじゃないかなと思っています。

画像比率は16:9が無難。ツールを使えば算出は簡単！

画像の比率は16:9が無難かと思います。
多くのWordpressテーマのアイキャッチ画像としても採用されている比率かと思いますし、今は4:3よりも馴染みがある比率ではないかと。

…しかし、自分は横幅を700pxにしたい！だけど縦幅のサイズがわからない！ってことになりますよね。
もちろん計算は出来ますけど、いちいち計算したくない…！
そんな方にオススメなのが、こちらのサイトです。

アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比） | WordPressやWebデザインなど紹介 Ocadweb

アスペクト比計算ツール（縦横比/16:9/4:3/3:2/2:1/黄金比）は、画像サイズを16:9や3:2、4:3、黄金比などアスペクト比を簡単に計算をしてくれるツール。写真サイズを入力するだけで、ピクセルで計算してくれたり、各比率で画像をシュミレーションができるアスペクト比計算ツールです。

ocadweb.com

自分の好きな比率で、横幅または縦幅を入力するだけで、比率に合ったサイズを算出してくれます！これがめっちゃ便利！
16:9だけではなく、4:3や黄金比など、全部で6つの比率を自動計算してくれます。

画像比率でちょっと他のブログとは違う印象を出すのもアリ…かもしれませんね！

私はアイキャッチのサイズではなく、画像の中身（イラスト）でなんとか個性を出せないかと奮闘中です…！

10にして自分のブログをのぞいてみると、なんとフォントが変わっている！8以降で適用されている「游ゴシック体」が自分は気に入らなかったので、「Cocoon設定」から慌てて変更。7だとメイリオなので気づかないんです！恐ろしいですよね…。

ですが、困ったことにエディタ画面だけは変わらず…！！

こんな感じになってました。正直私にとってはめちゃくちゃ見づらい！

しかも、「プレビュー」したらちゃんと「メイリオ」が適用されているんです…

「別にエディタだけ違うくらいいいじゃん」と思われるかもしれませんが、ブログを書く人間にとっては、プレビュー画面よりもエディタ画面の前に居るほうが長く…。

個人的にはめちゃくちゃモチベーションが下がるため、なんとかメイリオにしたい！！

とはいうものの、「Cocoon設定」の「エディター」ではフォントスタイルは変更出来ないみたい…ということで、なんとかならんか！と色々と対策をしたお話をまとめました。

その他、Cocoonの設定に関する記事はこちら

見出し変更・アイキャッチ設定など、Cocoon初心者向けポイントまとめ

無料Wordpressテーマ「Cocoon」で初心者がつまづきがちな「見出し（h2など）変更」「CSSの設定」「アイキャッチのサイズ」といった、「ここどうすればいいんだっけ？」な疑問が出やすい部分の解決策（回答）をまとめました。

play.maro-cyanin.site

2020.02.01

Cocoonのアイキャッチ画像サイズはどれが最適？

「Cocoon アイキャッチ」というワードで結構検索されて（うちのサイトが出る）ようなので、Cocoonのアイキャッチ画像について個人的な意見をまじえて、どのサイズがいいのか？という点をご紹介したいと思います。他に設定でつまづきや...

play.maro-cyanin.site

2020.01.23

対処法その1： editor-style.css を編集する

1つ目の対処法は、「editor-style.css」を編集することです。

これはCocoonに限らず、Wordpressにおけるエディター画面のCSSファイル…つまり、これを編集すればエディター画面を自分の好きなように編集出来る、とも言いかえることが出来ます。

他のテーマでは自分でcssを作成し、かつfunction.phpというWordPressの根幹といえるファイルにも手を入れなければならないようですが、Cocoonでは最初から「editor-style.css」が用意されています。

まずは「外観＞テーマエディター」に進み、「Cocoon_Child」を選択します。

その中に「editor-style.css」がありますので、そちらを選択すると、エディター画面に適用されるCSSを自分で編集することが可能です。

こんな感じで、CSSを編集するように出来ます。

テーマによって適用度が違う！？

「なんだ、ここを編集すればいいんじゃん～～」とざっくり上のように編集したものの、ここで大きなトラブルが！

私は現状2つのブログを持っており、どちらもCocoonを使っています。
1つのブログではテーマ「Momoon」を使用しており、そちらでは上記のような雑なｗコードでもエディター画面をメイリオにすることが出来ました。

body,h2,h3,h4,h5{
font-family:"メイリオ","Meiryo",Verdana ;
}

ほんと、こんなくらい雑でも大丈夫です。（フォントはお好きに変えてください。私はどうせ自分しか見ないのでガチで自分用のフォント指定しかしていません）

しかし、別のテーマではこんな雑なコードでは全く意に介しません。

このブログで使わせていただいている「Fuwari」もそのひとつです。
スキンテーマの中身なども見てみたのですが、特別Font-Familyを固定しているようなこともなくて…非常に困りました。

対処法その2：ブラウザ側でいじる

ぶっちゃけ、わざわざ「editor-style.css」をいじらなくとも、ブラウザ側でそう見せてしまう…という手もあります。

というのも、閲覧者の方々は編集画面を見ることはないわけで、わざわざWordPress側でそう見せなくても、自分のブラウザからそう見えればいいんじゃね？ということですね。

そこで利用したのがスタイルシートを変更するChrome拡張機能「Stylus」です。

Stylus

Stylus でウェブのデザインを変更しましょう。これは、ユーザースタイルを管理するツールです。Stylus を利用すると、多くの人気サイト向けのテーマやスキンを簡単にインストールできます。

chrome.google.com

FireFox版もあるようなので、ブラウザが火狐ちゃんの方はこちらをお使いください。

Stylus – 🦊 Firefox (ja) 向け拡張機能を入手

Firefox 向け Stylus をダウンロード。お気に入りのWebサイトをStylusでデザインしましょう。Stylusは、アクティブに開発されているコミュニティ主導型のユーザースタイル管理ツールです。有名なオンラインリポジトリからカスタムテーマを簡単にインストールしたり、あなたの個人用のCSSスタイルシートを作成...

addons.mozilla.org

拡張機能をインストールした状態で、管理画面に入ります。

ツールバー上の「S」アイコンをクリックするとこのようなウインドウが出ますので、「次のスタイルを書く：（URL）」をクリックします。

そうしますと、CSS編集画面に入ります。

私は以下のコードを記入することで、だいたいの部分はメイリオに変換出来ています。

.editor-post-title__block .editor-post-title__input,.editor-post-title__block:not(.is-focus-mode).is-selected, .editor-post-title__input,.editor-styles-wrapper,.main p.wp-block-paragraph,h2,h3,h4,h5{
   font-family: "メイリオ", "Meiryo", Verdana;
}

「だいたい」という理由は、リストボックスだったり、タブボックスだったりといった、またClassが違うものまでは対応しきれていないからです。

まあ、一部くらいなら違ってもいいかな…という妥協の気持ちもあります。調べ続けて時間だけ過ぎるというのも辛いですしね。

編集画面下部はこのようにしておきます（アドレスはご自身のものを入れてくださいね）。記事編集ページで作ってしまうと、その記事のみにCSSが適用されてしまうので、こう設定しておくことで全ての記事作成・編集画面でこのCSSが適用されるようになります。

とりあえず！な感じではあるものの、「ビジュアルエディターのフォントが気に入らなくてやる気が…」という方は、一度試してみてはいかがでしょうか。

正直、いちいちCSSをいじるよりはこっちの方がラクだと思います！
複数サイトをお持ちの場合でも適用範囲を変えたり、コピペするだけでOK！

その中には「サイトの顔」として重要な部分も！それが「ホームイメージ」です。

ホームイメージとは、TwitterやFacebookなどでサイトが共有された時に出てくるイメージのことで、当ブログならこうなってます。

個別記事へのリンクであればその記事のアイキャッチが表示されるのですが、サイトアドレスをシェアする・される場合にも独自の画像があった方が目を惹きますよね。

この記事ではそんな「ホームイメージ」の設定方法についてまとめていきます！

設定していないとデフォルト画像が表示される

「ホームイメージ」を設定していないとCocoonのデフォルト画像になります。

これはこれで素敵なんですけど、自分のサイトってよりはCocoonのサイトになっちゃってますよね！

アピールのためにも、極端な話白地に黒で文字を書いただけでも！オリジナルの方が絶対にいいと思います。

個人的に文字だけでオシャレに作られた画像は憧れます…！

ホームイメージの画像サイズは？

というわけで、ホームイメージを作りましょう。
素材を使ってもいいですし、ド定番のCanvaを使ってうまいことやるのもいいかと思います。

ここで気になるのが画像サイズ。

Cocoonのデフォルト画像のサイズは「880×660ピクセル」となっていますので、公式と合わせるならこのサイズで。

ただ、Facebookのアイキャッチ画像でベストなのは「1200×628ピクセル」なので、Facebookでのシェアを狙いたい！という方や、Facebookでブログ記事を紹介することが多い方はこちらのサイズで作るのもいいかと思います。

私はあんまり大きい画像が好きではないので、小さめの「650×400ピクセル」で作っています。別ブログのアイキャッチ画像サイズをそのまま流用しました。

先程のツイッター画像と比べていただくとわかるんですけど、上下が切れてるのできちんと全て表示させたい場合、このサイズはおすすめしません。

切れることを前提に真ん中に情報をつめこめばいいだけなので、個人的にはそう気にすることでもないかなとは思っていますが…

Cocoonで設定しよう

画像が出来たら、あとはCocoon内で設定するだけ！

場所は「Cocoon設定＞OGP」です。下の画像で黄色くなっているところですね。

OGPを選択したら、そのまま画面下までスクロールしてもらうと、ホームイメージ設定部分がありますので、用意した画像をアップロードすればOK！

私の場合すでに自分の画像になっちゃってますが、「選択」ボタンを押してもらって、メディアライブラリから（必要があればアップロードして）選べば完了します。

確認は「Card Validator」がおすすめ

どのように表示されるか確認したい場合は「Card Validator」がおすすめです。

Twitterカードの表示確認が可能な上に、メタデータも更新してくれるのでホームイメージ画像の反映が早くなります。

Twitterにログイン

Twitterへようこそ。ログインして通知をチェックしたり、会話に参加したり、フォローしているユーザーの最近のツイートを見てみましょう。

cards-dev.twitter.com

実際にツイートして確かめる必要がないので重宝してます！

簡単に個性が出せる部分！ぜひ設定を

ホームイメージは作業自体もそんなに大変ではなく、簡単に個性が出せる部分だと思います。

絵がかけないという方でも、タイポグラフィ（文字デザイン）だけでオシャレに作成できますし、先程のCanvaでいいテンプレートを見つけたらそれを流用するだけでもいいと思います。

1回変えたらもう変更不可！というわけでもないですし、季節ごとに変えてもいいかもしれません。（あまり印象が違いすぎると、同じサイトだと思われない可能性はありますが…）

せっかくの自分の城（サイト）なのですから、絶対に設定する方がお得だと思います。

「まだやってなかったな！」という方はぜひ試してみてくださいね。