【Cocoon】ボックスメニューの画像を使用したカスタマイズ方法

スポンサーリンク
CocoonボックスメニューCocoon

ブログ制作に慣れてくると、ブログの「見た目」も変えたくなりますよね。

特にトップページやサイドバーなどに表示されるボックスメニューは目立つので、オリジナルのものに変えたいと考える方は多いと思います。

ふくち
ふくち

実はWordpressのテーマ「Cocoon」でもCSSなどの知識なしにボックスメニューを好きな画像でカスタマイズすることができます!

本日はWordPressのテーマ「Cocoon」の、ボックスメニューを好きなイラストなどを使用してカスタマイズする方法を画像たっぷりでお教えします♪

この記事でわかること
  • Cocoonメニューの作成方法
  • Cocoonメニューにイラストなどの画像を配置する方法
  • Cocoonボックスメニューのサイドバー、ヘッダー下への設置方法
ふくち
ふくち

初期設定では左側のような星マークになっていますがこれからお伝えする方法でオリジナリティあふれる画像入りのボックスメニューが出来ます♪

ボックスメニューの初期イメージと画像でカスタマイズした後のイメージ
ボックスメニューの初期イメージと画像でカスタマイズした後のイメージ

事前に画像の準備があれば初心者の方でも20分程度で完了します!

好きな画像を使用したボックスメニューでブログのオリジナリティや完成度をアップさせることができますし、サイト内を回遊してくれる可能性もアップします!

\これから利用する画像を探す方へ/

≫オススメ無料イラストサイトを見てみる

≫ココナラでふくちに相談してみる

  • 画像形式:PNG形式
  • 画像サイズ:180px × 180px 以上が望ましい。正方形または横長
    各画像のサイズがそろっているとボックスメニューになった時にきれいに見えます。
運営者ふくちの紹介
スポンサーリンク

Cocoonボックスメニューの作成方法

STEP1 Cocoonボックスメニュー作成方法

まずはボックスメニューに入れたい項目をピックアップして、下記の手順で新規メニューを作成します。

手順は下記の通りです。

新規メニュー作成

①Wordpress左側の編集メニューから、「外観」→「メニュー」の順で選択

ワードプレスの編集メニューから外観→メニューの順に選択

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

③メニュー名に任意の名前を入力し、右下のメニューを作成をクリック

ふくち
ふくち

メニュー名はなんでもOKですが、「ボックスメニュー」としておくと後々わかりやすいです

新規メニュー作成画面
新規メニュー作成画面

これで新しいメニューの枠が完成しました。

メニューに入れる項目の選択

つづいて、ボックスメニューに入れたい項目を選択してゆきます。

項目として選べるのは主に

  • 固定ページ
  • 投稿
  • 投稿カテゴリー

です。

わたしの場合は固定ページ(画像左上のTOP Page)1つと、その他は投稿カテゴリーをを入れています。

わかるちゃん
わかるちゃん

イチオシの投稿がある場合は投稿を入れてもいいよね♪

メニューの項目数は6つが最適!

サイドバではボックスメニューが2列で並ぶので、メニューの項目数を4,6、8などの偶数にするときれいに収まります。ヘッダー下に配置する場合は1列に入るのは6つまでなので、6つに絞るときれいですね。

項目が7つ以上になるとこんな感じで2列目に突入してしまい中途半端になりますので、項目は6個がベストですね。

ヘッダー下にボックスメニュー配置したイメージ

メニュー項目の選択方法

下記の手順でメニューの項目を選択していきます。

①選択したいメニュー項目の右側の▼をクリック(下記画像は投稿カテゴリーを選択した場合)
②さらに選びたい項目の左がわのチェックボックスにチェックを入れる
③「メニューに追加」をクリック
④右下の「メニューを保存」(青いボタン)をクリック

メニュー項目の追加画面
ふくち
ふくち

メニューの位置は選ばなくてOKだよ!

選択したメニューは、選択した順番でボックスメニューに反映されます。

ヘッダー下の横並びのメニューであれば最初に選択したものが左端、最後に選択したものが右端

サイドバーの場合は左上からジグザグに右下へという順番になります。

メニュー項目を選択した後でも、ドラッグ&ドロップで項目の並べ替えができますよ。

サイドバーのボックスメニューの配置図

メニュー項目の削除方法

もし誤って項目を選択してしまった場合は下記の方法で削除できます。

①選択ずみの項目の中から削除したい項目右上の「▼」をクリック
②詳細項目が開いたら左下の「削除」をクリック

メニュー項目削除画面

作成したメニューに任意の画像を配置する

STEP2 画像の配置方法

先ほど作成したメニューの各項目に任意の画像を設定してゆきます。

手順は下記の通りです。

ボックスメニューに利用したい画像をまとめて保存する

ボックスメニューのアイコンとして使いたい画像を作成またはフリー画像サイトなどでダウンロードし保存しておきます。

ふくち
ふくち

画像を今から探す方は、下記を参考にしてみてくださいね!

  • 画像形式:PNG形式
  • 画像サイズ:180px × 180px 以上が望ましい。正方形または横長
    各画像のサイズがそろっているとボックスメニューになった時にきれいに見えます。

保存場所はどこでもOKですが、全画像を同じフォルダなどにまとめておくと次の手順が楽になります。

画像を保存する際のファイル名は必ず英字表記にしましょう!
(例: ×猫.png 〇cat.png)

ふくち
ふくち

ファイル名に日本語が入っていると上手く表示されないことがあります

利用したい画像をメディアに登録する

ボックスメニューに使用するための画像をワードプレスに登録していきます。

①Wordpressの左側編集メニュー

「メディア」→「新規追加」の順にクリック

メディアの新規追加方法

②点線の枠内にボックスメニューに保存した画像をまとめてドラッグ&ドロップします

まとめてやると後の手間が省けますが、難しい場合は1つ1つでもドラッグ&ドロップしてもOKです。
(「ファイルを選択から1つ1つファイルを選ぶやり方でもOK)

ファイルをアップロードする画面

③下記のような画像の一覧表示になったら、1つずつ次の作業をします。

URLをクリップボードにコピーする方法
  1. 右側の「URLをクリップボードにコピー」
  2. コピーしたURLをメモ帳などに貼り付けておく
    ワードプレスを2つのウィンドウで操作ができる場合は、直接ワードプレス画面上に貼り付けられるので不要
ふくち
ふくち

ワードプレスを2つのウィンドウで操作できる場合は次の行程でメニューに直接URLを貼り付けられるので、メモ帳には貼り付け不要です。

つまづきポイント

もし上記のような画面にならない場合は、登録済の画像をクリックするとファイルの詳細画面の右下からURLコピーが出来るのでこちらでコピーしてください。

添付ファイル詳細画面からURLコピーする方法

メニューのタイトル属性に画像URLを貼り付ける

①Wordpress左側の編集メニューから、「外観」→「メニュー」の順で選択

ワードプレスの編集メニューから外観→メニューの順に選択

②右上の表示オプションをクリック

表示オプション表示画面

③タイトルとCSSクラスにチェックを入れます

表示オプション設定画面

④編集するメニューを選択から作成済のメニューを選択し、「選択をクリック」

ふくち
ふくち

さっき作ったメニューの名前を選択するよ

メニューの選択画面

⑤各メニュー項目の右側の▼をクリックして、

  1. ナビケーションラベル入力(そのままボックスメニューの文字部分になります)
  2. タイトル属性に先ほどコピーした画像URL貼り付け
    1,2をメニュー項目分繰り返す
  3. 「メニューを保存」をクリック
メニュー項目の詳細設定画面

Cocoonボックスメニューの設置方法

STEP3 ボックスメニューの設置方法

作成済のメニューをボックス形式で表示してみましょう!

ウィジェットから超カンタンに設定が可能です♪

WordPressのサイドメニューから「ウィジェット」をクリックしましょう。

ボックスメニューをサイドバーに設定する

①利用できるウィジェットの中にある、「ボックスメニュー」右の▼をクリック

ウィジェット画面でボックスメニュー選択

②下のスクロールからサイドバーを選んでクリックしてから下方にある「ウィジェットに追加」をクリックします

すると画面右の方にある「サイドバー」の項目内に「ボックスメニュー」が追加されます。

③ボックスメニューの枠右側の▼をクリックします

サイドバーウィジェットに追加する画面

④メニュー名のプルダウンから作成済みのメニューを選択して保存をクリックします

ボックスメニューで利用するメニューの選択画面
ふくち
ふくち

タイトルの欄は入れても、空欄のままでもどちらでもOK。

入力すると、ボックスメニューの上に入れた文章が表示されるよ!

プレビューを見てこんな感じに表示されればOKです。

サイドバーにボックスメニューが表示されたイメージ

ヘッダー下に設定する

サイドバーへの設置と同様の流れになります。

「サイドバー」の部分を「ヘッダー上部」へ置きかえて作業してみてくださいね。

こんな感じで表示されればOKです。

ヘッダー下にボックスメニューを配置したイメージ

これでボックスメニューの作成と設置完了です!

Cocoonボックスメニューの作成・設置手順
  • Cocoonでボックスメニュー用のメニューを作成
  • メディアに画像を取り込む
  • メニューの各項目内のタイトル属性に画像のURLを貼り付け
  • ボックスメニューを設置したい場所のウィジェットにボックスを設置し、作成済のメニューを選択
ふくち
ふくち

お気に入りのメニューは出来ましたか?

フリー素材などもたくさんありますが、自分だけのオリジナル画像が欲しい方はココナラが便利です↓↓

≫ココナラでイラストを探す

オススメの無料イラスト素材についてはこちら↓

運営者ふくちの紹介
記事がよかったらクリックで応援お願いします

コメント

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