お知らせ!AFFINGER6・EX・タグマネージャー4 を当サイトよりご購入いただいた方! \限定オリジナル特典/ 『 当サイトの初期設定をすべて公開!! 他 』をお付け致します!

AFFINGER6 カスタマイズ ▶︎ ボックスメニューの作り方!

AFFINGER6 カスタマイズ ▶︎ ボックスメニューの作り方!

とっても便利な「ボックスメニュー」を作ろう!

サイト内の便利な道標になるので是非活用して欲しい機能です。^^

こんにちは "osaboo"です。"@osaboo_Bot"

Question

「トップページ・固定ページ・サイドバー」等にボックス型のパネルみたいなメニューがあるサイトをよく見かけるけど…どうやって作るの?
なんか難しそうだなぁ…

\\ このような「疑問を解決する」お手伝いをします!//

全然かんたん!すぐできるよ。^^"

osaboo

こんな方におすすめ

  • サイト内に小洒落たボックスメニューを作りたい。
  • オリジナリティーのあるボックスメニューを作りたい。
  • 観覧をわかりやすくするボックスメニューを作りたい。

今回の記事では…

手軽で便利なガイドメニュー ▶︎ ボックスタイプメニューの作り方をご紹介します。
まずは、以下の完成イメージを確認確認してください。

ボックスメニュー
ボックスメニューサンプル

◀︎ 完成イメージは左のような画像です。
(※ 当サイトサイドバー用)

サンプルのボックス配置は、2列3行で作られています。

(※ 配置や色の変更は、自由にできるので色々なデザインが作れます。)

それでは、ご覧ください。

ボックスメニューの基本ベースを作る

この章では、ボックスメニューのデフォルトコードを編集画面の貼り付けるまでを説明します。

『WordPress管理>投稿>新規追加』をクリックして新規の投稿記事を用意します。
準備した投稿記事に「ボックスメニュー」を作成していきます。

新規投稿記事は以下のように表示されます。

『+』をクリックしてブロックメニューを開きます。

記事編集画面

ブロックメニューのブロックタブが表示されます。

『クラシック』をクリックします。

記事編集画面-ブロックタブ-クラシック

編集画面の作業領域に 以下のブロックが挿入されます。

『クラシック』の領域をクリックします。

クラシック

クラシックブロックの領域をクリックするとクラシック編集画面が開かれます。

マウスオーバーでサブメニューを引き出します。『タグ>カスタムボタン>ボックスメニュー>基本(4列)』でクリックします。

記事編集画面-ブロックタブ-クラシック-2

※ サブテキストはコードにて追加できます。(後からテキストを2段にする場合)

クラシック編集画面に以下のデフォルトコードが表示されます。

必要箇所を以下の補足を参考に編集します。◀︎ 編集方法の詳細は次の章で順次説明していきます。

記事編集画面-ブロックタブ-クラシック-3
ボックスメニューコード ◀︎ デフォルト

デフォルトコードのボックスメニューは以下のように表示されます。

ボックスメニューデフォルト
デフォルトコードのボックスメニュー

プレビューで確認するとボックスメニューの表示状態が見れるよ。

osaboo

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

配列・テキスト・アイコンを変更する

デフォルトの「4列1行」の配置を「2列2行」にして、「テキスト」と「アイコン」を変更する手順は以下のようになります。

補足-サンプルの変更ポイント

「ボックスメニューコード ◀︎ デフォルト」画像の青枠部が ボックスメニュー1個(ボックス)の領域設定範囲です。

上記の画像は 4個のボックス領域が生成されることを表します。

  1. 赤枠部 ▶︎ pc_show="4" の数字は 列数を示します。(サンプルのボックスメニューは 2列なので ”” に変更します。)
  2. 赤枠部 ▶︎ webicon="〇〇" ➡︎〇〇にアイコン名を入れると変更されます。
  3. 赤枠部 ▶︎ text="〇〇" ➡︎〇〇に太文字で表示されるメニュー名を入れると変更されます。

※1:代表的な部分のみ補足追記
※2:青枠部(1個のボタン)領域をコピー等で増やすことてボタン数の追加削減が可能

必要箇所を変更すると以下のようになります。
※ 6個のボックスがあるので各々 表示される文字とアイコンを割り付けます。

ボックスメニューサンプル

「ボックスメニューコード ◀︎ デフォルト」画像の『青枠部』をコピぺして、ボックスを2個下側に追加します。ボックスを6個にしたら個々に編集していきましょう。

※ ボックスの数は、サンプルと同じにするためなので6個に増やさなくてOKです。

pc_show ▶︎ 列数のデフォルト値を変更する

pc_show="4" ▶︎ PC(960px以上)閲覧時の列数 を指示します。
サンプルは2列なので『4→2』に変更します。

pc_show="2"

これで全体のボックス配置が2列になりました。
ボックスの数を自動で割り振るので今回のように6個のボックスを作る場合は3行になります。

webicon ▶︎ webアイコンのデフォルト名を変更する

webicon="st-svg-wordpress" ▶︎ WordPressロゴのアイコンが表示されます。
※ webアイコンを選択して変更します。

サンプルの「webicon」に使用したコードは以下の6個です。参考にしてください。

『ボックス名』▶︎ Webアイコンコード「アイコン名(仮)」は以下のようになります。

  1. 『ブログを始める』▶︎ webicon="ri-pen-nib-line" 「万年筆アイコン」
  2. 『WordPress』▶︎ webicon="st-svg-wordpress" 「WordPressアイコン」デフォルト
  3. 『AFFINGER』▶︎ webicon="ri-settings-5-line" 「歯車アイコン」
  4. 『アフィリエイト』▶︎ webicon="ri-exchange-cny-line" 「円ループアイコン」
  5. 『music&video』▶︎ webicon="ri-customer-service-2-line" 「ヘッドセットアイコン」
  6. 『Book』▶︎ webicon="ri-book-3-line" 「Bookアイコン」

※ アイコンのコード詳細に関しては 割愛します。
アイコンの使い方やカスタマイズを詳しく知りたい方はこちらをご覧ください。

icon_size ▶︎ アイコンのサイズを変更する

icon_size="" ▶︎ デフォルトサイズ(未記入)で 300% の大きさで表示されます。

サンプルでは、少し小さくします。全て ”240” に変更します。

icon_size="240"

これでアイコンのサイズが少し小さくなりました。

text ▶︎ メニューの名前を変更する

text="メニューA" ▶︎ ダミーのテキスト「メニューA〜D」が表示されるようになっています。

ボックスの数を2個コピペで追加しているので「メニュー?」の同じ名前が2個ある筈です。

『ボックス名』 ▶︎ text 変更したメニュー名は以下のようになります。

  1. 『ブログを始める』▶︎ text="ブログを始める"
  2. 『WordPress』▶︎ text="WordPress"
  3. 『AFFINGER』▶︎ text="AFFINGER"
  4. 『アフィリエイト』▶︎ text="アフィリエイト"
  5. 『music&video』▶︎ text="music&video"
  6. 『Book』▶︎ text="Book"

これで各ボックスに表示されるテキスト(メニュー名)が出来ました。

fontsize ▶︎ 文字のサイズを変更する

fontsize="90" ▶︎ デフォルトサイズ(90)で 90% の大きさで表示されるようになっています。

サンプルでは、同じ大きさにしています。全て ”90” デフォルトのままとします。 ◀︎ 必要に応じて変更してください。

fontsize="90"

サイズの変更はしないのでそのままです。

記事内に貼るとこんな感じ ^^"

osaboo

「ちなみに」実際に作った『ボックスメニュー』を以下に貼り付けてみました。

変更可能な箇所はたくさんあるので、次の章で表にまとめてみました。
\ 参考にしてみてください。/

コード名・内容・参考(例)▶︎ まとめ

ボックスメニューを作成する際に必要なコード名・内容・参考(例)を表にまとめたので確認しながら色々試してください。

補足詳細

コード名内 容参 考
myclass=""任意のCSSクラス-
pc_show=""PC(960px以上)閲覧時の列数
▶︎ 1列にしたい場合はtype属性を使用、2列の場合は未記入
pc_show="4"
入力 ▶︎ "4" "3" "2"=未記入
margin=""表示位置
▶︎ マージン(周りの余白)を設定
margin="0 0 20px 0"
type=""表示タイプ
▶︎ 「vertical」縦並び1列表示
type="vertical"(1列にする場合)pc_showより優先される
icon_image=""アイコン画像のURL
▶︎ 画像はテキストで貼付
-
webicon=""アイコンst-svg-wordpress
icon_size=""アイコンサイズ
▶︎ デフォルト:300%
300
text=""テキスト(太文字)上段メニューA
subtext=""サブテキスト(細文字)下段-
url=""リンク先のURL -
target=""リンク先を新しいタブで開く設定blank=新しいタブで開く場合
rel=""nofollow / follow 属性follow=未記入
bgcolor=""背景色をHTMLカラーコード参考カラーコード
color=""文字色をHTMLカラーコード参考カラーコード
fontsize=""文字サイズ
▶︎ デフォルト:90%
90
fontweight=""文字の太さbold

以上で「ボックスメニューの作り方」は終了です。お疲れ様でした。

AFFINGER6を使った「おすすめメニューの作り方をご紹介しています。
是非ご覧ください!

「稼ぐ」に特化したWordPressテーマ

action-affinger6-ex-1

ACTION / AFFINGER6

コスパ最強のWordPressテーマ

価格:14,800円(税込)

今なら漏れなく特典付き!!

AFFINGER6 ▶︎ 購入はこちら

「結果」を出すためのテーマ・プラグインが揃った戦略的セット

まとめ!AFFINGER6 カスタマイズ ▶︎ ボックスメニューの作り方!

読者が観覧しやすくなるパネル型のガイドメニュー『ボックスメニュー』の簡単な作り方をご紹介しました。観覧しやすくお洒落な表示にしてサイトをカッコ良くしてくださいね。サイト作りの参考になれば嬉しいです。当サイトで作ったサイドバーのボックスメニューをまるまるベースに記事に採用しました。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう \^^/