MENU

PR

当ブログ愛用のWordPressテーマ

＼乗り換え先おすすめNo.1テーマ！／

／ブロガーとして本格的に取り組む＼

【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ

おすすめAIツール6選

  1. ビットランドAI
初心者必見！ビットランドAIの評判｜機能・料金と使ってみた感想レビューまとめ
SEOに強い！トランスコープの評判口コミ｜使い方や感想レビューも解説
  1. AIブログくん
本当に稼げる？AIブログくんの評判・口コミ｜料金や使ってみた感想レビューまとめ
【時短！】ラクリンの口コミ評判｜AIでブログ記事作成してみた感想レビュー
期待以上！イルシルの評判口コミ｜初心者が使ってみた感想を本音レビュー
Awarefy(アウェアファイ)の口コミ評判｜使ってみた感想レビュー！

✓優秀なデザイン性 ✓最新のSEO ✓サイト高速化に対応｜CocoonからSWELLに乗り換えた私の感想と口コミを見る >>

SWELLを使ってみた私の感想と口コミを見る >>

クリック

タップ

  1. ホーム
  2. ブログ
  3. Cocoon
  4. 【Cocoon】フッターのカスタマイズ方法｜2つの機能を設定して利便性UP！

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

広告
Cocoon

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

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

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

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

かめコンパス

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

本記事の内容

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

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

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

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

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

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

あわせて読みたい
【Cocoon】使い方と初期設定を初心者向けに解説【WordPressテーマ】 WordPress利用者必見！ブログ初心者向けにCocoonの使い方と設定方法を運営歴・記事数別で紹介しています。この記事を読めば、記事の書き方やサイト設計・デザイン、収益化…

さっそく本題に入りましょう。

当ブログ愛用のWordPressテーマ

＼もっと早く乗り換えればよかった…／

使い心地バツグン、高機能でオシャレ！

URL：

>>CocoonとSWELLの比較｜デザイン・SEO・稼ぎやすさなど計9項目で比較

>>SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介

目次

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

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

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

PC画面で見た当ブログのフッター
PC画面
スマホ画面で見た当ブログのフッター
スマホ画面

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

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

メニュー機能とウィジェット機能で設定できるフッターの場所

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

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

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

かめコンパス

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

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

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

STEP

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

「Cocoon設定」、「フッター」がある場所
STEP

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

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

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

スキン制御されている場合の表示のされ方
スキン制御の対処法はこちら
STEP

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

「変更をまとめて保存」がある場所

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

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

色をつける

「フッター色」がある場所

「フッター色」では、

  • 背景色
  • 文字色

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

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

カラーコードを入力する場所

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

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

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

「フッター表示タイプ」がある場所

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

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

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

かめコンパス

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

ロゴを入れる

「フッターロゴ」がある場所

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

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

クレジット表記を選ぶ

「クレジット表記」がある場所

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

かめコンパス

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

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

「フッターメニュー幅」がある場所

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

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

ことができます。

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

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

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

かめコンパス

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

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

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

STEP

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

「外観」、「メニュー」がある場所
STEP

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

「新しいメニューを作成しましょう」がある場所
STEP
  1. メニュー名を入力
  2. メニュー設定の「フッターメニュー」に✔
  3. メニューを作成をクリックする
かめコンパス

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

「メニュー名」、「フッターメニュー」、「メニューを作成」がある場所
STEP
  1. フッターに表示したい項目に✔
  2. メニューに追加をクリック
  3. 追加した項目を並び替える
  4. メニューを保存をクリックする
かめコンパス

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

「メニューに追加」、「メニューを保存」がある場所

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

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

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

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

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

プロフィールを設置する方法はこちら
関連記事
【Cocoon】プロフィールを設置する方法｜オリジナル画像を設定して信頼度UP！ WordPress利用者必見！プロフィールの設定やリンクを挿入する方法、表示されない場合の対処法などを分かりやすく解説しています。画像を設置し、簡単な紹介文も書いて、ユ…
お問い合わせフォームを設置する方法はこちら
関連記事
【Cocoon】お問い合わせフォームの設置方法｜表示されない場合も初心者向けに解説 WordPress利用者必見！お問い合わせフォームの作り方が分からない人も、プラグインContact Form 7を使えば簡単に作成できます。ヘッダーやフッターに設置すれば、仕事の依…
参考記事
プライバシーポリシー 本プライバシーポリシーでは、かめコンパス(https://www.kamecompass.com/)の各種サービスにおいて、ユーザーの個人情報もしくはそれに準ずる情報の取得・利用・管理や、免…

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

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

STEP

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

「外観」、「メニュー」がある場所
STEP
  1. 「編集するメニューを選択」をプルダウン
  2. 先ほど作ったフッターメニューをクリック
  3. 選択をクリックする
かめコンパス

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

作ったフッターメニューを選んでいる様子
STEP
  1. 「カスタムリンク」をプルダウン
  2. フッターに表示したいURLを入力
  3. ブログ上の表記名を入力
  4. メニューを追加をクリックする
「カスタムリンク」にURLとリンク文字列を入力している様子と、「メニューを追加」がある場所

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

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

を入力します。

STEP

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

「メニューを保存」がある場所

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

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

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

STEP

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

「外観」、「ウィジェット」がある場所
STEP

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

フッターに表示したい項目を選んでいる様子
STEP
  1. フッターに表示したい項目をプルダウン
  2. フッター左・中・右、もしくはフッター(モバイル用)から選ぶ
  3. ウィジェットを追加をクリックする
フッター左・中・右、フッター(モバイル用)から選んでいる様子と、「ウィジェットを追加」がある場所

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

フッター左・中・右の場所

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

STEP

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

フッターに追加した項目を設定している様子と、「保存」がある場所

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

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

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

  • プロフィール
  • 検索
  • カテゴリー
  • アーカイブ
  • タグ
かめコンパス

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

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

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

かめコンパス

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

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

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

STEP

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

「外観」、「ウィジェット」がある場所
STEP
  1. 「カスタムHTML」をプルダウン
  2. フッター左・中・右、もしくはフッター(モバイル用)から選ぶ
  3. ウィジェットを追加をクリックする
「カスタムHTML」からフッター左・中・右、フッター(モバイル用)から選んでいる様子と、「ウィジェットを追加」がある場所
STEP
  1. 「タイトル」に住所を入力
  2. 「内容」に住所の地図のHTMLを入力
  3. 保存をクリックする
住所の地図のHTMLを見つける方法
STEP
  1. Google検索窓に住所を入力
  2. 「地図」をクリックする
Google検索窓に住所を入力している様子と「地図」がある場所
STEP

「共有」をクリックする

「共有」がある場所
STEP

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

「地図を埋め込む」、「HTMLをコピー」がある場所

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

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

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

フッターに住所・地図を設置できた様子

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

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

STEP

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

「Cocoon設定」、「モバイル」がある場所
STEP

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

「フッターモバイルボタン」と「ヘッダー・モバイルボタン」がある場所
STEP

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

「変更をまとめて保存」がある場所

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

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

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

STEP
  1. WordPress管理画面で、外観⇒メニューの順にクリックする
「外観」、「メニュー」がある場所
STEP

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

「新しいメニューを作成しましょう」がある場所
STEP
  1. メニュー名を入力
  2. メニュー設定の「フッターモバイルボタン」に✔
  3. メニューを作成をクリックする
「メニュー名」、「フッターモバイルボタン」、「メニューを作成」がある場所
STEP
  1. フッターモバイルに表示したい項目に✔
  2. メニューに追加をクリック
  3. 追加した項目を並び替える
  4. メニューを保存をクリックする
「メニューに追加」、「メニューを保存」がある場所

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

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

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

  • ホーム
  • 目次に戻る
  • サイドバー
かめコンパス

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

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

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

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

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

本記事のおさらい

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

あわせて読みたい
【Cocoon】ヘッダーのカスタマイズ方法｜おすすめのメニュー設定も初心者向けに解説 WordPress利用者必見！ヘッダーのカスタマイズを始めとした、モバイルメニューやロゴ・検索窓の設置方法などを分かりやすく解説しています。この記事を読めば、ユーザーに…

また以下の記事では、その他カスタマイズ方法も紹介しています。

あわせて読みたい
【Cocoon】カスタマイズ方法｜おしゃれなブログに様変わり【CSS不要】 WordPress利用者必見！CocoonでCSSを使わず、おしゃれにカスタマイズする方法を紹介しています。この記事に書いてある内容を行えば、ユーザビリティーの向上はもちろん、感…
かめコンパス

ためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！

・　　　・　　　・

本記事は人気No.1*のWordPressテーマ「」で作成したので、デザインが抜群にオシャレです！

*：「【2025】WordPressテーマ人気ランキング Top100 (日本) – WP-Search」を参考

当ブログ愛用のWordPressテーマ「SWELL」
  • プロのデザイナーが作ったかのようなオシャレなデザイン性！
  • SWELL独自のブロックエディターが優秀！
  • 専門家との提携でサイトの表示速度が圧倒的に速い！
  • 専用プラグインでSEO評価が向上！
  • 記事を書くスピードが1段階アップする！
  • 計測機能付きでアフィリエイトで稼ぎやすい！

＼もっと早く乗り換えればよかった…／

／テーマ移行も5ステップのみ！＼

Cocoon
Cocoonでフッターのカスタマイズ方法の記事

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次