【Cocoon】フッターのカスタマイズ方法｜2つの機能を設定して利便性UP！

2024年2月9日2026年5月8日

「フッターをカスタマイズする方法は？」

「モバイルでもフッターボタンを設置したい」

「リンクをどうやって挿入するの？」

この記事では、そんな方に向けて、Cocoonでフッターのカスタマイズ方法を解説します。

かめコンパス

こんにちは、かめコンパスです！

本記事の内容

フッターの前提知識と完成イメージ
フッターをカスタマイズする方法
フッターをメニュー機能で設定する方法
フッターをウィジェット機能で設定する方法
フッターモバイルボタンを表示する方法

この記事を読めば、フッターのカスタマイズ方法はもちろん、

フッターを設定する2つの機能の使い分け
モバイルフッターメニューの作り方
リンクの挿入

が理解できるようになります。

私自身、CSSを使わないとフッターを自由に設定できないと思っていましたが、本記事の方法で好きなように設定できました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

フッターの前提知識と完成イメージ

フッターとは、サイト下部の場所のことです。

下の画像は、当ブログのフッターになります。

Cocoonでフッターは大きく2つに分かれており、

メニュー機能
ウィジェット機能

それぞれで設定できます。

フッターを設定することで、

サイトの情報を整理できる
ページの回遊率が向上する
ブログ全体のデザインを整える

などの役割を果たします。

かめコンパス

ブログを開設したら真っ先に行う設定だね！

Cocoonフッターをカスタマイズする方法

Cocoonでフッターをカスタマイズする方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定⇒フッターの順にクリックする

STEP

表示されたページでフッターをカスタマイズする

設定する項目が変更できない場合は、スキン制御されているのが原因です。

スキン制御の対処法はこちら

STEP

カスタマイズし終えたら、変更をまとめて保存をクリックする

フッターでカスタマイズできる項目は、下記5つあります。

フッター色
フッター表示タイプ
フッターロゴ
クレジット表記
フッターメニュー幅

それぞれ詳しく解説します。

色をつける

「フッター色」では、

背景色
文字色

の2つに色をつけれます。

設定したい色が見つからない場合は、設定したい色のカラーコードを入力すると見つかります。

カラーコードで設定したい色を見つける方法は、下の記事を参考にしてください。

【Canva】スポイト/カラーピッカーで素材の色を抽出する方法｜統一感を出しプロのデザイナーに一歩前進！ブログ/Canva利用者必見！スポイト/カラーピッカー機能を使用し、素材の色を抽出する方法を紹介しています。この機能を使いこなせば、自分の思い通りの色でデザインするこ…

フッターの表示タイプを選ぶ

「フッター表示タイプ」では、

ロゴ＆メニュー＆クレジット
メニュー＆クレジット（左右）
メニュー＆クレジット（中央揃え）

の3つの項目から選べます。

かめコンパス

フッターにロゴを表示する場合は、ロゴ＆メニュー＆クレジットを選んでね

ロゴを入れる

「フッターロゴ」では、フッターに表示させたいロゴ画像を挿入できます。

フッターロゴを設定しても画像が表示されない場合は、「フッター表示タイプ」で「ロゴ＆メニュー＆クレジット」を選ぶと解決します。

クレジット表記を選ぶ

「クレジット表記」では、5つの項目から選べます。

かめコンパス

よく分からない人は、そのままにしましょう

フッターのメニュー幅を指定する

「フッターメニュー幅」では、

メニュー幅を指定する(70~300px)
メニュー幅をテキストに合わせる

ことができます。

おすすめは、「メニュー幅をテキストに合わせる」に✔を入れることです。

メニュー幅をテキストに合わせないと、フッターメニューに表記されている項目が1行で収まらず、2行になってしまい、見栄えが悪くなります。

ですので、「メニュー幅をテキストに合わせる」に✔を入れましょう。

かめコンパス

メニュー幅をテキストに合わせたら、メニュー幅を指定しなくていいよ

Cocoonフッターをメニュー機能で設定する方法

Cocoonでフッターをメニュー機能で設定する方法は、下記の通りです。

STEP

WordPress管理画面で、外観⇒メニューの順にクリックする

STEP

「新しいメニューを作成しましょう」をクリックする

STEP

メニュー名を入力
メニュー設定の「フッターメニュー」に✔
メニューを作成をクリックする

かめコンパス

メニュー名は分かりやすいように「フッター」でOKだよ

STEP

フッターに表示したい項目に✔
メニューに追加をクリック
追加した項目を並び替える
メニューを保存をクリックする

かめコンパス

一般的にフッターでは固定ページを表示させるよ

フッターをメニュー機能で設定完了！

フッターメニューで設置すべき4つの項目

フッターには、下記4つの項目を設置するのが一般的です。

プロフィール
お問い合わせフォーム
プライバシーポリシー
サイトマップ

それぞれの設置方法は、下の記事を参考にしてください。

プロフィールを設置する方法はこちら

【Cocoon】プロフィールを設置する方法｜オリジナル画像を設定して信頼度UP！ WordPress利用者必見！プロフィールの設定やリンクを挿入する方法、表示されない場合の対処法などを分かりやすく解説しています。画像を設置し、簡単な紹介文も書いて、ユ…

お問い合わせフォームを設置する方法はこちら

【Cocoon】お問い合わせフォームの設置方法｜表示されない場合も初心者向けに解説 WordPress利用者必見！お問い合わせフォームの作り方が分からない人も、プラグインContact Form 7を使えば簡単に作成できます。ヘッダーやフッターに設置すれば、仕事の依…

プライバシーポリシーの作成は、当ブログのプライバシーポリシーを参考にしてください。コピペOKです。

参考記事

プライバシーポリシー本プライバシーポリシーでは、かめコンパス(https://www.kamecompass.com/)の各種サービスにおいて、ユーザーの個人情報もしくはそれに準ずる情報の取得・利用・管理や、免…

フッターにSNS・ホームボタンを設置する方法

フッターのメニュー機能で、SNS・ホームボタンを設置するには、カスタムリンクで設定します。

STEP

WordPress管理画面で、外観⇒メニューの順にクリックする

STEP

「編集するメニューを選択」をプルダウン
先ほど作ったフッターメニューをクリック
選択をクリックする

かめコンパス

先ほど作ったフッターメニュー＝メニュー名が表示されるよ

STEP

「カスタムリンク」をプルダウン
フッターに表示したいURLを入力
ブログ上の表記名を入力
メニューを追加をクリックする

「カスタムリンク」にURLとリンク文字列を入力している様子と、「メニューを追加」がある場所

＼フッターに表示させたい項目を選ぶ／

URL：𝕏（旧Twitter）のURL
リンク文字列：𝕏（旧Twitter）

を入力します。

STEP

メニューに追加されたカスタムリンクを並び替えて、メニューを保存をクリックする

フッターにSNS・ホームボタンを設置完了！

Cocoonフッターをウィジェット機能で設定する方法

Cocoonでフッターをウィジェット機能で設定する方法は、下記の通りです。

STEP

WordPress管理画面で、外観⇒ウィジェットの順にクリックする

STEP

利用できるウィジェットからフッターに表示したい項目を選ぶ

STEP

フッターに表示したい項目をプルダウン
フッター左・中・右、もしくはフッター(モバイル用)から選ぶ
ウィジェットを追加をクリックする

フッター左・中・右、フッター(モバイル用)から選んでいる様子と、「ウィジェットを追加」がある場所

フッター左・中・右は、PCに設定する場合に使い、

フッター(モバイル用)は、スマホに設定する場合に使います。

STEP

フッターに追加した項目を設定し、保存をクリックする

フッターをウィジェット機能で設定完了！

ウィジェット機能で設置すべき5つの項目

フッターには、下記5つの項目を設置しましょう。

プロフィール
検索
カテゴリー
アーカイブ
タグ

かめコンパス

ユーザーが興味のある記事を見つけやすいよう情報をまとめるのがポイント！

スマホはPCと違い、サイドバーが常に表示されないので、

当ブログでは、フッター(モバイル用)にカテゴリー別の人気記事も入れてます。

かめコンパス

スマホとPCのフッターは統一しなくていいよ

フッターに住所・地図を設置する方法

フッターのウィジェット機能で、住所・地図を設置するには、カスタムHTMLで設定します。

STEP

WordPress管理画面で、外観⇒ウィジェットの順にクリックする

STEP

「カスタムHTML」をプルダウン
フッター左・中・右、もしくはフッター(モバイル用)から選ぶ
ウィジェットを追加をクリックする

「カスタムHTML」からフッター左・中・右、フッター(モバイル用)から選んでいる様子と、「ウィジェットを追加」がある場所

STEP

「タイトル」に住所を入力
「内容」に住所の地図のHTMLを入力
保存をクリックする

住所の地図のHTMLを見つける方法

STEP

Google検索窓に住所を入力
「地図」をクリックする

STEP

「共有」をクリックする

STEP

「地図を埋め込む」をクリックすると「HTMLをコピー」が見つかる

HTMLをコピーして、先ほどの「カスタムHTML」の「内容」に貼りつけましょう。

「タイトル」に住所、「内容」に住所の地図のHTMLを入力している様子と、「保存」がある場所

STEP

フッターに住所・地図を設置完了！

Cocoonフッターモバイルボタンを表示する方法

Cocoonでフッターモバイルボタンを表示する方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定⇒モバイルの順にクリックする

STEP

「モバイルメニュー」から「フッターモバイルボタン」か「ヘッダー・モバイルボタン」を選ぶ

STEP

変更をまとめて保存をクリックする

フッターモバイルボタンを表示できた！

次に、フッターモバイルボタンに表示させる項目を設定していきます。

モバイルでフッターメニューを設定する方法

STEP

WordPress管理画面で、外観⇒メニューの順にクリックする

STEP

「新しいメニューを作成しましょう」をクリックする

STEP

メニュー名を入力
メニュー設定の「フッターモバイルボタン」に✔
メニューを作成をクリックする

STEP

フッターモバイルに表示したい項目に✔
メニューに追加をクリック
追加した項目を並び替える
メニューを保存をクリックする

モバイルでフッターメニューを設定完了！

モバイルのフッターメニューで設置すべき3つの項目

モバイルのフッターメニューでは、下記3つのボタンを設定することをおすすめします。

ホーム
目次に戻る
サイドバー

かめコンパス

ユーザーの利便性を高めるボタンを設置するのがポイント！

紹介したおすすめボタンは、カスタムリンクに下記テキストを入力すると作れます。

リンク文字列	URL
ホーム	#home
目次に戻る	#toc
サイドバー	#sidebar

まとめ：フッターを設定して利便性の高いサイト設計に！

今回は、Cocoonでフッターのカスタマイズ方法を紹介しました。

本記事のおさらい

フッターをカスタマイズする方法
フッターをメニュー機能で設定する方法
フッターをウィジェット機能で設定する方法
フッターモバイルボタンを表示する方法

フッターとは反対のヘッダーのカスタマイズ方法を知りたいという人は、下の記事も見てください。

当ブログ愛用のWordPressテーマ

おすすめAIツール6選

【Cocoon】フッターのカスタマイズ方法｜2つの機能を設定して利便性UP！

フッターの前提知識と完成イメージ