現在デフォルトスキンとして「Momoon(アクア)」を適用中。

フッターモバイルボタンの設定方法

フォーラム
この記事は約2分で読めます。

Cocoon 1.7.8より、フッターモバイルボタンを管理画面からある程度自由に変更できるようにしました。

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

Cocoonのモバイルフッターメニューボタン

スポンサーリンク

フッターモバイルボタンの表示方法

フッターモバイルボタンを表示するには、Cocoon設定「モバイル」タブから以下のいずれかを選択してください。

  • フッターモバイルボタン
  • ヘッダー・フッターモバイルボタン

モバイルフッターボタンの選択

「フッターモバイルボタン」を選択した場合は、スマホ画面上部のみにボタンが表示されます。

Cocoonのモバイルフッターメニューボタン

「ヘッダー・フッターモバイルボタン」を選択した場合は、画面上下にボタンが表示されます。

ヘッダー・フッターモバイルボタン

事前準備

まず、モバイルフッターメニューを利用するには、事前に簡単な準備をしておく必要があります。

WordPress管理画面の「外観」から「メニュー」を開きます。

外観からメニュー項目を選択する

「メニュー」関連の「表示オプション」から「CSSクラス」オプションを有効にしてください。

メニュー画面のオプションからCSS classを有効にする

これで事前準備は完了です。

フッターモバイルボタンの作成

フッターモバイルボタンの作成も同様に「メニュー」画面から行います。

新規メニューの作成

まずは、「新しいメニューを作成しましょう」リンクから新しいメニューを作成します。

新しいメニューを作成しましょうリンクをクリック

「メニュー名」を付けて「メニューを作成」ボタンを押してください。

新しいメニューを作成する

個別メニューの追加

固定ページをメニューに追加するには、固定ページを選択し「メニューに追加」ボタンを押してください。

固定ページをメニューに追加する

「カスタムリンク」で挿入する場合は「URL」と「リンク文字列」を入力して「メニューに追加」ボタンを押してください。

カスタムリンクでメニューを挿入

その他に「投稿」や「カテゴリー」からも同様にメニューを挿入し利用できます。

個別メニューのアイコン設定

メニューを挿入したら「メニューの詳細」設定項目を開きます。

アイコンフォントは「CSS class」で設定を行います。

メニューの詳細設定項目

アイコンフォントは、Font Awesome4.7のものを利用します。

Font Awesome Icons
Font Awesome, the iconic font and CSS framework

ココで探すと超楽です(※クラス名を取得する場合は先頭に「fa 」を付け加えてください)。

FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】
WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。2019-07-0

アイコン詳細ページを開いたら、タグのclass属性の値をコピーします。

アイコンフォントのクラスをコピー

コピーした値はメニューの詳細設定にある「CSS class」に貼り付けます。

コピーしたクラスをベースとする

すると以下のようなダウンロードボタンを作成できます。

ダウンロードボタン例

電話リンクの入力例

電話番号ボタンを作成するには、URLに対して「tel:1234567890」と電話番号を入力し、ボタンを作成してください。

電話番号の入力

その後、CSSクラスに対して「fa fa-phone」と入力してください。

電話アイコンを設定

設定を保存すると、以下のように電話ボタンが表示されます。

電話ボタン例

独自ボタンを作成する

Cocoonの独自ボタンを利用するには、カスタムリンクのURLに、あらかじめ定義されたコマンド(文字列)を貼り付けることで利用できます。

カスタムリンクで独自ボタンを作成する

モバイルフッターボタンコマンド

全コマンドはこちら。

URLコマンドリンク文字列例ボタンの役割
#menuメニューグローバルメニューをスライドインで表示
#homeホームフロントページへのリンクボタン
#shareシェアシェアボタンを表示
#followフォローフォローボタンを表示
#search検索検索フォームを表示
#toc目次へ目次に移動
#topトップページトップに移動
#prev前へ現在表示中の投稿ページの前のページを表示
#next次へ現在表示中の投稿ページの次のページを表示
#commentsコメントコメント欄へ移動
#sidebarサイドバーサイドバー項目をスライドインで表示
#logoサイト名入力
※短縮形推奨
横幅広めのサイトロゴが表示されるボタンを表示

例えば、グローバルメニューを表示するのであれば、以下のように入力します。

#menu

ホームボタンならこんな感じ。

#home

検索ボタンはこんな感じ。

#search

ロゴボタン。ロゴボタンの場合は、「リンク文字列」にサイトタイトルを入力してください(※短いタイトル)。

#logo

ロゴボタンを表示させた場合は、こんな感じに他のボタンにより横長で表示されます。

ロゴボタンは横長

Cocoon設定の「ヘッダー」タブにある「ヘッダーロゴ」を設定しておくと画像が縮小化され、テキストより綺麗に表示されます。
ヘッダーロゴを設定しておく

メニューをフッターモバイルメニューにセットする

全てのメニューを設定し終えたら、「メニュー設定」で「フッターモバイルボタン」を選択し「メニューを保存」ボタンを押してください。

フッターモバイルボタンのメニュー設定を選択

最後に「メニュー設定」で場所を指定して保存することで、ようやくフッターメニューが公開ページにも表示されます。

動作確認

設定後はこんな感じで表示されます。

をモバイルフッターボタンの動作デモ

デフォルトだと、スクロールに合わせて表示/非表示が切り替わります。

フッターモバイルボタンの動作デモ

作成中のものが公開ページに表示されることはないので安心して作成作業を行うことができます。

フォーラム
スポンサーリンク
わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年4ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに20%割引(※2019/12/18 17:00まで)。

クーポンコード:Y2KIC92J9Y

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年2ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

  1. 前川 より:

    わいひらさんこんばんはっ
    いつもお世話になっています。

    お伝えしようかどうか迷ったのですが、記事タイトルが「ボタンボタン」になっています・・・ww

    他の方も見るかもしれないと思ったので、差し出がましいと思いましたがお知らせさせていただきますm(_ _)m

    • わいひらわいひら より:

      ご連絡ありがとうございます。
      ほんとだ(笑)盛大に間違っていますね。
      僕の場合、音声入力で書いているので、誤字が多いです。
      それでいて自分で気づかなかったりするので、教えていただけると大変助かります^^
      もし、また何かありましたら是非教えていただければ幸いです。
      修正しておきます。

  2. かみやま より:

    はじめまして。
    私もcocoonを使ってブログを運営しています。

    質問なのですが、外観>メニューに飛んだときに、↑で説明されている、
    「メニュー」関連の「表示オプション」から「CSSクラス」オプションを有効にしてください。」
    の表示オプションなどが全く表示されていません。

    バージョンは1.9.9です。

    プラグイン等の問題なのでしょうか?

    もしお分かりでしたら、ご回答のほどよろしくお願い致します。

    • わいひらわいひら より:

      コメントは機能が貧弱なので画像等をアップロードすることができません。
      コメントの案内にもあるように、フォーラムの方に書き込んでいただいてよろしいでしょうか(上記コメントのコピペで良いです)。
      https://wp-cocoon.com/community/cocoon-theme/
      ※「トピックを追加」ボタンからユーザー登録せずとも記入できます。

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