[AFFINGER5の使い方]ボックスメニューの設定方法を詳しく解説!

ここあです。

 

昨年12月にAFFINGER5のアップデートβ版がリリースされました。

その名も「WING ver20191218β」です。

 

通常、ほとんどのテーマアップデートいうのは

バグを解消するためのマイナーアップデートも多いのですが

AFFINGER5に関して、私が凄いと思うところは

 

毎回面白い機能がここぞと言わんばかりに

アップデートで実装されるところです。

 

例えば、今回のアップデート内容は

  • アイコンロゴ設定機能
  • ボックスメニュー作成機能
  • 会話吹き出しのアイコンを大きく設定が可能に
  • アイキャッチ画像を一括でポラロイド風に可能
  • ブログカードの高さ調整が可能に

などなど

 

全て挙げるとキリがないぐらいありますが

今回もその全てが利用ユーザーの使い勝手やデザイン性を考慮した

非常に素晴らしいアップデートとなっています。

 

そもそもデザインというのは

ブログを運営する側にとっても大事ですが

ネットユーザーにとってはさらに重要な要素の1つ。

 

なぜなら、ユーザビリティが悪く

デザイン性が悪いブログは情報を探すのが難しく

離脱率も高くなってしまうからです。

 

なので、もしもあなたがブログデザインをする際には

あなたの自己満足なデザインをするのではなく

ネットユーザーに分かりやすい

 

「伝わるデザインをする」というのを

しっかりと覚えておいてくださいね。

 

そういう意味では、今回新たに追加された機能

ボックスメニュー作成機能」は

ただデザインが優れているだけではなく

 

ネットユーザーのユーザビリティも上がる

非常に優れた機能が実装されていているんですね。

 

とは言え、AFFINGER5のカスタマイズは

設定に慣れるまで少し大変というのもあり、

 

私の場合は「THE THOR」をメインに使用しているため

少々設定に難航してしまいました^^;

 

ということで、今回はAFFINGER5に実装された

「ボックスメニュー作成機能」の設定方法について

解説していきたいと思います。

 

ある意味、私にとっても備忘録となりますので

じっくりと丁寧に解説していきますね。

サイドバーにボックスメニューを表示させる方法を追記しました。

 

AFFINGER5のボックスメニューを作る前に

AFFINGER5のボックスメニューを設定する場合は

 

まず最初に

  • アイコンフォントである「Font Awesome」を使うか
  • アイコンイラストを使用するか

 

それらをあらかじめ決めて

あなたが設定したいメニューに合うイラストを決めましょう。

 

AFFINGER5は、Font Awesome4.7.0のアイコンフォントが使えますので

アイコンフォントを使う場合は、あなたのメニューに合わせて

以下のサイトからそれぞれアイコンを決めるようにしてください。

Font Awesome4.7.0

 

なお、Font Awesome使用する場合に必要なのは

以下の部分に表示されるアイコンフォントを読み込むための

アイコン名が必要になります。

 

boxmenu01

 

また、アイコンイラストを使用する場合は

あなたが普段使用しているお好みの著作権フリー素材サイトから

いくつかデータをダウンロードして準備しましょう。

 

種類が多く使いやすいのは以下の

ICOOON MONOというサイトです。

 

素材は単色になりますが、

オンライン上で自分の好きな色に変更してから

ダウンロードもできますし

ICOOON MONO

 

ベクターデータを編集できる環境がある場合は

SVGデータをダウンロードして個別に着色することも可能です。

 

AFFINGER5のマニュアルサイトにアイコンイラストは「FLAT ICON」がおすすめとありますが、こちらのサイトは基本的に無料で使う場合、クレジット表記が必要となりますので、ご注意ください。有料のライセンスを購入されている方のみ、クレジット表記が不要になります。

 

ということで、前置きが少し長くなってしまいましたが

いずれにしても「ボックスメニュー」を使う場合は

アイコンイラストが必須となりますので

 

あらかじめどんなメニューにするのかを決めた上で

素材の選定も併せてするようにしてくださいね。

 

AFFINGER5のボックスメニューの設定方法

それではボックスメニューの内容が決まり

アイコン素材も準備できたと想定し

 

AFFINGER5のボックスメニューを作る方法を

順番に解説していきます。

 

1)クイックタグで基本のショートコードを作成

AFFINGER5のβ版アップデート「WING ver20191218β」をインストールすると

クイックタグでボックスメニューのショートコードを表示することが

可能になります。

 

ということで、まずは基本的なボックスメニューの表示方法です。

 

ボックスメニューのショートコードを表示する場合は

タグ → カスタムボタン → ボックスメニューをクリックし

 

ボックスメニューの基本コードを表示させます。

ボックスメニューショートコード設定

 

基本(4列)」を選択した場合は、以下のメニュー表示

ボックスメニュー横並び

 

サブあり(4列)」を選択した場合は、以下のメニュー表示

ボックスメニュー横並びサブあり

違いはサブテキストがあるか無いかだけになります。

 

なお、縦並びと横並びの変更はすぐにできますので

とりあえず、ボックスメニューを作る場合は

サブテキストが必要か、不要かでショートコードを選んでください。

 

また、デフォルトですでにアイコンフォントである

Font Awesomeのアイコン名が入力されておりますので

アイコンフォントを使う場合は

 

ショートコードにあらかじめ入力されている

「fa-wordpress」の部分を書き換えるだけで

アイコンフォントが表示できます。

 

2)ショートコードでボックスメニューの数を調整

ボックスメニューのショートコードを表示させたら

あらかじめあなたが決めたボックスメニューの数に合うよう

ショートコードを調整しましょう。

 

調整方法は以下の通りです。

 

ボックスメニューを3列にしたい場合

ボックスメニューの基本設定は4列です。

 

ですが、当然、サイトの運営は人それぞれ異なりますので

メニューを3列にしたいとか、4列以上に増やしたいという場合も

当然でてきてしまいます。

 

ということで、メニューを3列にしたい場合は

以下、2つの設定をしてください。

 

①メニューDを丸々消す

メニューDを削除

 

②pc_showの数字を3に打ち替える

pc_showの数字を3に打ち替える

 

これら2つの設定さえしてしまえばこのように

3列のボックスメニューを簡単に表示させることも可能です。

ボックスメニュー3列

 

ボックスメニューを2列にしたい場合

ボックスメニューを2つにしたい時も同じです。

 

ボックスメニューを2つだけ表示させたい場合は

さらにメニューCを消してください。

 

メニューC削除

 

続いて、pc_showの数字を2に打ち替えるか、もしくは空欄にすると

pc_showの数字を2に打ち替える

 

このように2列のメニュー表示にすることができます。

メニュー表示2列

 

ボックスメニューを6個設置したい場合

ボックスメニューを6個設置したい場合は

先に説明した3列表記を応用すれば簡単にできます。

 

ボックスメニューを6個にする場合は、先に

メニュー項目に必要なショートコード

「メニューEとF」を新たに追加します。

 

なお、メニューEとFを追加する場合は

先に表示しているA〜Dのメニューどれでもいいので

どれか1つを丸々2つコピペしてEとFに打ち替えます。

 

以下のように2つ増やします。

ボックスメニュー6個

 

さらにpc_showの設定を3に設定しておけば、このように

3×2列、計6このボックスメニューを表示させることが可能です。

ボックスメニュー6個

 

3)ボックスメニューを縦に変更する場合

ボックスメニューを縦位置に変更する場合はすごく簡単です。

 

ボックスメニューのショートコード内に

[st-box-btn myclass=”” pc_show=”3″ margin=”0 0 20px 0″ type=””]

と書かれた最初の行の一番最後

 

type=””の部分に”vertical”を足して、typeの表記を空欄にするのではなく

type=”vertical”とすることでボックスメニューが縦並びに変わります。

ボックスメニュー縦並び

 

なので、まず初めに基本設定で横並びでボックスメニューを作成し

後から縦並びに変更したい場合は、typeの部分に”vertical”を追加する

とだけ覚えておいてくださいね。

 

たったこれだけの追記で、メニューの縦と横位置の変更ができる辺り

AFFINGER5はさすがです。

 

ボックスメニューのアイコンを変更する方法

それでは続いて、アイコンの変更方法について

解説させていただきます。

 

Font Awesomeを使う場合

先にもお伝えさせていただきましたが

AFFINGER5のボックスメニューは

 

Font Awesomeを使ったアイコンフォントが

デフォルトで表示されるようになっています。

 

なので、Font Awesomeを使った

アイコンに変更したいという場合はまず

Font Awesomeのサイトに飛び、アイコンを選びます。

 

 

例えば、今回はカメラのアイコンを選んだとします。

 

アイコンを選んだら、アイコンをクリック。

そうするとアイコンコードの詳細が表示されます。

FontAwesome

 

アイコンの詳細が表示されたら、以下、アイコン名をコピーして

FontAwesome

 

そのまま、AFFIGER5のボックスメニューの中にある

fontawesomeの部分にある、fa-wordpressから、

あなたが任意で選んだアイコン名に打ち替えてください。

ボックスメニュー打ち替え

 

そうすると、Font Awesomeのアイコンが

ワードプレスのマークから、あなたが選んだアイコンに

変更することができますので、

 

ボックスメニュー

必要な数だけアイコン名を入力してアイコンを

変更してくださいね。

 

アイコンイラストを使う場合

アイコンイラストを使用する場合は

任意のアイコンイラストをダウンロードし

 

あなたのライブラリに登録することで

使用することが可能になります。

 

アイコンイラストをあなたのメディアにアップロードし

ボックスメニューに反映させる場合は

メディアライブラリにアップした画像のURLをコピーし

 

メディアライブラリ

 

そのコピーしたURLをボックスメニューのショートコード

icon_image=””の部分に貼り付けます。

ボックスメニューショートコード

画像のURLをコピペする場合は、テキスト編集モードで貼り付けるようにしてください。ビジュアル編集モードでコピペすると、アイコン画像が正常に表示されないことがあります。

 

さらに、一度、ボックスメニューを表示させて

アイコンサイズのバランスが悪い時は

 

ショートコード内にあるicon_size=””の部分に任意の数字を入力し

アイコンサイズを調整してみてください。

アイコンサイズは個別に設定できますので。

 

ボックスメニュー

 

ボックスメニューの色を一括で変更する方法

AFFINGER5のボックスメニューは

背景色や、文字の色、アイコンの色(FontAwesome使用時)まで

一括で設定することも可能です。

 

ボックスメニューの色を変更する場合は

ダッシュボードメニューから外観 → カスタマイズをクリック。

さらに、メニューのカラー設定をクリックすると

 

一番下にボックスメニューという項目があります。

 

なので、ボックスメニューの色を一括で変更したい場合は

カスタマイザーの設定を使って一気に変更できますので

非常に便利です。

 

なお、変更が可能なのは以下の通り

  • テキストカラー(※サブテキストは設定がありません)
  • 背景色
  • ボーダーカラー
  • アイコンサイズ(FontAwesome使用時)

ボックスメニュー色変更

 

FontAwesoneのアイコンサイズもここの設定で

まとめて調整が可能です。

デフォルトでは300%に設定されています。なお、アイコン画像を使用している場合は、ここの%の数字を変更しても、アイコンのサイズは変わりませんのでご注意ください。

 

ちなみにアイコンフォントである

FontAwesoneを使用している際に、ここの設定で

テキストカラーを一括変換すると

 

アイコンの色も変わってしまいますので

気をつけてください。

ボックスメニュー

上記のように、アイコンとテキストの色設定が連動しています。

 

なので、カスタマイザーの一括変更はうまく使ってくださいね。

 

ボックスメニューのショートコードがある程度固まったら

あなたがボックスメニューを設定したい場所に

ショートコードを入力し、ボックスメニューを表示させれば完成です。

 

ボックスメニューの配置に関しては、

ネットユーザーが目に付きやすく、ユーザビリティが上がる場所に

設定すると非常に効果的ですので、ぜひ活用してみてください。

 

ボックスメニューのサブテキストの色を変更する方法

AFFINGER5なので、放っておいてもアップデートされると思いますが(笑)

 

サブテキストの色を変更したいという場合は

以下のCSSコードを追加してください。

.st-box-btn-memo {
color: #757575;
}

 

デフォルトでサブテキストの色は「#757575」のグレーですが

上記CSSコードを追加し、カラーコード#757575を変えることで

サブテキストをあなたのお好みの色に変更できます。

 

おそらく通常は問題ありませんが

ボックスメニューの色を一括で変更する際に

どうしてもグレーでは都合が悪いという場合も出てくると思います。

 

なので、早ければ正式版のアップデートで

サブテキストの設定なども追加されるかもしれませんが

現状では設定箇所がありませんので

 

サブテキストの色も変更したいというあなたは

私が紹介したCSSコードを追加の上、変更してみてくださいね。

 

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

AFFINGER5のボックスメニューは基本的に

投稿ページのタグ → カスタムボタン → ボックスメニューから作ることができるのですが

このボックスメニューというのは、簡単にサイドバーにも設置することが可能です。

 

その方法というのは、一旦投稿記事の作成でボックスメニューを作成

その作成したコードを丸々コピーします。

ボックスメニューの作成

 

次に外観 → カスタマイズ → ウィジェット →サイドバーウィジェットの順にクリックし

ウィジェットを追加をクリック。

サイドバーウィジェットを追加

 

さらに、00_STINGERカスタムHTMLをクリック。

00_STINGERカスタムHTMLをクリック

 

そうすると、このようにHTMLコードを入力する画面が表示されますので

先ほど、投稿画面でコピーしたボックスメニューのHTMLコードを

このウィジェットにペースト(貼り付け)します。

ボックスメニューのHTMLコードをコピペ

 

ボックスメニューのHTMLコードをサイドバーウィジェットに

コピペした瞬間、このようにボックスメニューが

サイドバーにきちんと表示されますので

サイドバーにボックスメニューを設置

 

あらかじめ投稿記事の作成画面でボックスメニューをしっかりと作り込んだ場合は

ウィジェットの順番を並び替えて「公開」ボタンをクリック。

 

先にサイドバーウィジェットにボックスメニューを

仮設置した場合は、メニューのリンク先やアイコンを

サイドバーウィジェット上で編集するようにしてください。

 

個人的に作業がやりやすいのは、投稿記事作成画面で

あらかじめボックスメニューの内容をきちんと設定してから

サイドバーウィジェットにコピペする方法です。

 

ということで、サイドバーに

ボックスメニューを表示させたいというあなたは

ぜひ試してみてくださいね。

 

それ以外の部分も、ウィジェットの表示ができる部分であれば

同様にウィジェット項目を追加し

 

HTMLコードさえコピペすれば、ボックスメニューは

いろいろな場所に表示させることが可能です。

 

意外と、サイドバーにボックスメニューを

どう表示させたら良いか分からないという意見も多かったので、

 

私の記事にも簡単ではありますが

サイドバーに表示させる方法を追記させていただきました。

参考になると嬉しいです^^

 

AFFINGER5のボックスメニューを設定する方法まとめ

AFFINGER5のボックスメニューを設定する方法まとめ

 

今回は、AFFINGER5に新たに実装された機能

ボックスメニューの設定方法について解説させていただきましたが

いかがでしたか?

 

私は今、THE THORというテーマをメインに使用しておりますが

テーマそれぞれで違う機能があるのは

すごく面白いなと感じています。

 

AFFINGER5は利用ユーザーを考慮した便利な機能が

定期的にアップされるのは非常に羨ましく感じますし

 

そういう意味ではTHE THORも

もう少し頻繁にアップデートがあると嬉しいと

正直、個人的には考えてしまいます。

 

とは言え、AFFIGER5は使い慣れないと

どこをどう設定すれば良いか分からないという点では

私は毎回設定に苦しみ、時間がかかっているので

 

個人的にはTHE THORの方がやはり合ってる?

と思ったりもしています(笑)

やはりどのテーマも一長一短ありますよね^^;

 

ただ、いろんなテーマを使っていくことで

テーマの違いがよく分かったり、

質問者に合わせたテーマの紹介などもしやすくなりますので

 

いろんなテーマを使うのはすごく楽しいですし

AFFINGER5も私はこれからどんどん使いこなしたいと考えています。

 

なので、AFFINGER5に関しては、設定が充実している分

CSSであえてカスタマイズする必要がほとんどありませんので

 

今後は、AFFINGER5の機能を研究しながら

できるだけ分かりやすい設定方法などの記事も

増やしていきたいと思っています。

 

だから、もしもAFFINGER5のマニュアルサイトが

今一つ分かりにくいというあなたには

私のサイトがあなたの助け舟になればと考えておりますので

 

今後も参考にしていただけると嬉しいです。

 

ということで、最後までお読みいただき

ありがとうございました!

 

 

WordPressテーマ「AFFINGER5」
「稼ぐ」ためだけに特化された究極のアフィリエイター向けテーマ「アフィンガー5」。日々変化するWebの状況に合わせ、確実に進化し続けている2020年も間違いなくイチオシの有料テーマです。

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG