Cocoonインストール後に最初に設定するべき重要項目9選

eye_catch
スポンサーリンク

WordPressと無料テーマ「Cocoon」をインストールして、いざダッシュボードを開いてみると、「Cocoon設定」というメニューの中に膨大なタブが並んでいるのを見て「こんなん、どこから触ればいいかわからんわ!」って泣きそうになっていませんか?😂でも大丈夫!すべての項目を1から真面目に設定する必要なんてありません!

今回は、「後からやり直すとガチで大変だから、一番最初に固定しておくべき最重要項目」だけを厳選してお伝えします!ここさえ最初にカチッと決めておけば、後からのトラブルは99%回避できますよ!

🎨 1. スキン:1秒でおしゃれなプロ風デザインに激変!

まずはモチベーションを最高潮に引き上げる「スキン」タブから触っていきましょう!

Cocoonには、1クリックでサイト全体のデザインをガラリと変えてくれる天才的な着せ替え機能(スキン)が標準装備されています。自分でややこしいCSSを1行も書かなくても、プロのデザイナーが作ったような美しいブログがその瞬間に爆誕します!

お気に入りの雰囲気を1つ選んで、まずはお城の見た目をパッと整えちゃいましょう!✨

🅰️ 2. 全体:サイトアイコンフォントのバージョン選定

「マニュアル通りにやったのに、アイコンが表示されへん…😭」と初心者が一番最初に悩むのがココ!「サイトアイコン」の設定です!

ここでは必ず使用するFont Awesomeのバージョンを確認・選定してください。なぜなら、選んだバージョンによってアイコンを表示させるための「コードの書き方」が全く変わってくるからです!

Cocoon設定の「全体」タブにあるサイトアイコンのバージョン選択では、迷わず「Font Awesome 5」を選択してください。

CocoonのFont Awesomeのバージョンを選ぶ画面

旧バージョンである「Font Awesome 4」は、すでに開発が終了している古い規格です。そのため、現在主流となっているおしゃれで利便性の高いアイコンがほとんど収録されていません。ネット上で公開されている最新のカスタマイズコードやアイコン用のクラス名(呪文)をそのままコピーして貼り付けても、バージョンが「4」のままだとシステムが認識できず、アイコンがまったく表示されない原因になってしまいます。

当ガイドブックで紹介していくサイドバーやメニューの装飾コードも、すべて「Font Awesome 5」の規格を基準に解説を統一しています。後々「アイコンが出ない!」と設定の迷宮に迷い込んでつまずかないためにも、ブログを開設したらまずは一番最初に、ここを「5」へと確実に合わせて固定しておくのが、サイトをスムーズに構築するためのコツです。

🏗️ 3. ヘッダーレイアウト:とりあえずこれで始める!

「ヘッダー」タブでは、ブログの最上部、つまり「顔」になる部分のレイアウトを決めます。

あれこれ凝った配置にしたくなりますが、最初は欲張らずに「とりあえずこれで始める!」というシンプルなレイアウトでサクッと固定してしまいましょう。デザインに迷って時間を溶かすより、まずはシンプルに文字だけで看板を立てておくのが一番スマートです!

基本的にどのデザインを選んでも問題はありませんが、ヘッダー画像も決まっていないロゴ画像も作っていない、という初期段階では、「トップメニュー(右寄せ)」などを選んでスリムなヘッダーにしておくとよいでしょう。

Cocoonの設定でヘッダーレイアウトを選択する画面

🖼️ 4. OGP:ホームイメージ画像の設定は「サイトの看板」

次に見落とされがちなのが「OGP」タブの中にある「ホームイメージ画像」の設定です!

これ、何のために設定するかご存じですか?実は、あなたのサイトのトップページがSNSでシェアされたり、他のブログで「ブログカード」として紹介されたりした時に、ドカンと表示される重要な画像なんです!

Cocoonの設定でホームイメージをアップロードする画面

ここが空っぽのままだと、Cocoonのイメージ画像が表示されてしまって、サイトの独自性が失われてしまいます。自分のサイトの「名刺」代わりになる素敵な画像を、必ずここに1枚仕込んでおいてください!📸

ただし、説明の中にも書かれている通り、フロントページが固定ページに設定してある場合は、固定ページのアイキャッチが優先されます

では、この「ホームイメージ画像」に設定する画像は、一体どのくらいのサイズ(比率)で作れば良いのでしょうか?

結論から言うと、ここも迷わず「横 1200ピクセル × 縦 675ピクセル(比率 16:9)」の黄金サイズで作成してください。これは、アイキャッチ画像の規格に合わせるという意味だけでなく、主要なSNS(XやFacebookなど)が指定している世界標準の表示規格(OGP画像サイズ)が「16:9」だからです。

もし、ここを適当な正方形や縦長の画像にしてしまうと、SNSであなたのブログのURLがシェアされた際、タイムライン上で左右や上下がバッシュリと強制的に切り落とされてしまい、サイトのロゴや大切な文字が半分見えなくなってしまうという状態になります。

さらに、他のブロガーさんがあなたのサイトのトップページを「ブログカード」として紹介してくれた際にも、この16:9のサイズで作られていれば、相手のサイトのレイアウトを崩すことなく、あなたがデザインした通りの美しい「サイトの看板」を完璧な状態で表示させることができます。自分のサイトの顔となる大切な「名刺」だからこそ、「1200×675の16:9」のルールを徹底して、完璧な仕上がりに整えておきましょう!👍

📊 5. アクセス解析:「管理者も含めてアクセス解析する」のチェックを外す

「アクセス解析設定」タブを開いたら、「サイト管理者(自分)も含めてアクセス解析する」のチェックを絶対に外してください!

Cocoonのアクセス解析設定画面

もしここにチェックが入ったままだと、自分がデザインをガチャガチャ触ったり、記事をプレビューして確認した回数が全部アクセス数(PV)にカウントされてしまいます。「ブログ始めたてなのに、今日100PVもいってる!神!😍」と大喜びしてたら、全部自分のアクセスやった(自作自演)という悲しすぎるあるあるを未然に防ぎましょう(笑)。正しいデータを取るための必須項目です!

📐 6. カラムタブ:コンテンツ幅とサイドバーの幅を最初に決める

「カラム」タブでは、記事本文の横幅(コンテンツ幅)と、サイドバーの横幅を何ピクセルにするかを決定します。

Cocoonのコンテンツ幅設定の画面

Cocoonのサイドバーの設定画面

「そんなん後から変えればええやん?」と思ったら後悔します。

この幅を最初に決めておかないと、のちのち記事の中に作っていく画像や図解の表示サイズに致命的な影響を与えてしまいかねません。最初にお城の横幅はピシッと固定しておきましょう!

📷 7. 画像タブ:本文上にアイキャッチを自動表示するか否かの大分岐

「画像」タブでは、「本文上にアイキャッチを表示するかどうか」のチェック項目を必ず確認してください。実はここ、サイト全体の見た目にものすごく大きな影響を与えます!

Cocoonのアイキャッチ画像の表示設定画面

おすすめは「自動表示」に設定しておくこと。なぜなら、これに気づかずに記事の本文上に手動で毎回アイキャッチ画像をペタペタ貼る癖をつけてしまうと、後からテーマやデザインを変えた時に「同じ画像が2枚並んで表示されるバグ」が発生し、泣きながら過去記事の画像を1枚ずつ手動で削除しなきゃいけなくなるからです!😱

さらに、ここで決める「サムネイル画像のサイズ」も超重要!画像を切り出す時の基準になるので、ここも最初にバチッと決めておかないと後々後悔しますよ!

「横 1200ピクセル × 縦 675ピクセル(比率 16:9)」の黄金サイズで決まりです!

⚓ 8. フッタータブ:サイトの最下部「クレジット表記」を確認

「フッター」タブでは、サイトの一番下にある著作権のマーク(© All Rights Reserved.)などのクレジット表記を確認します。

Cocoonのクレジット表記設定画面

初期状態のままだと不要な文字が入っていたり、ちょっと素人っぽい表記になっていたりすることがあるので、ここをすっきり洗練された表記に整えておきます。足元がカチッと引き締まっているサイトは、それだけで一気に「できるブログ」感が漂うので、必ず確認しておいてくださいね!

🤖 9. エディタータブ:AI時代に圧倒的に楽ができる「旧エディタ」

最後は、これからの時代に最も差がつく「エディター」タブです!WordPressの書き方を最新の「ブロックエディタ(Gutenberg)」にするか、昔ながらの「旧エディタ(テキストモード)」にするかの選択です。

Cocoonの設定でGutenbergエディターを有効にする画面

初期設定では「有効」になっています。最新が良さそうに見えますが、これからChatGPTやGeminiなどの「AI」を相棒にして記事を爆速で書いていきたい人は、圧倒的に旧エディタ(テキストモード)の方が便利です

なぜなら、AIに記事の装飾やコードを書いてもらう場合、ブロックエディタだとコードが意図しない場所で断片化されたり、ブロックが崩壊するなど相性が非常に悪いです。HTMLの受け渡しが楽で、自分の思い通りにコードを操れる環境はテキストモード(ビジュアルモードにも切り替え可)一択です。当サイトでもテキストモード(およびビジュアルモード)での解説のみになります

🔍 迷宮から完全脱出!全36タブを網羅した「設定の索引」を活用

今回は「最初に触るべき最重要の9項目」にギュッと絞って解説しましたが、Cocoonの全36タブの中には、まだまだ奥深い設定や隠しコマンドがたくさん眠っています。

「他のタブには何が書いてあるの?」「ブログを書き進めるうちに、別の設定も触りたくなってきた!」という時のために、管理人がすべての設定項目を1ページでサクッと引き出せる【完全インデックス(索引ページ)】を用意しました!✨検索バーに探したい内容を入力すれば、どのタブに書かれているのかすぐに見つかります!

困った時の辞書代わりに、ぜひこちらもブックマークしておいてくださいね!👇

👉 【索引】Cocoon設定の全36タブ&個別メニュー完全インデックス

今後、設定に含まれる内容の記事を書いた際は、索引ページをハブ港として記事への内部リンクを貼っていきますので、ぜひご活用ください。

🚢 まとめ:土台さえ固まれば、あなたのブログはもう無敵!

お疲れ様でした!今回紹介した項目は、すべて「後から触るとブログがガタガタに崩壊して涙を流すことになる」重要項目です。

全36タブという迷宮に迷い込んでフリーズする前に、まずはこの厳選した項目だけをカチッと固定して、お城の土台を固めてしまいましょう!

サイトの土台さえしっかりすれば、仮にカスタマイズをして表示の崩れに遭遇しても、解決策が見つかりやすいです。

次回は、設定のここを変えれば見た目をちょっとおしゃれにできる、そんなポイントをご紹介したいと思います!

コメント Leave a Comment