【AFFINGER】ボックスメニューの簡単設置&カスタマイズ方法

ボックスメニュー

ボックスメニューの設置をしたいけど、どうやればいいの?


という悩みを解決します。


「ボックスメニュー」とは

こんな感じに、当ブログでも設置しているメニューのことです。


簡単なアイコンと、テキストでわかりやすいメニューになっているので、設置したいという方もいらっしゃるのではないでしょうか。

設置に関しては結構簡単なので、下記のように設置してみてくださいね!


目次

「ボックスメニュー」の作り方

ボックスメニューの作り方は、下記の手順でやれば簡単にできるので、設置してみてくださいね!

作り方
STEP
投稿ページを開く
STEP
ボックスメニューを挿入
STEP
画像、URL、テキストなどをカスタマイズ
STEP
ウィジェットに張り付ける

投稿は、上記の4ステップでできます。

1つずつ解説しますね♪


①投稿ページを開く

手順:1

【投稿】→【新規追加】

の順でクリックして、投稿ページを開きましょう。


特にタイトルとかは設定する必要はありません。

投稿ページでは、ウィジェットに張り付けるコードを作成するだけになります。


②ボックスメニューを挿入

コードを投稿ページに作成していきます!

手順:2

クラシック版の段落」にて、

【タグ】→【カスタムボタン】→【ボックスメニュー】→【基本4つのどれか】をクリックする

ボックスメニューのタイプは・・・

  • 基本(4列)
  • サブあり(4列)
  • 縦並びタイプ
  • 縦並びタイプ(サブあり)
  • 縦並びタイプ(単品)


ちなみに、上の5つがどう表示されるかというと・・・

▼基本(4列)▼

▼サブあり(4列)▼

▼縦並びタイプ▼

▼縦並びタイプ(サブあり)▼

▼縦並びタイプ(単品)▼


ここでは、「基本(4列)」を選択して、解説を進めていきます!

「基本4列」を選択すると上記のようにコードが出てきますので、このコードに、

  • 画像
  • テキスト
  • URL

などを設定して作成をしていきましょう!


③画像、URL、テキストなどをカスタマイズ

画像など入れる前に、ショートコードを解説しますね。

基本的にこのショートコードは、変更しなくてもいいですが覚えておくといいかと思います。

pc_show :基本4になっていますが、3に変更すると3列になります。
type  :”vertical”にすると縦並びになります。


アイコン画像を入れる

アイコン画像を入れていきます。

「icon_image=”」の後に、画像のURLをメディアからコピーし貼り付け


画像のURL
STEP
一度投稿ページを閉じてメディアを開きます
メディア
STEP
入れたいアイコン画像をクリック
STEP
「ファイルのURL」をコピーして貼り付ける
ファイルのURL
使用するアイコンについて

使用するアイコン画像ですが、私は「ICOOON MONO」というサイトを使用しています。

色を変更したい場合は、colorの「rgb(○○○,○○○,○○○」の部分の数字を変更すれば、簡単に色を変更できます。

rgbはコピーして検索すると・・・

rgb

上記のように出てくるので、HTMLカラーコードなどから選んだ色を「HEX」に入れると、「RGB」も表示されます!

それをコピーして貼り付けてくださいね♪


テキスト・URLを入れる

次にテキストとURLを入れていきましょう。

「text=”」の後に、テキスト(メニュー名)を入力
「subtext=”」の後に、サブ(メニュー名の下)に表示させるサブテキストを入力
「url=”」の後に、メニュークリック後のリンク先URLを入力


④ウィジェットに張り付ける

コードの作成が完了したら、ウィジェットに張り付け表示させましょう。

STEP
【外観】→【ウィジェット」を開く
ウィジェット
STEP
【00 STINGERカスタムHTML ボックスメニュー】を表示させたいところに移動
ボックスメニュー

「タイトル」には、ボックスメニューなどのタイトルを付けてください。


(タイトルをサイト上に表示させない場合は、「内容」の下の「タイトルを出力しない」に✓を付けてください)


入力が完了したら「完了」を押して、プレビューで確認してみてください!


ボックスメニューの色をカスタマイズ

コード上でも色をカスタマイズできますが、カスタマイザーからも色変更ができるので紹介します。

STEP
【外観】→【カスタマイズ】を開く
STEP
【ー各メニュー設定】→【ボックスメニュー】を開きます
ボックスメニュー
STEP
ボックスメニューで「テキスト」「背景」「ボーダー」の色を変更しましょう
試しに色をカスタマイズしてみると・・・
ボックスメニュー


こんな感じに「テキスト」「背景」「ボーダー」の色が変更できます。


まとめ

いかがでしたか?

画像・テキスト・URLを設定するだけで、ボックスメニューは簡単に作成できます。

ぜひ、今回の記事を参考にボックスメニューを作成してみてくださいね!


ボックスメニュー

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次