【SWELL】ボックスメニューブロックの設定と使い方

【SWELL】ボックスメニューブロックの設定と使い方

SWELLの「ボックスメニュー」ブロックの使い方をまとめています。

目次

ボックスメニューの使い方

ボックスメニューブロックを使うと、下記の様なボックス型のメニューを作成できます。

直接記事に挿入することもできますが、ウィジェット(サイドバー等)に設置して使うのが一般的なので、管理しやすく使いまわしができるブログパーツで作成するのがおすすめです。

使い方については、公式サイトのver.2.6.1アップデートの記事を参考にして下さい。

【SWELL – ver. 2.6.1 アップデート情報】 | WordPressテーマ SWELL

ブログパーツの新規追加

管理画面のメニューから、「ブログパーツ」を新規作成します。

ブログパーツ新規追加

任意のタイトルを付けて、「ボックスメニュー」ブロックを追加します。

ボックスメニューブロックを追加

後はお好みでデザインやレイアウトをカスタマイズしていきます。

ベースデザインの設定

ボックスメニューブロックを選択して、サイドバーからベースデザインを設定します。

ボックスメニューのベースデザイン

全てお好みで自由に設定できますが、列数の設定だけは実際に設置した後にPC画面及びSP画面で確認して下さい。サイドバーに設置する場合やスマホで表示する時は、2列以下の方が見やすいと思います。

設定できる項目
  • スタイル(標準or黒塗り)
  • テキストカラー
  • 背景カラー
  • アイコンとテキストの並び
  • ボックス間の余白
  • アイコンサイズ
  • 列数

リンクボックスの設定

リンクボックスを選択して、「リンク先」「テキスト」「カラー」「アイコン」を設定します。

リンクボックスの設定

ここでの設定は、ベースデザインを上書きします。

アイコンに任意の画像を設定する時は、できるだけ正方形かつ透過画像を使用して下さい。

オプションで正方形にトリミングする機能はありますが、縦横比の異なる画像は見切れてしまう可能性があるからです。また、ベースデザインで塗りを選択している場合は、非透過画像を使うと見栄えが悪くなります。

設定できる項目
  • 【必須】ツールバーオプションからリンク先を設定
  • 【任意】リンクボックスに表示するテキストを入力(空白でも可)
  • 【任意】テキストカラーとアイコンカラーの設定
  • 【必須】アイコン or 画像の設定

全てのリンクボックスを設定したら、ボックスメニューの作成は完了です。

ウィジェットに設置

管理画面からブログパーツ一覧を開いて、「呼び出しコード」をコピーします。

ブログパーツの「呼び出しコード」をコピー

管理画面から「ウィジェット」を開いて、ブロックメニューを表示させたい場所に「ブロック」「カスタムHTML」「テキスト」ウィジェットのいずれかを配置して、コピーした呼び出しコードを貼り付けます。

ウィジェットを配置して呼び出しコードを貼り付ける

タイトルを表示させたい時は、「テキスト」及び「カスタムHTML」ウィジェットを選択して下さい。

最後に

ブログパーツに登録して使う方法を紹介しましたが、記事編集画面から直接挿入することもできます。

ほとんど直感で操作できると思いますが、ブログパーツで作成する時は、プレビューを確認ができないので、実際に配置した後に、PC画面とSP画面でデザインが崩れていないかを確認して下さい。

今日の一言

2023年11月3日にリリースされたコアアップデートが11月29日にロールアウトしました。長かっただけで特に大きな変化はありません。10月で大きく減ったアクセスは少し戻ったかな!?程度です(恐らく季節需要の高い記事のアクセスでそう見えるだけ)。とりあえずやる事は変わらないので、次のコアアップデートに向けてコツコツ記事を書いてリライトするだけです。

コメント

コメントする

目次