Cocoonでフッターモバイルボタンを表示・作成・編集・削除する方法とは?

ブログ
スポンサーリンク

皆さんはご自身のブログでフッターモバイルボタンが表示されてない、又はデフォルトのままではないですか?

今回は、フッターモバイルボタンの表示・作成・編集・削除する方法をまとめてご紹介致します。

実際私もフッターモバイルボタンが出ておらず、他の方のブログで見つけて「私のブログにも欲しい!」と思い今回設定しました。

こんな方にオススメ
  • フッターモバイルボタンを表示作成したい
  • フッターモバイルボタンを編集したい
  • ブログの下に出るメニューが何か知りたい

画像付きで丁寧に解説していきますので、ブログ初心者の方もご安心下さい。

それでは早速見ていきましょう!

今回の記事は以下を参考にさせて頂きました。

フッターモバイルボタンの設定方法
スマホ画面のフッターに表示されるスライドインメニューボタンのカスタマイズ方法の解説です。
スポンサーリンク

フッターモバイルボタンとは?

そもそもフッターモバイルボタンとは何でしょうか?

フッターモバイルボタンとはその名の通り、モバイル画面でフッター(画面下)に表示されているメニューボタンです。

Webページを開くとよく見かける画像下の赤枠に表示されているメニューボタンのことです。

ろと
ろと

私もブログ閲覧していて見たことは何度もありましたが、名前までは知らなかった為調べるのに苦労しました。

スポンサーリンク

表示方法

まずはフッターモバイルボタンを表示する方法をご紹介します。

1、Cocoon設定

メニューからCocoon設定を選択します。

2、モバイル設定

Cocoon設定内からモバイルを選択します。

3. 表示制御

モバイルメニューからフッターモバイルボタンorヘッダー・フッターモバイルボタンを選択します。

フッターモバイルボタンを選択した場合はこちら。


ヘッダー・フッターモバイルボタンを選択した場合はこちら。

以上でフッターモバイルボタンの表示は完了です。

スポンサーリンク

作成方法

続いてはフッターモバイルボタンの作成方法をご紹介します。

1、外観メニュー

メニューから外観内のメニューを選択します。

2、メニュー作成画面へ

「新しいメニューを作成しましょう」を選択します。

3、新規メニュー作成

メニュー名を入力してフッターモバイルボタンをチェック後、「メニューを作成」を選択します。

以上でフッターモバイルボタンの作成は完了です。

編集方法

続いてはフッターモバイルボタンの編集方法をご紹介します。

1、メニュー選択

外観内のメニューにて「編集するメニューを選択」から先ほど作成したメニューを選択します。

2、ボタン追加

「メニュー項目を追加」からフッターモバイルボタンに設置するボタンを追加できます。

固定ページ・投稿・カテゴリーに関しては追加したいページを選択するだけなので分かりやすいですが、

カスタムリンクに関しては知っておくと便利なURLコマンドがあるので以下で紹介します。

カスタムリンク

こちらがカスタムリンクに設定するURLコマンドの一覧です。

URLコマンド機能
#menuグローバルメニューを表示
#homeフロントページへ移動
#shareシェアボタンを表示
#followフォローボタンを表示
#search検索フォームを表示
#toc目次へ移動
#topページのトップへ移動
#prev現在ページの前ページを表示
#next現在ページの次ページを表示
#commentsコメント欄へ移動
#logoサイトロゴを表示
#sidebarサイドバーを表示

カスタムリンクの設定も簡単で以下の通りです。

このように設定して「メニューに追加」を選択します。 (リンク文字列はお好みですが分かりやすい名前にしましょう)

以上でフッターモバイルボタンの編集は完了です。

削除方法

続いてはフッターモバイルボタンの削除方法をご紹介します。

1、メニュー削除

外観内のメニューを選択後、1番下にある「メニューを削除」を選択します。

以上でフッターモバイルボタンの削除は完了です。

上記の削除では自身で作成したフッターモバイルボタンの設定が削除されるだけで、デフォルトの内容での表示はされてしまいます。

上記で削除していますが、デフォルトのフッターモバイルボタンが表示されています。

そのため表示したくない場合は、始めに説明した表示方法にて表示しない設定にしましょう。

モバイルメニューから「ボタンを表示しない」を選択します。

メリット

こちらではフッターモバイルボタンを設置する際のメリットをご紹介します。

読者が使いやすい

フッターモバイルボタンを設置する上で1番のメリットはやはり読者が使いやすい点です。

例えばホームボタンを配置していれば、開いている画面からすぐにサイトのホームへ移動できます。

読者側の一手間を取り除くボタンを配置するとこで、スムーズにサイト内を閲覧することが出来ます。

自分好みにカスタマイズ可能

フッターモバイルボタンは自分好みにカスタマイズが可能です。

いくつかのボタンを設置してシンプルで読者に使いやすいサイトを目指すも良し。

ロゴを入れて他には無いオリジナリティのあるサイトをアピールするも良し。

自分好み&読者に使いやすいフッターモバイルボタンを目指しましょう!

デメリット

こちらではフッターモバイルボタンを設置する際のデメリットをご紹介します。

記事の表示が狭くなる

フッターモバイルボタンが下に出ている分は記事の表示は少し狭くなってしまいます。

ただそんなに幅広く表示される訳でも無いので、そこまで気にする必要も無いかと思います。

どうしても気になる方は設置しない方が無難でしょう。

出てくるのが気になる人も

またフッターモバイルボタンは下にスクロールする場合は表示されず、上にスクロールする際に表示されます。

そのため表示されたり消えたりする動作が気になる方も設置しない方が良いでしょう。

まとめ

最後に今回のまとめです!

フッターモバイルボタンとは、モバイル画面でフッター(画面下)に表示されているメニューボタンのことです。

フッターモバイルボタン
  • Cocoon設定内のモバイルから表示/非表示の切り替えが出来ます。
  • 外観内のメニューから作成/編集/削除が出来ます。

メリットとしては、読者が使いやすい&自分好みにカスタマイズが可能な点です。

デメリットとしては、記事の表示が狭くなる&下から出てくるのが気になる方がいるかもしれない点です。

今回の記事が皆さんのブログの役に少しでも立てていたら嬉しいです!

今回はこれで以上となります。

最後までご覧頂きありがとうございます‼︎

ろと

ご訪問ありがとございます。
初めまして、ろとです。
スマホ関連の知識に疎い20代社会人♪
ただ詳しく無いからこその初心者目線で丁寧に執筆しています。
皆さんと一緒に成長してスマホ強者を目指します!

ろとをフォローする
ブログ
スポンサーリンク
ろとをフォローする
ろとブログ

コメント

タイトルとURLをコピーしました