Menu
カテゴリー

【SWELL】リンクリストブロックの使い方【一括生成も行える】

悩む人

SWELLブロックのリンクリストの使い方を教えてほしいです。

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

本記事で解決できること

  • リンクリストブロックの使い方(スタイル、フォントサイズ、アイコン設定、アイコン位置、カラー設定)
  • リンクリストの一括生成方法

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

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

本記事の内容

【SWELL】リンクリストブロックの使い方【一括生成も行える】

完成例

ブログパーツとウィジェットの組み合わせで、サイドバーにリンクリストを設置することもできます。

あわせて読みたい
【SWELL】ブログパーツの使い方【確実に出来ることの幅が広がる】 SWELLのブログパーツの使い方を知りたいですか?本記事では、ブログパーツを使った実装例の紹介から実装例を元にブログパーツの登録方法や使い方の解説までしています。SWELLのブログパーツの使い方を知って出来ることの幅を広げたい方は是非ご覧ください。

スタイル

以下の2種類から選択することができます。

  • デフォルト
  • ボタン

デフォルト

以下のスタイルを選択することができます。

ボタン

以下のスタイルを選択することができます。

横並びにする

背景色を塗りつぶす

横並びにする背景色を塗りつぶす

角丸:0px ※ 0〜100pxで指定可能です。

設定

以下の順で解説していきます。

  • フォントサイズ
  • アイコン設定
  • アイコン位置
  • カラー設定

フォントサイズ

フォントサイズを変更することができます。

  • 1em 「1.5em」に変更しました。 ※ デフォルトは「1em」です。

アイコン設定

以下のアイコンを選択することができます。

アイコン位置

アイコンの位置を変更することができます。

カラー設定

ボーダー・アイコン・テキストカラー

(設定)の「ブロック」>「カラー設定」から「カラー」を選択します。

「テーマ」or「下記赤枠」から色を変更することができ、今回は「下記赤枠」を選択します。

色を変える方法には以下の3種類が用意されています。

  • RGB
  • HSL
  • Hex ※ 今回は、こちらを使用しました。

下記赤枠にカラーコードを入力すると、ボーダー・アイコン・テキストの色が同時に変わります。

ボタンの背景色

(設定)の「ブロック」>「カラー設定」から「カラー」を選択します。

「テーマ」or「下記赤枠」から色を変更することができ、今回は「下記赤枠」を選択します。

色を変える方法には以下の3種類が用意されています。

  • RGB
  • HSL
  • Hex ※ 今回は、こちらを使用しました。

下記赤枠にカラーコードを入力すると、ボタンの背景色が変わります。

ここから先は、リンクリストの挿入やリンクリスト項目の追加や移動、リンクリストの一括生成方法について解説していきます。

リンクリストを挿入

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

(ブロック挿入ツールを切り替え)から、「ブロック」>「SWELLブロック」>「リンクリスト」を選択します。

これで、リンクリストが挿入されました。

リンクリスト項目を追加

(リンクリスト項目を追加)をクリックで「リンクリスト項目」が追加されます。

リンクリスト項目を上下に移動

上下に移動させたいリンクリスト項目を選択後、「(上に移動)」「(下に移動)」でリンクリスト項目を移動できます。

一括生成

リンクリストを選択後、「一括生成」をクリックします。

一括生成させたい「カテゴリー」や「タグ」を選択後、「追加する」をクリックします。

選択したカテゴリーが一括で追加されました。

追加された時点でリンクも付いています。

News

以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。

今回は以上です。

※ PS:本記事で「悩みが解決した」「参考になった」方は、是非 (Twitter)でシェアをお願いします!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
本記事の内容