SWELLのボックスメニューの使い方を教えてください
SWELLのボックスメニューの使い方を細かく解説
当ページのリンクには広告が含まれています。
というテーマで疑問にお答えをしていきます。
みなさんはSWELLのボックスメニューを使ったことありますか？
実際にあるけど、でもどういう風に使うかわからない…
場所どこに置こうかな
とか迷う方も多く、使い方がある意味難しいブロックでもあります。
今回はSWELLのボックスメニューの使い方に関してとことん解説していきます。
目次
ボックスメニューはSWELLの標準搭載機能
SWELLのボックスメニューはSWELLが標準搭載しているブロックの一つです。
見た目的にはこんな感じです。
特徴として名前のとおり四角い形をしていて、上には「図もしくは画像」、下には「文字」で構成されています。
ボックスメニュー自体はよくゲーム攻略サイトやブロガーで使われていることが多いです。
特にゲームブログをする人であれば使っていくのがおすすめです！
なお、表示では1行になっていますが
実際には2行以上にも設定することも可能なほか、ブロック単位で増やすこともできます。
記事内向けのボックスメニュー使い方
まずは記事の中にあるボックスメニューの使い方を解説していきます。
ボックスメニューを左上の＋にてSWELLブロックメニューからボックスメニューを選択もしくはドラックをすることで呼び出すことができます。
または/ボックスメニューと表示することでも呼ぶことができます。
なお、デフォルトでは写真アイコンとtext…というような名前なしのボックスメニューが4個出力されます。
なお、このままでは使えませんので次の項目で装飾や細かくな設定について解説していきます。
ボックスメニュー設定項目：全体
ボックスメニューの全体を行う設定です。
ボックスメニューのクリックをする際、個別設定になってしまうので左上にあるボックスメニューの選択を押すことで全体設定を行うことができます。
そして全体設定を押したら右上の公開の下にあるブロックを選択します。
そしたら、このようにボックスメニューの設定画面が表示されます。
スタイル
塗りつぶしがない標準もしくは塗りつぶしのどちらに設定をすることができます
標準ではロゴの方にカラーがつくのに対して、塗りでは背景の方に色が付きます。
カラー設定
塗りの色により背景や文字の全体設定することができるメニューです。
なお、今回はわかりやすい検証のために色んな色を使っていますが、おそらく初心者の方は紺色になっているはずです。
なお、個別に指定した色は変化しません。
検証の画像では上の段がデフォルト【サイトの関係上青色】、下は個別指定色です。
注意：ここに置かれるボタンを押してもなにもないのでご注意を！
設定方法ではデフォルトの色から塗り替えるにはアイコンカラーを押すと好きな色に変えることができます。
今回はわかりやすいように赤色で設定します。
設定を赤色にするとボックスメニューの全体像が赤色に変化します。
なお、塗りつぶしVerではこのようになります。
アイコンとテキストの並び
アイコンとテキストが縦並びのように段落が別々になるか、同じ列で横並びかの設定になります。
ボックス間の余白とアイコンサイズ
ボックス間の余白とアイコンサイズです。
この設定ではデフォルトでもなんも問題なくきれいに表示されるので、基本はスルーでOKです。
列数
ボックスメニューの列数です。
こちらも基本は2列もしくは3列で十分です。
あまり多いと情報が多くなって疲れてしまうのと、スマホ表示でデザインが崩れてしまうため列数は多くしないほうがいいです。
ボックスメニュー設定項目：個別版
次はそれぞれ個別のボックスメニュー設定項目です。
全体とは異なり、選択したブロックだけ反映します。
リンク
ボックスメニューで忘れてはならないのはリンクです
リンクはブロックの右の表示ではなく、すぐ上のリンクマークからクリックします。
カラー設定
全体設定での個別版です。
設定方法では全体版と同じ設定なので省略しますが
違いとして、個別のカラー設定が全体yロイも優先的に適応され、全体版の設定には反映されなくなります。
そのためなにか注目したいときにこの機能は便利と言えるでしょう。
アイコン設定
アイコン設定でアイコンタイプでSVG【図形】か画像のどちらかに設定できます。
SVGでは様々なSWELLが搭載しているアイコンの中から選択することができます。
一方で画像では、画像を選択した上で、画像のようにメディアが出現されます。
メディアではWordPressが標準搭載する画像と同様です。
画像を設定ボックスメニューがこちらになります。
今回は鬼嫁レベルのくろとを画像をつかってみたらこうなります。
基本的に画像からはできれば背景がない方が見た目的に良いので背景が透明なWebpもしくはPNGがおすすめです。
ボックスメニューおすすめの場所
ボックスメニューは見やすい反面、記事としては使いどころがあまり多くないですが
一方でアクセス性の役割があるので、複数の内部リンクなどには優れているとは思います。
おすすめの場所は全部で3箇所です。
- サイトバー
- 関連記事下
- フッター【PC】
順番に解説していきます
サイトバー
ボックスメニューが一番おすすめな場所がサイトバーに置いておくことです。
サイトバーはボックスメニューの中でも使いやすくて、表示によるアクセス性が優れているのではないかと思います。
おすすめは追跡サイトバーです。
関連記事下の設置
ゲーム攻略ブログなどでは、関連記事の下にもおすすめです。
場所的にも邪魔にならないので、読者の不快が少ないです。
ただ、あまり多いと探すのが大変なのである程度のカテゴリーを絞った状態で置くのがおすすめします。
フッター【PC】
フッターのばしょがたくさん空いているのであればそこに置くのも有効活用です。
もちろん埋めればいいという問題ではありませんが、特化ブログ等ではあまり記事数が多くないため、何か注目してほしいなぁというときにボックスメニューは使いやすいです。
まとめ
ボックスメニューは使いどころが少し難しいですが、うまく使いこなせればより良いコンテンツを生み出せる力があります。
SWELLのボックスメニュー
- ボックスメニューはデザイン性・アクセス性には優れる
- しかし、記事では使い道が難しく、ウィジェット向け
- SWELLの特徴である細かいところまでボックスメニューも反映している。
使い道に関しての参考になったらうれしいです。
最後まで見てくださりありがとうございました！
宣伝
まだ契約をしてない方はSWELLを割引購入できる
エックスサーバーがおすすめ！
お友達プレゼントで最大￥10,000割引実施！
6ヶ月
￥3,000割引
24ヶ月
￥7,500割引
12ヶ月
￥5,000割引
36ヶ月
￥10,000割引
＼キャンペーン、10日間無料お試し併用可能／
サイトのリンク先https://www.xserver.ne.jp
すでにサーバーを契約をしている方は
WordPressテーマ「SWELL」
のページへアクセスがおすすめ！
サイトのリンク先
コメント