広告

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

11219_affinger6-customize-box-menu-0a

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

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

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

Question

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

\\この様な疑問を解決するお手伝いをします!//

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

osaboo

こんな方におすすめ!

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

という事で、今回の記事では…

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

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

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

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

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

それでは、早速作っていきましょう。

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

『WordPress管理>投稿>新規追加』の手順で「メニューボックス」を作成する記事編集画面を用意します。

以下の画面が表示されます。

『+』をクリックします。

11219-2-0

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

11219-2-1

編集画面に以下が表示されるので『クラシック』領域をクリックします。

11219-2-3

クラシック段落部分をクリックすると以下の画面が表示されるので、マウスオーバーでサブメニューを引き出します。『タグ>カスタムボタン>ボックスメニュー>基本(4列)』でクリックします。

11219-2-2

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

以下のコードが記事編集画面に表示されます。

必要箇所を以下の補足を参考に編集します。

11219-3-1
ボックスメニューコード ◀︎ デフォルト

デフォルトコードのボックスメニューは以下のようになっています。

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

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

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

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

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

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

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

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

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

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

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

11219-1a

「ボックスメニューコード ◀︎ デフォルト」画像の『青枠部』をコピぺして、ボックスを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を使った「おすすめメニューの作り方をご紹介しています。
是非ご覧ください!

【AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編】詳細はこちら

2203_affinger6-customize-menu-1
AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

AFFINGERをインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、標準のテンプレート機能を使って簡単に設定する手順をご紹介します。かっこいいメニュー表示も!

AFFINGER6 カスタマイズ!メインカラーとデザイン&メニュー編

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

action-affinger6-ex-1

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

価格:14,800円(税込)

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

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

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

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

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

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