せいかつブログ

【Cocoon/カスタマイズ】スマホ表示用のボタンを表示させる

この記事は約6分で読めます。

こんにちは、まちゃりさです。

今回は、Cocoonカスタマイズのうち、スマホ表示用のボタン設定について解説していきます。

スマホ表示用ボタンは、モバイル機器でサイトを見たときに上下に表示されるボタンのことです。

まちゃりさ
まちゃりさ

スマホやタブレットでブログサイトを見るときに便利です

私は、こんな感じ↑に表示させています。

左側が上部に表示しているボタン(ヘッダーモバイルボタン)で、右側が下部に表示しているボタン(フッターモバイルボタン)です。

この記事では、こうしたモバイル用のボタンを設定する手順をご紹介していきます。

まちゃりさ
まちゃりさ

一緒に頑張りましょう!!

スポンサーリンク

事前準備①

ヘッダーモバイルボタンとフッターモバイルボタン、それぞれ作りたいイメージをあらかじめ決めておきます。

最初はよくわからないと思うので、私がつくった通りに真似してみるのもアリだと思います。

【ヘッダーモバイルボタン】(上部)

左から、①「メニュー」、②「ロゴ」、③「検索」

【フッターモバイルボタン】(下部)

左から①「メニュー」、②「ホーム」、③「検索」、④「トップ」、⑤「サイドバー」

まちゃりさ
まちゃりさ

実際にやってみると、何となくわかってくるので

まずはやってみましょう!

事前準備②

ワードプレス管理ページの「外観」→「メニュー」を選択します。

メニューの選択

「表示オプション▼」を押して、「カスタムリンク」に チェックが入っていればOKです。

まちゃりさ
まちゃりさ

これで事前準備はOKです!

メニューの作成

ヘッダーモバイルボタン

最初に「ヘッダーモバイルボタン」用ボタンをカスタマイズしていきます。

ヘッダーモバイルボタンを表示する必要がない方は、読み飛ばしてください。

上部(ヘッダーモバイル)ボタン

①[新しいメニューを作成しましょう]を押します。

新しいメニューを作成

②メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。私はシンプルに「ヘッダーモバイルボタン」で作りました。

③[メニューを保存]を押します。

Cocoonであらかじめ用意されている独自ボタンを利用していきます。

独自ボタンは、こんな感じのものが用意されています。

URLコマンドリンク文字列の例ボタンの役割
#menuメニューグローバルメニューをスライドインで表示
#homeホームフロントページへのリンクボタン
#shareシェアシェアボタンを表示
#search検索検索フォームを表示
#toc目次目次に移動
#topトップページトップに移動
#prev前へ現在表示中の投稿ページの前のページを表示
#next次へ現在表示中の投稿ページの次のページを表示
#commentsコメントコメント欄へ移動
#logoサイト名入力横幅広めのサイトロゴが表示されるボタンを表示
Cocoon独自ボタン(わいひらさんの記事を参考に作成)

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

#は半角でないと上手くいかないので注意!

最初に、カスタムリンクのURLに「#menu」、文字列「メニュー」で「メニューに追加」をクリック。

メニュー部分を作ります

同様に、URL「#logo」、文字列「ロゴ」で「メニューに追加」をクリック。

ヘッダーロゴ部分を作ります

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

ヘッダーロゴ

最後に「#search」、リンク文字列に「検索」と入れて「メニューに追加」を押します。

検索部分を作ります

3つすべて追加すると、こんな感じになります。

リンク文字列は「メニュー」→「MENU」など、お好みのものに変更可能です。

メニュー項目は並び替えることもできます。

最後に「ヘッダーモバイルボタン」に チェックを入れて「メニューを保存」を押せばメニューの完成です。

まちゃりさ
まちゃりさ

ヘッダーモバイルボタンの設定は、OK!

フッターモバイルボタン

続いて、「フッターモバイルボタン」を作成していきます。

こちらですね。

先ほど同様、ワードプレス管理ページの「外観」→「メニュー」を選択します。

メニューの選択

①[新しいメニューを作成しましょう]を押します。

新しいメニューを作成

②メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。こだわらない人は「フッターモバイルボタン」と入れます。

③[メニューを保存]を押します。

続いてカスタムリンクのURLに「#menu」、文字列「メニュー」で「メニューに追加」をクリック。

同様に、以下を入力し「メニューに追加」をクリックしていきます。

URL「#home」、リンク文字列に「ホーム

URL「#search」、文字列「検索」

URL「#toc」、文字列「目次」

URL「#top」、文字列「トップ」

URL「#sidebar」、文字列「サイドバー」

別のURLを表示したい場合は、先ほどご紹介した独自ボタンの表をご参考にして下さい。

全て追加したら、最後に「フッターモバイルボタン」に チェックを入れて「メニューを保存」を押せばメニューの完成です。

まちゃりさ
まちゃりさ

90%完了です!あと少し!!

Cocoon設定

メニューが完成しました。

あとはCocoonの設定を済ませれば、ヘッダーモバイルボタンとフッターモバイルボタンが表示されます。

「Cocoon 設定」の「モバイル」タブをクリック。

モバイルメニューの「ヘッダー・フッターモバイルボタン」を選択します。

ヘッダーモバイルボタンだけを表示する場合は、[ヘッダーモバイルボタン]を選択してください。

フッターモバイルボタンだけを表示する場合は、[フッターモバイルボタン]を選択してください。

設定が完了したら「変更をまとめて保存」を押します。

これでスマホにヘッダー・フッターモバイルボタンが表示されているはずです。

まちゃりさ
まちゃりさ

終了!お疲れさまでした!

さらにカスタマイズしたい

例えば、文字色や背景色、ロゴの大きさを変えたいという場合も出てくると思います。

実は、ヘッダーモバイルボタンは使用しているスキンによって色が変化するようです。

文字色や背景色、ロゴの大きさなどの変更をしたい場合はikuzoさんの記事が役に立ちましたので、参考にしてみてください。

【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ
Cocoonのいいところ。それは「とても便利」なところ。他のテーマは使ったことがないので分かりませんが、Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。たとえば、これです。スマホのメニューが出てきたり、隠れたりするや

参考記事

今回の記事は、Cocoon作成者のわいひらさんとikuzoさんの記事を参考に作成しました。

ヘッダーモバイルボタンの設定方法
スマホ画面でヘッダーに操作ボタンを表示させる設定方法です。
【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ
Cocoonのいいところ。それは「とても便利」なところ。他のテーマは使ったことがないので分かりませんが、Cocoonは今まで「やりたいけどできない」ことは殆どありませんでした。たとえば、これです。スマホのメニューが出てきたり、隠れたりするや

コメント

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