THOR」へ変更しました。その理由は..HOME記事一覧カスタマイズアフィンガー5[AFFINGER5の使い方]ボックスメニューの設定方法を詳しく解説![AFFINGER5の使い方]ボックスメニューの設定方法を詳しく解説!2020年1月8日2020年1月13日アフィンガー5アフィンガー5ここあです。昨年12月にAFFINGER5のアップデートβ版がリリースされました。ver20191218β」です。通常、ほとんどのテーマアップデートいうのはバグを解消するためのマイナーアップデートも多いのですがAFFINGER5に関して、私が凄いと思うところは毎回面白い機能がここぞと言わんばかりにアップデートで実装されるところです。会話吹き出しのアイコンを大きく設定が可能にアイキャッチ画像を一括でポラロイド風に可能ブログカードの高さ調整が可能になどなど全て挙げるとキリがないぐらいありますが今回もその全てが利用ユーザーの使い勝手やデザイン性を考慮した非常に素晴らしいアップデートとなっています。そもそもデザインというのはブログを運営する側にとっても大事ですがネットユーザーにとってはさらに重要な要素の1つ。ユーザビリティが悪くデザイン性が悪いブログは情報を探すのが難しく離脱率も高くなってしまうからです。あなたがブログデザインをする際にはあなたの自己満足なデザインをするのではなくネットユーザーに分かりやすい「伝わるデザインをする」というのをしっかりと覚えておいてくださいね。「ボックスメニュー作成機能」はただデザインが優れているだけではなくネットユーザーのユーザビリティも上がる非常に優れた機能が実装されていているんですね。THOR」をメインに使用しているため少々設定に難航してしまいました^^;ということで、今回はAFFINGER5に実装された「ボックスメニュー作成機能」の設定方法について解説していきたいと思います。ある意味、私にとっても備忘録となりますのでじっくりと丁寧に解説していきますね。Awesome」を使うかアイコンイラストを使用するかそれらをあらかじめ決めてあなたが設定したいメニューに合うイラストを決めましょう。Awesome4.7.0のアイコンフォントが使えますのでアイコンフォントを使う場合は、あなたのメニューに合わせて以下のサイトからそれぞれアイコンを決めるようにしてください。Awesome使用する場合に必要なのは以下の部分に表示されるアイコンフォントを読み込むためのアイコン名が必要になります。アイコンイラストを使用する場合はあなたが普段使用しているお好みの著作権フリー素材サイトからいくつかデータをダウンロードして準備しましょう。MONOというサイトです。素材は単色になりますが、オンライン上で自分の好きな色に変更してからダウンロードもできますしベクターデータを編集できる環境がある場合はSVGデータをダウンロードして個別に着色することも可能です。ICON」がおすすめとありますが、こちらのサイトは基本的に無料で使う場合、クレジット表記が必要となりますので、ご注意ください。有料のライセンスを購入されている方のみ、クレジット表記が不要になります。いうことで、前置きが少し長くなってしまいましたがいずれにしても「ボックスメニュー」を使う場合はアイコンイラストが必須となりますのであらかじめどんなメニューにするのかを決めた上で素材の選定も併せてするようにしてくださいね。AFFINGER5のボックスメニューの設定方法それではボックスメニューの内容が決まりアイコン素材も準備できたと想定しAFFINGER5のボックスメニューを作る方法を順番に解説していきます。ver20191218β」をインストールするとクイックタグでボックスメニューのショートコードを表示することが可能になります。いうことで、まずは基本的なボックスメニューの表示方法です。ボックスメニューをクリックしボックスメニューの基本コードを表示させます。違いはサブテキストがあるか無いかだけになります。縦並びと横並びの変更はすぐにできますのでとりあえず、ボックスメニューを作る場合はサブテキストが必要か、不要かでショートコードを選んでください。Awesomeのアイコン名が入力されておりますのでアイコンフォントを使う場合はショートコードにあらかじめ入力されている「fa-wordpress」の部分を書き換えるだけでアイコンフォントが表示できます。2)ショートコードでボックスメニューの数を調整ボックスメニューのショートコードを表示させたらあらかじめあなたが決めたボックスメニューの数に合うようショートコードを調整しましょう。調整方法は以下の通りです。ボックスメニューを3列にしたい場合ボックスメニューの基本設定は4列です。サイトの運営は人それぞれ異なりますのでメニューを3列にしたいとか、4列以上に増やしたいという場合も当然でてきてしまいます。いうことで、メニューを3列にしたい場合は以下、2つの設定をしてください。1メニューDを丸々消す2pc_showの数字を3に打ち替えるこれら2つの設定さえしてしまえばこのように3列のボックスメニューを簡単に表示させることも可能です。ボックスメニューを2列にしたい場合ボックスメニューを2つにしたい時も同じです。ボックスメニューを2つだけ表示させたい場合はさらにメニューCを消してください。続いて、pc_showの数字を2に打ち替えるか、もしくは空欄にするとこのように2列のメニュー表示にすることができます。ボックスメニューを6個設置したい場合ボックスメニューを6個設置したい場合は先に説明した3列表記を応用すれば簡単にできます。ボックスメニューを6個にする場合は、先にメニュー項目に必要なショートコード「メニューEとF」を新たに追加します。メニューEとFを追加する場合は先に表示しているA〜Dのメニューどれでもいいのでどれか1つを丸々2つコピペしてEとFに打ち替えます。以下のように2つ増やします。pc_showの設定を3に設定しておけば、このように3×2列、計6このボックスメニューを表示させることが可能です。3)ボックスメニューを縦に変更する場合ボックスメニューを縦位置に変更する場合はすごく簡単です。type=””]と書かれた最初の行の一番最後type=””の部分に”vertical”を足して、typeの表記を空欄にするのではなくtype=”vertical”とすることでボックスメニューが縦並びに変わります。初めに基本設定で横並びでボックスメニューを作成し後から縦並びに変更したい場合は、typeの部分に”vertical”を追加するとだけ覚えておいてくださいね。これだけの追記で、メニューの縦と横位置の変更ができる辺りAFFINGER5はさすがです。ボックスメニューのアイコンを変更する方法それでは続いて、アイコンの変更方法について解説させていただきます。Awesomeを使ったアイコンフォントがデフォルトで表示されるようになっています。Awesomeのサイトに飛び、アイコンを選びます。今回はカメラのアイコンを選んだとします。アイコンを選んだら、アイコンをクリック。するとアイコンコードの詳細が表示されます。アイコンの詳細が表示されたら、以下、アイコン名をコピーしてそのまま、AFFIGER5のボックスメニューの中にあるfontawesomeの部分にある、fa-wordpressから、あなたが任意で選んだアイコン名に打ち替えてください。必要な数だけアイコン名を入力してアイコンを変更してくださいね。アイコンイラストを使う場合アイコンイラストを使用する場合は任意のアイコンイラストをダウンロードしあなたのライブラリに登録することで使用することが可能になります。アイコンイラストをあなたのメディアにアップロードしボックスメニューに反映させる場合はメディアライブラリにアップした画像のURLをコピーしそのコピーしたURLをボックスメニューのショートコードicon_image=””の部分に貼り付けます。画像のURLをコピペする場合は、テキスト編集モードで貼り付けるようにしてください。ビジュアル編集モードでコピペすると、アイコン画像が正常に表示されないことがあります。一度、ボックスメニューを表示させてアイコンサイズのバランスが悪い時はショートコード内にあるicon_size=””の部分に任意の数字を入力しアイコンサイズを調整してみてください。アイコンサイズは個別に設定できますので。ボックスメニューの色を一括で変更する方法AFFINGER5のボックスメニューは背景色や、文字の色、アイコンの色(FontAwesome使用時)まで一括で設定することも可能です。カスタマイズをクリック。メニューのカラー設定をクリックすると一番下にボックスメニューという項目があります。ボックスメニューの色を一括で変更したい場合はカスタマイザーの設定を使って一気に変更できますので非常に便利です。変更が可能なのは以下の通りテキストカラー(※サブテキストは設定がありません)背景色ボーダーカラーアイコンサイズ(FontAwesome使用時)FontAwesoneのアイコンサイズもここの設定でまとめて調整が可能です。デフォルトでは300%に設定されています。アイコン画像を使用している場合は、ここの%の数字を変更しても、アイコンのサイズは変わりませんのでご注意ください。ちなみにアイコンフォントであるFontAwesoneを使用している際に、ここの設定でテキストカラーを一括変換するとアイコンの色も変わってしまいますので気をつけてください。上記のように、アイコンとテキストの色設定が連動しています。カスタマイザーの一括変更はうまく使ってくださいね。ボックスメニューのショートコードがある程度固まったらあなたがボックスメニューを設定したい場所にショートコードを入力し、ボックスメニューを表示させれば完成です。ボックスメニューの配置に関しては、ネットユーザーが目に付きやすく、ユーザビリティが上がる場所に設定すると非常に効果的ですので、ぜひ活用してみてください。ボックスメニューのサブテキストの色を変更する方法AFFINGER5なので、放っておいてもアップデートされると思いますが(笑)サブテキストの色を変更したいという場合は以下のCSSコードを追加してください。#757575;}デフォルトでサブテキストの色は「#757575」のグレーですが上記CSSコードを追加し、カラーコード#757575を変えることでサブテキストをあなたのお好みの色に変更できます。通常は問題ありませんがボックスメニューの色を一括で変更する際にどうしてもグレーでは都合が悪いという場合も出てくると思います。早ければ正式版のアップデートでサブテキストの設定なども追加されるかもしれませんが現状では設定箇所がありませんのでサブテキストの色も変更したいというあなたは私が紹介したCSSコードを追加の上、変更してみてくださいね。THORというテーマをメインに使用しておりますがテーマそれぞれで違う機能があるのはすごく面白いなと感じています。THORももう少し頻繁にアップデートがあると嬉しいと正直、個人的には考えてしまいます。THORの方がやはり合ってる?と思ったりもしています。質問者に合わせたテーマの紹介などもしやすくなりますのでいろんなテーマを使うのはすごく楽しいですしAFFINGER5もこれからどんどん使いこなしたいと考えています。AFFINGER5に関しては、設定が充実している分CSSであえてカスタマイズする必要がほとんどありませんので今後は、AFFINGER5の機能を研究しながらできるだけ分かりやすい設定方法などの記事も増やしていきたいと考えています。AFFINGER5のマニュアルサイトが今一つ分かりにくいというあなたには私のサイトがあなたの助け舟になればと考えておりますので今後も参考にしていただけると嬉しいです。「稼ぐ」ためだけに特化された究極のアフィリエイター向けテーマ「アフィンガー5」。日々変化するWebの状況に合わせ、確実に進化し続けている2020年も間違いなくイチオシの有料テーマです。THOR】おすすめプラグインを徹底調査してみました!次へ2020年1月9日[AFFINGER5の使い方]タブ(切替ボタン)の設定方法!この記事を書いた人ここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。詳しいプロフィールはこちら人脈が成功への最短ルート!私がMonologueを勧める理由WordPress設置代行始めました!※設置代行はメルマガ読者限定です。THORSTORKここあデザイン制作プロダクションを転々としながら、20年間勤務して2017年に独立。現在はネットとグラフィックデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?●安定を求めれば求めるほど不安定になる理由とは?●いくら知識があっても、あなたが絶対に成功できない理由など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。印刷会社と取引がある制作プロダクションで様々な経験や実績を積み、2017年に独立。現在は、グラフィックデザインを生かしたWebデザインのビジネスを展開しながら、ネットを生かした情婦発信を行い、新しい働き方や楽しい人生の過ごし方についてもお伝えしています。