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

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

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

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

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

かめコンパス

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

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

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

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

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

かめコンパス

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

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

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

STEP

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

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

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

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

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

スキン制御されている場合の表示のされ方

Cocoonでスキン制御の対処法は、下の記事を参考にしてください。

STEP

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

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

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

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

色をつける

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

「フッター色」では、

  • 背景色
  • 文字色

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

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

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

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

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

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

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

  • ロゴ&メニュー&クレジット
  • メニュー&クレジット(左右)
  • メニュー&クレジット(中央揃え)

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

かめコンパス

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

ロゴを入れる

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

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

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

クレジット表記を選ぶ

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

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

かめコンパス

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

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

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

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

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

ことができます。

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

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

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

かめコンパス

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

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

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

STEP

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

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

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

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

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

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

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

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

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

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

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

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

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

フッターに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でフッターのカスタマイズ方法の記事

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

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

コメント

コメントする

目次