Cocoonのフッターをカスタマイズしたいけれど、どこを触ればいいのか分からない、レイアウトが崩れそうで怖いと感じていませんか。
このページでは、Cocoonのフッターをカスタマイズするときに押さえておきたい基本から、少し踏み込んだデザインの工夫まで、私が実際に試してきた内容をベースに分かりやすくまとめました。
先に結論を一言で伝えると「Cocoonのフッターは、ポイントさえ分かれば初心者でも安全に、しかもけっこうおしゃれにカスタマイズできます」。
ブログ収益化の教科書プレゼント
↓ ↓ ↓
Cocoonでフッターをカスタマイズする前に知っておきたいこと
まずは、そもそもフッターにはどんな役割があるのか、そしてCocoonのどこを触ればフッターが変わるのかをざっくり整理しておきます。ここが見えていると、これからの作業がかなり楽になります。
Cocoonフッターの役割とメリットを整理しよう
フッターは「ページの一番下にある地味な場所」というイメージが強いかもしれません。でも、実際には読者の信頼感や回遊性に大きく関わる、かなり重要なエリアです。
私もブログを始めたころはヘッダーやアイキャッチ画像ばかり気にしていましたが、フッターを整えたあとに見比べると、サイト全体の印象がかなり変わったと実感しました。
フッターの主な役割を整理すると、次のようになります。
| 役割 | 具体例 | 読者・運営側のメリット |
|---|---|---|
| 信頼感の付与 | プロフィール、運営者情報、運営ポリシー | 「誰が運営しているサイトか」が分かり安心につながる |
| 回遊性アップ | 人気記事、カテゴリ、サイトマップへのリンク | 関連ページに進みやすくなり、PVや滞在時間が伸びやすい |
| 法的・ルール対応 | プライバシーポリシー、免責事項、特商法表記 | 広告・アフィリエイト利用時のトラブル予防になる |
| 行動喚起 | お問い合わせ、メルマガ登録、SNSリンク | 読者との接点を増やし、リピーターを作りやすくなる |
Cocoonのフッターをカスタマイズするときは、この役割を意識しながら情報を配置すると、「いろいろ置いているのに何も伝わらないフッター」になりにくくなります。なんとなく全部詰め込むのではなく、「何のために置くのか」を決めてから載せるのがおすすめです。
cocoonのフッターを触る場所は3つだけ
Cocoonのフッターまわりは、設定画面がいくつかに分かれているので、最初はどこを触ればいいのか迷いがちです。ただ、実際によく使う場所は次の3つだけなので、一度整理しておくと安心です。
- Cocoon設定 → フッター（＋カラー関連の項目）
- 外観 → メニュー（フッターメニューの作成・割り当て）
- 外観 → ウィジェット（フッターの中身やレイアウト）
ざっくりイメージすると、次のような役割分担です。
- Cocoon設定 → フッター
フッター全体の「見た目」と「大まかな配置」を決める場所 - 外観 → メニュー
フッターメニュー（細いリンクの並び）を作る場所 - 外観 → ウィジェット
プロフィールや人気記事など、フッター内の具体的な中身を決める場所
この3つが頭に入っていれば、「これはCocoon設定でやるのか？メニューなのか？ウィジェットなのか？」と迷う時間が減ります。このあと、それぞれの使い方を順番に見ていきます。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
Cocoonのフッター基本カスタマイズ設定【Cocoon設定編】
ここからは、まずCocoon設定の「フッター」や色設定の部分から手を入れていきます。色やコピーライトなど、サイト全体の印象を決める要素が多いので、最初に整えておくと見た目が一気に整います。
フッターの色とデザインを変える
一番手を付けやすいのは「フッターの色」です。ここを変えるだけでも、ブログの雰囲気がかなり変わります。
Cocoon設定のカラー関連の項目やフッター設定から、フッターの背景色や文字色を変更できます。具体的には、次のようなイメージで決めていくと迷いにくいです。
- シンプルなブログ：背景は白〜薄いグレー、文字は濃いグレーあたりで落ち着いた印象にする
- ブランドカラーを推したいブログ：ブランドカラーを背景にして、文字は白でコントラストを強くする
- かわいい系・やわらかいデザイン：淡い色を背景にして、リンクの色だけアクセントカラーにする
特にフッターのリンクは、スマホで見ても読みやすい色にしておくことが大事です。背景が暗めならリンクは明るい色、背景が明るいならリンクは少し濃い色、といったように対比をしっかり付けると、「どこがリンクなのか」が一目で分かります。
コピーライト・クレジット表記をカスタマイズ
フッターの一番下にある「© サイト名」や「Powered by〜」の部分も、Cocoon設定である程度カスタマイズできます。文字は小さいですが、きちんと整っているとサイト全体の印象が引き締まります。
Cocoon設定 → フッターあたりを開くと、次のような項目があるはずです。
- コピーライト（©）の表示形式
- 年号を表示するかどうか
- サイト名の表示の仕方
- テーマクレジットを表示するかどうか
一般的なおすすめの方針は、次のような感じです。
- ブログ名や屋号が決まっているなら：コピーライトにその名前を入れておく
- かっちりした印象にしたいなら：シンプルに「© サイト名」もしくは「© サイト名 All Rights Reserved.」など
- 個人ブログ感を出したいなら：少し柔らかい一言を足すのもあり（ただし長くしすぎない）
広告やASP名などは、このコピーライト部分ではなく、プライバシーポリシーや免責事項のページにまとめておき、フッターからそのページへリンクさせるのが基本です。
フッターロゴと表示タイプを選ぶ
Cocoon設定のフッターには、「フッターロゴ」や「表示タイプ」を選ぶ項目もあります。ここを触ると、フッターの上部にロゴが出たり、メニューとコピーライトの並びが変わったりします。
よく使われるパターンをいくつか挙げると、こんな感じです。
- ロゴ ＋ フッターメニュー ＋ コピーライト
- フッターメニュー ＋ コピーライトのみのシンプル構成
ロゴを入れるとブランド感は出ますが、そのぶんフッターが縦に長くなりがちです。特にスマホだと「上から下まで全部ロゴに挟まれている」ような印象になることもあるので、実機での見え方は必ずチェックしてください。
個人ブログであれば、ロゴはヘッダーだけに表示し、フッターはテキストメニューとコピーライトだけにしたほうが、すっきり見えることも多いです。自分のサイトの雰囲気を見ながら、いくつか試してみるとしっくり来る組み合わせが見つかります。
【ちょっと一息♪】 私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？
メニューで作るフッターリンクのカスタマイズ
フッター全体の見た目がざっくり決まったら、次は「フッターメニュー」を整えていきます。ここでは、WordPress標準のメニュー機能を使って、よく使うページへのリンクをまとめて設置していきます。
フッターメニューに入れておきたい定番リンク
Cocoonのフッターをカスタマイズするときに悩みやすいのが「どのページへのリンクを置くか」です。何も考えずに主要ページを全部並べてしまうと、逆に分かりづらいフッターメニューになります。
まずは、次のような定番リンクから検討してみてください。
| ページ名 | どんなサイトにおすすめ | 目的・役割 |
|---|---|---|
| プライバシーポリシー | 広告・アクセス解析を使うブログ全般 | 利用者への説明とトラブル防止 |
| 免責事項 | 情報発信系・アフィリエイトブログ | 情報の正確性や責任範囲を明示する |
| お問い合わせ | ほぼすべてのブログ・サイト | 読者からの連絡窓口をつくる |
| 運営者情報／プロフィール | 個人ブログ・専門家ブログ | 誰が書いているかを示し、信頼感を高める |
| サイトマップ | 記事数が多いブログ | 読者が記事を探しやすくなる |
これらをフッターにまとめておくと、「ちゃんと運営されているサイト」という印象を与えやすくなります。特に、プライバシーポリシーや免責事項は、広告プログラムの利用条件とも関係してくるので、早めに整えておくと安心です。
WordPressメニューでフッターを作る手順
実際の作業自体はそれほど難しくありません。WordPressの管理画面から、次のような流れで進めます。
- 「外観」→「メニュー」を開く
- 「新しいメニューを作成」から、名前（例：フッターメニュー）を付ける
- 左側の固定ページ一覧から、先ほど決めたページをメニューに追加する
- ドラッグ＆ドロップで表示順を並べ替える
- メニューの表示場所で「フッターメニュー」にチェックを入れ、保存する
あわせて意識しておきたいポイントは、次の3つです。
- メニュー名は自分用のメモのようなものなので、読者には見えない
- フッターメニューのリンク数は多くても5〜6個程度に絞る
- PCとスマホの両方で、表示の折り返しや見やすさを確認する
リンク数が多すぎると、スマホで2段3段と折り返してしまい、「どこからどこまでが1つのリンクなのか」が分かりづらくなります。まずは本当に必要なものだけに絞ったフッターメニューから始めるのがおすすめです。
読者にやさしいフッターメニュー構成の考え方
フッターメニューは、「そのページを読み終えた読者が最後に目にするナビゲーション」です。ここで意識したいのは、「この記事を読み終わった人は次に何を知りたくなりそうか」という視点です。
例えば、次のようなイメージで構成を考えてみてください。
- 記事の信頼性を補強したい → 運営者情報やプロフィールへのリンクを入れる
- サイト全体を巡ってほしい → サイトマップやカテゴリー一覧へのリンクを入れる
- 問い合わせや仕事依頼につなげたい → お問い合わせフォームへのリンクを目立つ位置に置く
「なんとなくよく見かけるから置く」のではなく、ブログの目的に合わせて優先順位を付けるだけで、フッターメニューの一列にちゃんと意味が出てきます。Cocoonのフッターをカスタマイズするときは、読者目線で「次の一歩」を想像して構成してみてください。
★ちょっとだけ宣伝させてください★ 「ブログで10万」と聞くと、 と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。 【稼げるキーワード教えます】
▼ ▼ ▼
ウィジェットでフッターエリアをカスタマイズ
メニューで細かいリンクを整えたら、次は「ウィジェット」でフッターの中身を作り込んでいきます。ここでは、PCとスマホの両方を意識しながら、読みやすくて使いやすいレイアウトを目指します。
Cocoonフッターにおすすめのウィジェット例
Cocoonには、「フッター左」「フッター中」「フッター右」「フッター（モバイル）」など、複数のフッター用ウィジェットエリアがあります。ここに好きなウィジェットを入れていくことで、自分好みのフッターを作れます。
よく使われるウィジェットをまとめると、次のような感じです。
| ウィジェット名 | 向いている配置場所 | 使い方の例 |
|---|---|---|
| プロフィール | フッター左 or 中央 | 運営者の写真＋ひと言でサイトの雰囲気を伝える |
| 人気記事 | フッター中央 | よく読まれている記事を一覧で表示して回遊性アップ |
| 最新記事 | フッター中央 or 右 | リピーター向けに最近公開した記事をまとめて見せる |
| カテゴリー | フッター右 | 記事数が多い場合に、ジャンル別の入口として使う |
| 検索フォーム | フッター右 or モバイル | 読者が自分で知りたいテーマを検索できるようにする |
| SNSアイコン／フォローボタン | フッター左 or モバイル | TwitterやInstagramなど外部SNSへの導線をまとめる |
私がよく使うパターンは、次のような3カラム構成です。
- 左：プロフィール
- 中央：人気記事
- 右：カテゴリー
こうしておくと、初めて来た人には「誰が書いているサイトか」が伝わり、興味を持った人は人気記事やカテゴリーから別の記事へ進みやすくなります。ただし、あれこれ詰め込みすぎるとフッターが縦に長くなりがちなので、スマホの表示も必ず確認してみてください。
PCとスマホでフッター表示を分けるコツ
Cocoonには、モバイル専用のフッターウィジェットエリアがあります。ここを活用すると、「PCでは3カラムのリッチなフッター」「スマホでは要点だけを表示」というように、端末によって出し分けができます。
おすすめの考え方は、次のようなイメージです。
- PCフッター：プロフィール・人気記事・カテゴリーなどを3カラムで表示
- モバイルフッター：人気記事・検索フォーム・SNSアイコンなどに絞る
スマホの画面は小さいので、PCと同じ情報量をそのまま詰めると、どうしても読みづらくなります。いったん「モバイル用フッター」用にウィジェットを作り直して、スマホの読者にとって本当に必要な情報だけを残してあげると、かなりスッキリした印象になります。
ウィジェットを入れすぎないためのチェックポイント
フッターのウィジェットを触っていると、便利そうなものを次々と足したくなります。私も以前、プロフィール・人気記事・最新記事・カテゴリー・タグクラウド・検索フォーム…と、ほぼ全部盛りにしていたことがあります。
その結果どうなったかというと、ページの読み込みが少し重くなり、スマホではスクロール量が増え、どこを見ればいいか分からないフッターになってしまいました。結局、半分以上のウィジェットを外すことになりました。
同じ失敗をしないために、次のチェックポイントを意識してみてください。
- 「これはフッターでなくてもいい情報では？」と一度立ち止まる
- 同じリンクがヘッダーやサイドバーにもあるなら、どこか一箇所に絞る
- 「フッターまで来た人は何を探していそうか」を想像して、用途を3つ程度に絞る
情報量を減らすのは勇気がいりますが、フッターは「なんでも置き場」ではありません。Cocoonのフッターをカスタマイズするときは、あえて削る勇気を持ったほうが、結果として読者にとって親切なフッターになります。
★ブログでは公開できない裏情報★ 例えば、 などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。
私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。
CSSでCocoonフッターをおしゃれにカスタマイズ
ここからは、CSSを使ったCocoonのフッターカスタマイズについて触れていきます。といっても、難しいコードを書く必要はありません。コピペ＋色や太さを少し変えるだけで、雰囲気をガラッと変えられます。
追加CSSと子テーマ、どこに書けばいいか
まず大事なのは、「CSSをどこに書くか」です。場所を間違えると、テーマのアップデートなどでせっかくのカスタマイズが消えてしまうことがあります。
| 書く場所 | 特徴 | おすすめ度 |
|---|---|---|
| 外観 → カスタマイズ → 追加CSS | すぐ試せる、戻しやすい、初心者でも扱いやすい | 高 |
| 子テーマのstyle.css | カスタマイズを整理しやすい、本格的な調整向き | 高 |
| 親テーマのstyle.css（直接編集） | テーマ更新で消える可能性が高い | 低 |
個人的には、まず「追加CSS」で試してみて、長く使いたいカスタマイズが増えてきたら子テーマに移す、という流れが一番安全だと感じています。親テーマのファイルを直接書き換えるのは、よほど慣れていない限りは避けたほうが無難です。
フッター見出しやリンク色を変えるCSSアイデア
CSSを少し足すだけで、フッターの見出しやリンクの印象は大きく変わります。ここではよく使うアイデアをいくつか紹介します。
例えば、フッターウィジェットのタイトルに下線をつけて、見出し感を強めるイメージです。
.footer-widget-area .widget-title {
border-bottom: 2px solid #ccc;
padding-bottom: 4px;
margin-bottom: 8px;
}
リンク色を変えたいときは、フッター内のaタグだけをピンポイントで指定します。
.footer-widget-area a {
color: #ff6600;
}
.footer-widget-area a:hover {
text-decoration: underline;
}
このくらいのシンプルなカスタマイズでも、全体の雰囲気はかなり変わります。ただ、サイト全体の色と合っていないと浮いてしまうので、すでに使っているカラーコードの中から選んだり、明度だけ少し変えたりするのがおすすめです。
アイコンやボタンでフッターを目立たせるアイデア
フッターにSNSアイコンやボタンを置いている人も多いと思います。Cocoonでは、ウィジェットやメニューにアイコンフォントを組み合わせることで、文字だけよりも分かりやすいデザインにできます。
アイコンやボタンを使うときに意識したいのは、次のようなポイントです。
- SNSボタンは「アイコンのみ」ではなく、できればテキストも一緒に表示する
- ボタンの色は、サイトのブランドカラーと合わせるか、邪魔にならない中間色にする
- 大きさを揃えて並べ、バラバラな印象にならないようにする
動きの激しいアニメーションや派手なエフェクトは、読み込み速度や読みやすさを損ねる原因にもなります。フッターは「そっと支えてくれる裏方」のような存在なので、やりすぎず、ほどよいアクセント程度に抑えるのがちょうど良いと感じています。
トラブルを防ぐCocoonフッターカスタマイズの注意点
Cocoonのフッターをカスタマイズするときによくあるトラブルと、その防ぎ方をまとめておきます。作業前に一度目を通しておくと、焦らずに済むはずです。
変更が反映されないときに見るポイント
「設定を変えたはずなのに、フッターが変わっていない…」という相談はとても多いです。私も最初は、何度も保存し直してしまったことがあります。
そんなときにチェックしてほしいポイントを表にまとめると、次のようになります。
| 状況 | よくある原因 | 対処法 |
|---|---|---|
| 色を変えたのに反映されない | キャッシュプラグインやブラウザキャッシュが残っている | キャッシュ削除、シークレットウィンドウで再読み込み |
| メニューが表示されない | メニューの表示場所が「フッター」に割り当てられていない | 外観 → メニューで、フッターメニューにチェックを入れ直す |
| ウィジェットが出てこない | 別のフッターエリアにウィジェットを入れている | フッター左／中／右／モバイルなど、入れた場所を確認する |
| CSSが効いていない | セレクタ違い、他のCSSに上書きされている | ブラウザの開発者ツールで、どのCSSが効いているかを確認する |
特にキャッシュ関連は、慣れていてもつい忘れがちです。フッターの変更が反映されないときは、「キャッシュ削除」と「シークレットウィンドウで確認」をセットで試してみてください。
スキンやプラグインとの競合に注意
Cocoonはスキンの種類が多く、スキン側でフッターのデザインを変更している場合もあります。その場合、Cocoon設定や追加CSSで変えたつもりの内容が、スキンに上書きされてしまうことがあります。
心当たりがある場合は、次のような順番で確認してみてください。
- 一度スキンを「なし」にして、デフォルト状態のフッターを確認する
- 別のスキンに切り替えて、フッターの仕様の違いを比べてみる
- 使っているスキンの説明ページを読み、フッターに関する記述をチェックする
また、レイアウト系やキャッシュ系のプラグインが、フッター表示に影響しているケースもあります。どうしても原因が分からないときは、いったんプラグインをオフにして1つずつ有効化し直し、どこで表示が変わるかを確認すると原因を特定しやすくなります。
★ちょっとブレイク★ 「あと3ヶ月早くこの情報を知りたかった…」 そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。 無料で読めるうちに受け取っておいてください。
バックアップとテスト環境のすすめ
CSSやテンプレートファイルを触るときは、必ず「元に戻せる状態」を用意しておくことをおすすめします。私も一度、フッターのテンプレートをいじって画面が真っ白になり、冷や汗をかいたことがあります。
簡単にできる対策としては、次のようなものがあります。
- 変更前のCSSを丸ごとコピーして、メモ帳などに控えておく
- 子テーマを使い、親テーマのファイルはできるだけ触らない
- 大きな変更はテスト用の環境（ステージング環境など）があれば先にそちらで試す
Cocoonのフッターカスタマイズは、慣れてくるとどんどん楽しくなってきます。その分、つい触り過ぎてしまうこともあるので、いつでも戻せるようにしておくと、心に余裕を持ってチャレンジできます。
Cocoonフッターカスタマイズのまとめ
この記事のポイントをあらためて整理しておきます
- Cocoonのフッターは「Cocoon設定」「メニュー」「ウィジェット」の3箇所を押さえれば怖くない
- フッターメニューには、プライバシーポリシーや免責事項、お問い合わせなど信頼感を高めるリンクを厳選して置く
- ウィジェットは、プロフィール・人気記事・カテゴリーなどを中心に、入れすぎず3つ程度に絞るとスッキリ見える
- CSSによるカスタマイズは、追加CSSと子テーマを使い分け、まずは簡単な装飾から試す
- スキンやプラグイン、キャッシュの影響で反映されないことがあるので、チェックリストを用意しておく
今日からできる最初の一歩としては、「Cocoon設定 → フッター」を開き、まずは色とコピーライト表記だけでも自分らしく整えてみることをおすすめします。そのうえで、フッターメニューにプライバシーポリシーとお問い合わせページを追加し、ウィジェットにプロフィールと人気記事を配置するだけでも、あなたのブログはぐっと「プロっぽい」印象になります。
いきなり完璧を目指さなくて大丈夫なので、この記事を開きながら、少しずつ自分のペースでCocoonのフッターカスタマイズを楽しんでみてください。
【深呼吸タイム】 稼ぐために必要な3つのポイントを知っていますか？ これら全部を暴露します。
記事を読んだらコチラ
▼ ▼ ▼
