せいかつブログ

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

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

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

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

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

まちゃりさ
まちゃりさ

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

 

当サイトでは、下の画像のように表示させています。

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

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

まちゃりさ
まちゃりさ

最後まで、一緒に頑張りましょう!!

それでは、どうぞ!

スポンサーリンク

事前準備①:イメージを決める

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

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

 

参考【ヘッダーモバイルボタン】(上部)の設定

左から、①「メニュー」、②「ロゴ」、③「検索」を設定しています。

参考【フッターモバイルボタン】(下部)の設定

左から①「メニュー」、②「ホーム」、③「検索」、④「トップ」、⑤「サイドバー」を設定しています。

まちゃりさ
まちゃりさ

実際にやってみると、何となくわかってきます。まずはやってみましょう!

↑目次に戻る

事前準備②:カスタムリンクの設定

続いて、事前準備の2つ目です。

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

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

上部の「表示オプション▼」を押し、「カスタムリンク」に チェックを入れます。

まちゃりさ
まちゃりさ

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

↑目次に戻る

メニューの作成と設定

それでは、「ヘッダーモバイルボタン」、「フッターモバイルボタン」を作っていきます。

 

「ヘッダーモバイルボタン」のメニュー作成と設定

最初に「ヘッダーモバイルボタン」を作成していきます。

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

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

 

ヘッダーモバイルボタンの作成手順は、次のとおりです。

  1. メニューの作成
  2. メニュー項目の追加
  3. メニュー設定

 

【STEP1.メニューの作成】

まず、メニューの作成をします。

メニューの作成手順
  • 手順1
    [新しいメニューを作成しましょう]を押します。
    新しいメニューを作成
  • 手順2
    メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。

    私はシンプルに「ヘッダーモバイルボタン」で作りました。

  • 手順3
    [メニューを保存]を押します。

 

【STEP2.メニュー項目の追加】

続いて、作成したメニューに項目を追加していきます。

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

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

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

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

メニュー項目を追加】手順
  • 手順1
    メニュー項目(メニューを追加

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

    メニュー部分を作ります
  • 手順2
    メニュー項目(ロゴを追加

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

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

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

    ヘッダーロゴの設定

  • 手順3
    メニュー項目(検索を追加

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

    検索部分を作ります

3つの項目をすべて追加すると、このようになります。

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

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

【STEP3.メニュー設定】

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

まちゃりさ
まちゃりさ

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

↑目次に戻る

「フッターモバイルボタン」のメニュー作成と設定

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

こちらですね。

フッターモバイルボタン
フッターモバイルボタン

 

手順は、「ヘッダーモバイルボタン」と同様です。

  1. メニューの作成
  2. メニュー項目の追加
  3. メニュー設定

 

【STEP1.メニューの作成】

メニューの作成手順
  • 手順1
    ワードプレス管理ページの「外観」→「メニュー」を選択します
    メニューの選択
  • 手順2
    [新しいメニューを作成しましょう]を押します
    新しいメニューを作成
  • 手順3
    メニュー名にそれらしい名前を付けて[メニューを作成]を選択します。

    こだわらない人は「フッターモバイルボタン」と入れます

  • 手順4
    [メニューを保存]を押します

 

【STEP2.メニュー項目の追加】

続いて、作成したメニューに項目を追加していきます。

メニュー項目を追加手順
  • 手順1
    メニュー項目(メニュー)を追加

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

  • 手順2
    メニュー項目(ホーム)を追加

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

  • 手順3
    メニュー項目(検索)を追加

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

  • 手順4
    メニュー項目(目次)を追加

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

  • 手順5
    メニュー項目(トップ)を追加

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

  • 手順6
    メニュー項目(サイドバー)を追加

    カスタムリンクのURLに「#sidebar」 、文字列「サイドバー」で「メニューに追加」をクリック。

メニュー項目に、別のURLを表示したい場合は?

➡「ヘッダーモバイルボタン」の手順でご紹介した独自ボタンの表をご参考に設定してください。

 

【STEP3.メニュー設定】

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

まちゃりさ
まちゃりさ

これで、90%完了です!あと少し!!

↑目次に戻る

Cocoon設定

「ヘッダーモバイルボタン」、「フッターモバイルボタン」のメニューが完成しました。

あとは「Cocoon設定」を行えば、モバイルボタンを表示できます。

 

手順

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

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

「どちらかのボタンだけ」を表示させたいときは?

▶ヘッダーモバイルボタンだけを表示したい場合、[ヘッダーモバイルボタン]を選択します。

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

 

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

これで、モバイル用のボタンが表示されているはずです。

まちゃりさ
まちゃりさ

設定手順は以上です!お疲れさまでした!

↑目次に戻る

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

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

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

Cocoonのスキン、どんなものがある?

>>参考【Cocoon】スキンどれ選ぶ?特徴と評判をまとめてみた!

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

▼さらにカスタマイズする場合、参考にしてみてください。

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

↑目次に戻る

参考記事

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

コメント

SNS

最近の投稿

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