ここあです。
昨年12月にAFFINGER5のアップデートβ版がリリースされました。
その名も「WING ver20191218β」です。
通常、ほとんどのテーマアップデートいうのは
バグを解消するためのマイナーアップデートも多いのですが
AFFINGER5に関して、私が凄いと思うところは
毎回面白い機能がここぞと言わんばかりに
アップデートで実装されるところです。
例えば、今回のアップデート内容は
- アイコンロゴ設定機能
- ボックスメニュー作成機能
- 会話吹き出しのアイコンを大きく設定が可能に
- アイキャッチ画像を一括でポラロイド風に可能
- ブログカードの高さ調整が可能に
などなど
全て挙げるとキリがないぐらいありますが
今回もその全てが利用ユーザーの使い勝手やデザイン性を考慮した
非常に素晴らしいアップデートとなっています。
そもそもデザインというのは
ブログを運営する側にとっても大事ですが
ネットユーザーにとってはさらに重要な要素の1つ。
なぜなら、ユーザビリティが悪く
デザイン性が悪いブログは情報を探すのが難しく
離脱率も高くなってしまうからです。
なので、もしもあなたがブログデザインをする際には
あなたの自己満足なデザインをするのではなく
ネットユーザーに分かりやすい
「伝わるデザインをする」というのを
しっかりと覚えておいてくださいね。
そういう意味では、今回新たに追加された機能
「ボックスメニュー作成機能」は
ただデザインが優れているだけではなく
ネットユーザーのユーザビリティも上がる
非常に優れた機能が実装されていているんですね。
とは言え、AFFINGER5のカスタマイズは
設定に慣れるまで少し大変というのもあり、
私の場合は「THE THOR」をメインに使用しているため
少々設定に難航してしまいました＾＾；
ということで、今回はAFFINGER5に実装された
「ボックスメニュー作成機能」の設定方法について
解説していきたいと思います。
ある意味、私にとっても備忘録となりますので
じっくりと丁寧に解説していきますね。
AFFINGER5のボックスメニューを作る前に
AFFINGER5のボックスメニューを設定する場合は
まず最初に
- アイコンフォントである「Font Awesome」を使うか
- アイコンイラストを使用するか
それらをあらかじめ決めて
あなたが設定したいメニューに合うイラストを決めましょう。
AFFINGER5は、Font Awesome4.7.0のアイコンフォントが使えますので
アイコンフォントを使う場合は、あなたのメニューに合わせて
以下のサイトからそれぞれアイコンを決めるようにしてください。
なお、Font Awesome使用する場合に必要なのは
以下の部分に表示されるアイコンフォントを読み込むための
アイコン名が必要になります。
また、アイコンイラストを使用する場合は
あなたが普段使用しているお好みの著作権フリー素材サイトから
いくつかデータをダウンロードして準備しましょう。
種類が多く使いやすいのは以下の
ICOOON MONOというサイトです。
素材は単色になりますが、
オンライン上で自分の好きな色に変更してから
ダウンロードもできますし
ベクターデータを編集できる環境がある場合は
SVGデータをダウンロードして個別に着色することも可能です。
ということで、前置きが少し長くなってしまいましたが
いずれにしても「ボックスメニュー」を使う場合は
アイコンイラストが必須となりますので
あらかじめどんなメニューにするのかを決めた上で
素材の選定も併せてするようにしてくださいね。
AFFINGER5のボックスメニューの設定方法
それではボックスメニューの内容が決まり
アイコン素材も準備できたと想定し
AFFINGER5のボックスメニューを作る方法を
順番に解説していきます。
１）クイックタグで基本のショートコードを作成
AFFINGER5のβ版アップデート「WING ver20191218β」をインストールすると
クイックタグでボックスメニューのショートコードを表示することが
可能になります。
ということで、まずは基本的なボックスメニューの表示方法です。
ボックスメニューのショートコードを表示する場合は
タグ → カスタムボタン → ボックスメニューをクリックし
ボックスメニューの基本コードを表示させます。
「基本（4列）」を選択した場合は、以下のメニュー表示
「サブあり（4列）」を選択した場合は、以下のメニュー表示
違いはサブテキストがあるか無いかだけになります。
なお、縦並びと横並びの変更はすぐにできますので
とりあえず、ボックスメニューを作る場合は
サブテキストが必要か、不要かでショートコードを選んでください。
また、デフォルトですでにアイコンフォントである
Font Awesomeのアイコン名が入力されておりますので
アイコンフォントを使う場合は
ショートコードにあらかじめ入力されている
「fa-wordpress」の部分を書き換えるだけで
アイコンフォントが表示できます。
2）ショートコードでボックスメニューの数を調整
ボックスメニューのショートコードを表示させたら
あらかじめあなたが決めたボックスメニューの数に合うよう
ショートコードを調整しましょう。
調整方法は以下の通りです。
ボックスメニューを3列にしたい場合
ボックスメニューの基本設定は4列です。
ですが、当然、サイトの運営は人それぞれ異なりますので
メニューを3列にしたいとか、4列以上に増やしたいという場合も
当然でてきてしまいます。
ということで、メニューを3列にしたい場合は
以下、2つの設定をしてください。
①メニューDを丸々消す
②pc_showの数字を3に打ち替える
これら2つの設定さえしてしまえばこのように
3列のボックスメニューを簡単に表示させることも可能です。
ボックスメニューを2列にしたい場合
ボックスメニューを2つにしたい時も同じです。
ボックスメニューを2つだけ表示させたい場合は
さらにメニューCを消してください。
続いて、pc_showの数字を２に打ち替えるか、もしくは空欄にすると
このように2列のメニュー表示にすることができます。
ボックスメニューを6個設置したい場合
ボックスメニューを６個設置したい場合は
先に説明した3列表記を応用すれば簡単にできます。
ボックスメニューを６個にする場合は、先に
メニュー項目に必要なショートコード
「メニューEとF」を新たに追加します。
なお、メニューEとFを追加する場合は
先に表示しているA〜Dのメニューどれでもいいので
どれか1つを丸々2つコピペしてEとFに打ち替えます。
以下のように２つ増やします。
さらにpc_showの設定を3に設定しておけば、このように
3×2列、計6このボックスメニューを表示させることが可能です。
３）ボックスメニューを縦に変更する場合
ボックスメニューを縦位置に変更する場合はすごく簡単です。
ボックスメニューのショートコード内に
[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のサイトに飛び、アイコンを選びます。
例えば、今回はカメラのアイコンを選んだとします。
アイコンを選んだら、アイコンをクリック。
そうするとアイコンコードの詳細が表示されます。
アイコンの詳細が表示されたら、以下、アイコン名をコピーして
そのまま、AFFIGER5のボックスメニューの中にある
fontawesomeの部分にある、fa-wordpressから、
あなたが任意で選んだアイコン名に打ち替えてください。
そうすると、Font Awesomeのアイコンが
ワードプレスのマークから、あなたが選んだアイコンに
変更することができますので、
必要な数だけアイコン名を入力してアイコンを
変更してくださいね。
アイコンイラストを使う場合
アイコンイラストを使用する場合は
任意のアイコンイラストをダウンロードし
あなたのライブラリに登録することで
使用することが可能になります。
アイコンイラストをあなたのメディアにアップロードし
ボックスメニューに反映させる場合は
メディアライブラリにアップした画像のURLをコピーし
そのコピーしたURLをボックスメニューのショートコード
icon_image=””の部分に貼り付けます。
さらに、一度、ボックスメニューを表示させて
アイコンサイズのバランスが悪い時は
ショートコード内にあるicon_size=””の部分に任意の数字を入力し
アイコンサイズを調整してみてください。
アイコンサイズは個別に設定できますので。
ボックスメニューの色を一括で変更する方法
AFFINGER5のボックスメニューは
背景色や、文字の色、アイコンの色（FontAwesome使用時）まで
一括で設定することも可能です。
ボックスメニューの色を変更する場合は
ダッシュボードメニューから外観 → カスタマイズをクリック。
さらに、メニューのカラー設定をクリックすると
一番下にボックスメニューという項目があります。
なので、ボックスメニューの色を一括で変更したい場合は
カスタマイザーの設定を使って一気に変更できますので
非常に便利です。
なお、変更が可能なのは以下の通り
- テキストカラー（※サブテキストは設定がありません）
- 背景色
- ボーダーカラー
- アイコンサイズ（FontAwesome使用時）
FontAwesoneのアイコンサイズもここの設定で
まとめて調整が可能です。
ちなみにアイコンフォントである
FontAwesoneを使用している際に、ここの設定で
テキストカラーを一括変換すると
アイコンの色も変わってしまいますので
気をつけてください。
上記のように、アイコンとテキストの色設定が連動しています。
なので、カスタマイザーの一括変更はうまく使ってくださいね。
ボックスメニューのショートコードがある程度固まったら
あなたがボックスメニューを設定したい場所に
ショートコードを入力し、ボックスメニューを表示させれば完成です。
ボックスメニューの配置に関しては、
ネットユーザーが目に付きやすく、ユーザビリティが上がる場所に
設定すると非常に効果的ですので、ぜひ活用してみてください。
ボックスメニューのサブテキストの色を変更する方法
AFFINGER5なので、放っておいてもアップデートされると思いますが（笑）
サブテキストの色を変更したいという場合は
以下のCSSコードを追加してください。
.st-box-btn-memo {
color: #757575;
}
デフォルトでサブテキストの色は「#757575」のグレーですが
上記CSSコードを追加し、カラーコード#757575を変えることで
サブテキストをあなたのお好みの色に変更できます。
おそらく通常は問題ありませんが
ボックスメニューの色を一括で変更する際に
どうしてもグレーでは都合が悪いという場合も出てくると思います。
なので、早ければ正式版のアップデートで
サブテキストの設定なども追加されるかもしれませんが
現状では設定箇所がありませんので
サブテキストの色も変更したいというあなたは
私が紹介したCSSコードを追加の上、変更してみてくださいね。
ボックスメニューをサイドバーに設置する方法
AFFINGER5のボックスメニューは基本的に
投稿ページのタグ → カスタムボタン → ボックスメニューから作ることができるのですが
このボックスメニューというのは、簡単にサイドバーにも設置することが可能です。
その方法というのは、一旦投稿記事の作成でボックスメニューを作成
その作成したコードを丸々コピーします。
次に外観 → カスタマイズ → ウィジェット →サイドバーウィジェットの順にクリックし
ウィジェットを追加をクリック。
さらに、00_STINGERカスタムHTMLをクリック。
そうすると、このようにHTMLコードを入力する画面が表示されますので
先ほど、投稿画面でコピーしたボックスメニューのHTMLコードを
このウィジェットにペースト（貼り付け）します。
ボックスメニューのHTMLコードをサイドバーウィジェットに
コピペした瞬間、このようにボックスメニューが
サイドバーにきちんと表示されますので
あらかじめ投稿記事の作成画面でボックスメニューをしっかりと作り込んだ場合は
ウィジェットの順番を並び替えて「公開」ボタンをクリック。
先にサイドバーウィジェットにボックスメニューを
仮設置した場合は、メニューのリンク先やアイコンを
サイドバーウィジェット上で編集するようにしてください。
個人的に作業がやりやすいのは、投稿記事作成画面で
あらかじめボックスメニューの内容をきちんと設定してから
サイドバーウィジェットにコピペする方法です。
ということで、サイドバーに
ボックスメニューを表示させたいというあなたは
ぜひ試してみてくださいね。
それ以外の部分も、ウィジェットの表示ができる部分であれば
同様にウィジェット項目を追加し
HTMLコードさえコピペすれば、ボックスメニューは
いろいろな場所に表示させることが可能です。
意外と、サイドバーにボックスメニューを
どう表示させたら良いか分からないという意見も多かったので、
私の記事にも簡単ではありますが
サイドバーに表示させる方法を追記させていただきました。
参考になると嬉しいです＾＾
AFFINGER5のボックスメニューを設定する方法まとめ
今回は、AFFINGER5に新たに実装された機能
ボックスメニューの設定方法について解説させていただきましたが
いかがでしたか？
私は今、THE THORというテーマをメインに使用しておりますが
テーマそれぞれで違う機能があるのは
すごく面白いなと感じています。
AFFINGER5は利用ユーザーを考慮した便利な機能が
定期的にアップされるのは非常に羨ましく感じますし
そういう意味ではTHE THORも
もう少し頻繁にアップデートがあると嬉しいと
正直、個人的には考えてしまいます。
とは言え、AFFIGER5は使い慣れないと
どこをどう設定すれば良いか分からないという点では
私は毎回設定に苦しみ、時間がかかっているので
個人的にはTHE THORの方がやはり合ってる？
と思ったりもしています（笑）
やはりどのテーマも一長一短ありますよね＾＾；
ただ、いろんなテーマを使っていくことで
テーマの違いがよく分かったり、
質問者に合わせたテーマの紹介などもしやすくなりますので
いろんなテーマを使うのはすごく楽しいですし
AFFINGER5も私はこれからどんどん使いこなしたいと考えています。
なので、AFFINGER5に関しては、設定が充実している分
CSSであえてカスタマイズする必要がほとんどありませんので
今後は、AFFINGER5の機能を研究しながら
できるだけ分かりやすい設定方法などの記事も
増やしていきたいと思っています。
だから、もしもAFFINGER5のマニュアルサイトが
今一つ分かりにくいというあなたには
私のサイトがあなたの助け舟になればと考えておりますので
今後も参考にしていただけると嬉しいです。
ということで、最後までお読みいただき
ありがとうございました！
