「メイド・イン・ヘブン」スキン適用中

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

テーマ設定
この記事は約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 目次へ 目次に移動
以下の条件の際にボタンが表示されます。

  1. 「Cocoon設定」で「目次を表示」にしている時
  2. 目次ウィジェットが「投稿・固定ページ本文中」ウィジェットエリアに入っている時
  3. 目次ショートコードが記事本文中に入っている時
#top トップ ページトップに移動
#prev 前へ 現在表示中の投稿ページの前のページを表示
#next 次へ 現在表示中の投稿ページの次のページを表示
#comments コメント コメント欄へ移動
#logo サイト名入力
※短縮形推奨
横幅広めのサイトロゴが表示されるボタンを表示
#sidebar サイドバー サイドバー項目をスライドインで表示
※ヘッダー・フッターモバイルボタンどちらかにひとつだけ設置を推奨

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

#menu

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

#home

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

#search

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

#logo

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

ロゴボタンは横長

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

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

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

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

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

動作確認

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

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

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

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

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

コメント

  1. 前川 より:

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

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

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

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

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

  2. かみやま より:

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

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

    バージョンは1.9.9です。

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

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

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

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

  3. 小林綾子 より:

    こんにちは。初めまして、今現在設定を行っております。大変恐縮なのですが、上記で説明されています設定画面とWordpress上での設定画面での相違があり、どのようにすれば宜しいのかわからずにおります。
    特にメニュー設定の言葉とこちらでの説明文の言葉が違っており、どれを選択すればよいのかわかりません。
    最新版がありますでしょうか?ご指導お願い致します。

  4. 小林綾子 より:

    ご返答有難うございます。
    上記の内容で相違ありません。
    申し訳ありません、全くの初心者で書かれていることが理解出来ずに
    ネットで検索しながらの状態で、今回の点は独自に設定ということなので
    戸惑っております。
    作業を継続していくことで、理解できるようになるのでしょうか…
    とりあえず、マニュアルに目を通そうと思います。

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

      マニュアルを読んでも難しいようであれば、コメント入力欄の案内にもあるように、フォーラムに書き込んでいただければ、画像なども含めてアドバイスできるかと思います。

      https://wp-cocoon.com/community/cocoon-theme/
      「トピックを追加」ボタンから書き込めます(登録不要)。
      またその際には、わからない部分のキャプチャ画像も添付して書き込んでいただければ幸いです。
      コメント欄では、画像などがアップできないので機能は貧弱で、フォーラムの書き込みを推奨しています。

  5. Riho より:

    はじめまして。
    モバイルフッターの設定をしていますが、表示されません。
    位置の管理→フッターモバイルボタンは設定済み
    メニューを編集でも手順通り、アイコンのCSSも入れております。
    どこに問題があるのでしょうか…?

    ちなみにモバイルヘッダーはちゃんと表示されます。
    お忙しいところ恐縮ですが、お返事お待ちしております。

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

      大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。

      トピックに書き込む際には、よろしければCocoon設定のモバイルボタン設定部分のスクリーンショットもいただければ幸いです。

  6. 岡田 より:

    お尋ねします。
    フォーラムとか探したのですが、見つからないので質問させていただきます。

    「デフォルトだと、スクロールに合わせて表示/非表示が切り替わります。」とありますが
    フッターボタンをスクロールしても表示したままにするのはどうしたら良いのでしょうか。

    よろしくお願いいたします。

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

      大変申し訳ないですがコメントの案内にありますようにテーマへの質問は、お手数ですがフォーラムの方に書き込んでいただけると助かります。

      こちらから、「トピックを追加」ボタンを押してコピペで同様のことを書き込んでいただければ幸いです。

      ※フォーラムの書き込みは登録不要です。

      コメント機能だと機能が貧弱で、画像アップロード機能などがなく、対応(案内)が大変なのでご協力よろしくお願いいたします。

  7. 岡田俊一 より:

    場所違いで、質問してすいませんでした。
    今フォーラムを確認して、解決策が見つかりました。

    cocoonの設定の中に「モバイルボタンを固定」のチェック項目がありました。

    見落としてました。

    お騒がせいたしました。

    ありがとうございました。

    岡田

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