カテゴリ

【SWELL】便利すぎるボックスメニューの使い方を解説!見本付き

本記事では、SWELLバージョン2.6.1.3で追加されたボックスメニューの使い方を見本付きで解説しています。

基本的には直感的に使えます。気になる部分だけ読んでください。

↓クリックすると該当箇所に移動可能です。

目次

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

SWELLのボックスメニューの使い方を画像付きで解説していきます。

①ボックスメニューを開く

まず最初に、ブロックエディターでボックスメニューを呼び出しましょう。

SWELLボックスメニュー

ボックスメニューの呼び出し方は以下2通りです。

  1. ショートコードを入力(/box)
  2. ブロックエディターを開き検索
    • ボックス
    • box

②設定項目で基本的なデザインを決める

次に基本的なデザインを決めましょう。

  1. スタイル選択を選択
    1. 標準
    2. 塗り
  2. カラー設定
    1. テキストカラー
    2. アイコンカラー
      • 単色
      • グラデーション
  3. 設定(アイコンとテキストの並び)
    1. 縦並び
    2. 横並び
  4. ボックス間の余白
  5. アイコンサイズ
  6. 列数
    1. PC
    2. タブレット
    3. モバイル

③アイコンタイプを選択

目的・用途に合わせてアイコンを選択します。

  1. ブロックを選択
  2. 使いたいアイコンを選択
    1. SVG
    2. 画像

④リンクを設定

最後にボックスメニュにリンクを設定しましょう。

別記事に移動する場合

他の記事へのリンクを貼る場合、通常のリンク通りの設定で大丈夫です。

  1. URLを入力
  2. 矢印ボタンをクリック

同一記事内で移動する場合

同一の記事内で移動する場合は、HTMLアンカーの設定が必要となります。

STEP
HTMLアンカーを設定

ブロック高度な設定を開いてHTMLアンカーを設定します。

ページ内で開きたいブロックを開き、1〜2語を空白なしで入力するだけです。

このページの場合、H2ボックスメニューのサンプルにsampleを設定しています。

STEP
URLに#をつけて入力

先ほど入力したアンカーに#をつけて矢印ボタンをクリックします。

internalと表示されるはずです。

STEP
プレビューでチェック

移動が本当にできるか念のためボックスメニューのボタンをプレビューでクリックしておきましょう。

SWELLのボックスメニューで使用できるアイコンの種類

使用できるアイコンの種類をご紹介します。

標準で使えるアイコン

数が多いので、ボックスメニューで使えるアイコンを動画にしました。

外部のアイコン

標準で多くのアイコンが使えますが、外部のアイコンを使用することも可能です。

SWELL|ボックスメニューの見本(サンプル)

SWELLボックスメニューで使える見本(サンプル)を作成しました。

参考程度にご覧ください。

物販ブログで使えるボックスメニュー

たとえば物販ブログだと以下のようなボックスメニューを簡単に作成可能です。

サンプル1

決済方法で使えるボックスメニュー

決済方法もボックスメニューを使うとおしゃれに表示ができます。

サンプル2

旅行ブログで使えるボックスメニュー

旅行の移動手段などをボックスメニューで表示も可能です。

サンプル3
目次