現在デフォルトスキンとして「Bizarre-food(ブルーカレー) 」適用中。近日同梱予定。

モバイルフッターメニューの設定方法

テーマ設定
この記事は約4分で読めます。

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

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

デフォルトのモバイルフッターメニュー
スポンサーリンク

事前準備

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

まずCocoon設定の「モバイル」タブから「モバイルボタンレイアウト」が「スライドインボタン」になっていることを確認してください。

モバイルボタンレイアウトがスライドインになっているか確認
Cocoonデフォルト設定なので、特に設定を変更しない場合はそのままで利用できます。

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

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

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

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

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

フッターモバイルメニューの作成

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

新規メニューの作成

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

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

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

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

個別メニューの追加

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

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

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

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

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

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

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

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

メニューの詳細設定項目

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

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

以下では、ダウンロードアイコン(fa-download)を設定するのを例にで紹介します。

fa-download
fa-download: Font Awesome Icons
Font Awesome, the iconic font and CSS framework

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

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

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

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

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

モバイルダウンロードボタン

電話リンクの入力例

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

電話番号の入力

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

電話アイコンを設定

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

電話アイコン表示

独自ボタンを作成する

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

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

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

全コマンドはこちら。

URLコマンドリンク文字列例ボタンの役割
#menuメニューグローバルメニューをスライドインで表示
#homeホームフロントページへのリンクボタン
#shareシェアシェアボタンを表示
#followフォローフォローボタンを表示
#search検索検索フォームを表示
#toc目次へ目次に移動
#topトップページトップに移動
#prev前へ現在表示中の投稿ページの前のページを表示
#next次へ現在表示中の投稿ページの次のページを表示
#sidebarサイドバーサイドバー項目をスライドインで表示

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

#menu

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

#home

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

#search

全ての独自ボタンを表示すると、こんな感じになります。

全ての独自ボタンを表示

独自ボタンの動作はこんな感じです。

独自ボタンの動作
多くボタンを表示させすぎると、表示が崩れます。表示させる数は、4~6個くらいを推奨します。

独自ボタンの詳細設定

独自ボタンは「ラベル」も「アイコン」も変更することが可能です。

ラベルやアイコンの変更

独自メニューでも、ラベル名やアイコンを手軽に変更することができます。

メニューのラベルとアイコンをカスタマイズ

例えばメニューを全て英語表記にしたい場合にも手軽に変更できるでしょう。

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

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

メニューを設定し終わったらメニューを保存する

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

自由にメニューをカスタマイズできます

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

テーマ設定
スポンサーリンク
わいひら

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

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

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

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

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

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

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

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

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

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

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

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

Cocoon

コメント

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