![](https://hrdyuic.com/wp-content/uploads/8335d558d151e09a696fb916ebabfbd5.png)
SWELLブロックのリンクリストの使い方を教えてほしいです。
こういった悩みにお答えします。
本記事で解決できること
- リンクリストブロックの使い方(スタイル、フォントサイズ、アイコン設定、アイコン位置、カラー設定)
- リンクリストの一括生成方法
是非、最後までご覧ください。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
【SWELL】リンクリストブロックの使い方【一括生成も行える】
完成例
ブログパーツとウィジェットの組み合わせで、サイドバーにリンクリストを設置することもできます。
![](https://hrdyuic.com/wp-content/uploads/5e18666b9af6b257706b2ccb75548624.jpg)
![](https://hrdyuic.com/wp-content/uploads/5e18666b9af6b257706b2ccb75548624.jpg)
![](https://hrdyuic.com/wp-content/uploads/brian-kostiuk-S4jSvcHYcOs-unsplash.jpg)
![](https://hrdyuic.com/wp-content/uploads/brian-kostiuk-S4jSvcHYcOs-unsplash.jpg)
スタイル
以下の2種類から選択することができます。
- デフォルト
- ボタン
デフォルト
以下のスタイルを選択することができます。
横並びにする
ボーダーをつける
ボタン
以下のスタイルを選択することができます。
標準
横並びにする
背景色を塗りつぶす
横並びにする
背景色を塗りつぶす角丸:0px ※ 0〜100pxで指定可能です。
設定
以下の順で解説していきます。
- フォントサイズ
- アイコン設定
- アイコン位置
- カラー設定
フォントサイズ
フォントサイズを変更することができます。
- 1em 「1.5em」に変更しました。 ※ デフォルトは「1em」です。
アイコン設定
以下のアイコンを選択することができます。
アイコン位置
アイコンの位置を変更することができます。
カラー設定
ボーダー・アイコン・テキストカラー
(設定)の「ブロック」>「カラー設定」から「カラー」を選択します。
![](https://hrdyuic.com/wp-content/uploads/d880ddc783476966507ef565908965df-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/d880ddc783476966507ef565908965df-1.jpg)
「テーマ」or「下記赤枠」から色を変更することができ、今回は「下記赤枠」を選択します。
![](https://hrdyuic.com/wp-content/uploads/e843b83e1c6f521b650c09209a9bee41.jpg)
![](https://hrdyuic.com/wp-content/uploads/e843b83e1c6f521b650c09209a9bee41.jpg)
色を変える方法には以下の3種類が用意されています。
- RGB
- HSL
- Hex ※ 今回は、こちらを使用しました。
下記赤枠にカラーコードを入力すると、ボーダー・アイコン・テキストの色が同時に変わります。
![](https://hrdyuic.com/wp-content/uploads/2da3b9467d5d61c5ac5ac075fbed72fc.jpg)
![](https://hrdyuic.com/wp-content/uploads/2da3b9467d5d61c5ac5ac075fbed72fc.jpg)
ボタンの背景色
(設定)の「ブロック」>「カラー設定」から「カラー」を選択します。
![](https://hrdyuic.com/wp-content/uploads/ae8d62bafe9affb8ee1446d1e4d9f0c6.jpg)
![](https://hrdyuic.com/wp-content/uploads/ae8d62bafe9affb8ee1446d1e4d9f0c6.jpg)
「テーマ」or「下記赤枠」から色を変更することができ、今回は「下記赤枠」を選択します。
![](https://hrdyuic.com/wp-content/uploads/9bc3454dac558a8bfaf82c9b46c7da28.jpg)
![](https://hrdyuic.com/wp-content/uploads/9bc3454dac558a8bfaf82c9b46c7da28.jpg)
色を変える方法には以下の3種類が用意されています。
- RGB
- HSL
- Hex ※ 今回は、こちらを使用しました。
下記赤枠にカラーコードを入力すると、ボタンの背景色が変わります。
![](https://hrdyuic.com/wp-content/uploads/a7d29e47df7825a23e14a79e3aaca956.jpg)
![](https://hrdyuic.com/wp-content/uploads/a7d29e47df7825a23e14a79e3aaca956.jpg)
ここから先は、リンクリストの挿入やリンクリスト項目の追加や移動、リンクリストの一括生成方法について解説していきます。
リンクリストを挿入
管理画面メニューから、「投稿」>「新規投稿を追加」を選択します。
![](https://hrdyuic.com/wp-content/uploads/18341ceb9d7a5110edaa171291a6769e.jpg)
![](https://hrdyuic.com/wp-content/uploads/18341ceb9d7a5110edaa171291a6769e.jpg)
(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リンクリスト」を選択します。
![](https://hrdyuic.com/wp-content/uploads/f8cc06b46c65e52868a0b21fed322d7f-1.jpg)
![](https://hrdyuic.com/wp-content/uploads/f8cc06b46c65e52868a0b21fed322d7f-1.jpg)
これで、リンクリストが挿入されました。
リンクリスト項目を追加
(リンクリスト項目を追加)をクリックで「リンクリスト項目」が追加されます。
![](https://hrdyuic.com/wp-content/uploads/ec042e8ad40e88f268867cdcb6681455.jpg)
![](https://hrdyuic.com/wp-content/uploads/ec042e8ad40e88f268867cdcb6681455.jpg)
リンクリスト項目を上下に移動
上下に移動させたいリンクリスト項目を選択後、「
(上に移動)」「 (下に移動)」でリンクリスト項目を移動できます。![](https://hrdyuic.com/wp-content/uploads/8a1a3cb17398896f5b14491b9130ccbb.jpg)
![](https://hrdyuic.com/wp-content/uploads/8a1a3cb17398896f5b14491b9130ccbb.jpg)
一括生成
リンクリストを選択後、「一括生成」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/c8f97121762a2127c6fd2ee507e459f6.jpg)
![](https://hrdyuic.com/wp-content/uploads/c8f97121762a2127c6fd2ee507e459f6.jpg)
一括生成させたい「カテゴリー」や「タグ」を選択後、「追加する」をクリックします。
![](https://hrdyuic.com/wp-content/uploads/ea5d635561e9275cffb5c4a71a2fac99.jpg)
![](https://hrdyuic.com/wp-content/uploads/ea5d635561e9275cffb5c4a71a2fac99.jpg)
選択したカテゴリーが一括で追加されました。
![](https://hrdyuic.com/wp-content/uploads/35578904c7fc3c523aea1b74fffe880c.jpg)
![](https://hrdyuic.com/wp-content/uploads/35578904c7fc3c523aea1b74fffe880c.jpg)
追加された時点でリンクも付いています。
![](https://hrdyuic.com/wp-content/uploads/6a5451370e161654ad3abe824b19cfeb.jpg)
![](https://hrdyuic.com/wp-content/uploads/6a5451370e161654ad3abe824b19cfeb.jpg)
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
![](https://hrdyuic.com/wp-content/uploads/text-editor-1794110_1920.jpg)
今回は以上です。