【SWELL】ボックスメニューの使い方【オススメ画像サイズも紹介】

こういった悩みにお答えします。

是非、最後までご覧ください。

【SWELL】ボックスメニューブロックの使い方【オススメ画像サイズも紹介】

今回は、事前に用意した以下のボックスメニューを作りながら使い方の解説をしていきます。

ボックスメニューブロックの挿入

管理画面メニューから、「投稿」＞「新規投稿を追加」を選択します。

（ブロック挿入ツールを切り替え）から、「ブロック」＞「SWELLブロック」＞「ボックスメニュー」を選択します。

アイコンカラー

管理画面メニューから、「外観」＞「カスタマイズ」＞「サイト全体設定」＞「基本カラー」へと進み、その中の「メインカラー」が反映されています。

アイコン（または画像）の挿入

用意するアイコン（または画像）サイズ

デフォルトでは、48×48のSVGアイコンが挿入されています。

SWELLが用意しているSVGアイコンを挿入

対象のリンクボックスを選択後、 （設定）から、「ブロック」＞「アイコン設定」を開きます。

アイコン設定から、アイコンタイプで「SVG」を選択後、アイコン選択「  」をクリックします。

アイコンを選択から、「 」＞「ロゴ」の中から「 」を選択します。

「 」が挿入されました。

自分で用意したSVGアイコンを挿入

用意したSVGアイコンをテキストエディタで開きます。

表示されたSVGタグをコピーします。

「ここにSVGタグを直接入力できます。」と記入された赤枠内にSVGタグを貼り付けます。

SVGアイコンが表示されました。

PNG画像を挿入

※ 背景透過させた画像を挿入します。

対象のリンクボックスを選択後、 （設定）から、「ブロック」＞「アイコン設定」を開きます。

アイコン設定から、アイコンタイプで「画像」を選択後、「メディア」から画像を挿入します。

画像が挿入されました。

同じ要領で背景透過させたPNG画像を挿入します。

テキストを入力

「Text…」にコンテンツ名を入力します。

全ての「リンクボックス」にコンテンツ名を入力しました。

ボックスメニューのスタイルを変更

ボックスメニューを選択後、 （設定）から、「ブロック」＞「スタイル」を開きます。

「塗り」を選択すると、背景カラーがメインカラーになります。

個別に「リンクボックス」の背景カラーを設定

対象のリンクボックスを選択後、 （設定）から、「ブロック」＞「カラー設定」へと進み「背景カラー」を選択します。

「背景カラー」を選択後、下記画像の赤枠をクリックします。

下記画像の赤枠内にカラーコードを入力するとリンクボックスの背景カラーが変わります。

同じ要領で全てのリンクボックスの背景カラーを変更します。

個別でリンクボックスのテキストカラーを設定

テキストを全選択後、 （設定）から、「ブロック」＞「カラー設定」へと進み「テキストカラー」を選択します。

「テキストカラー」を選択後、下記画像の赤枠をクリックします。

下記画像の赤枠内にカラーコードを入力するとテキストカラーが変更されます。

同じ要領で他のテキストカラーも変更します。

リンクボックスにリンクを貼る

対象のリンクボックスを選択後、トップツールバーから「 （リンク）」を選択します。

「検索またはURLを入力」にURLを入力後「 」をクリックします。

新しいタブで開かせたい場合は「 新しいタブで開く」に「 」を入れます。

これで完成です。

【SWELL】ボックスメニューブロックの使い方【別パターンも紹介】

事前に用意した以下のボックスメニューの作り方を、これまでに解説してきた使い方と異なる点のみ解説します。

異なる点

異なる点①：用意するアイコン（または画像）サイズ

デフォルトでは、360×48サイズのアイコン（または画像）を挿入できます。

異なる点②：画像を正方形にトリミング

※ 既に長方形（横長）の画像を挿入しています。

 （設定）から、「ブロック」＞「アイコン設定」を開きます。

「画像を正方形にトリミング」を「OFF」にすると画像が全て表示されます。

あとの使い方は同じです。

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

その他の設定

「ボックス間の余白」と「アイコンサイズ」

上段のボックスメニュー（デフォルト）

下段のボックスメニュー（カスタマイズ）

列数

今回は以上です。