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

当ページのリンクには広告が含まれています。
初心者ブロガー

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

こういった疑問にお答えします。

本記事で学べること

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

是非、最後まで読んでみて下さい。

本記事の内容

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

完成例

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

合わせて読みたい記事

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

スタイル

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

  • デフォルト
  • ボタン

デフォルト

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

ボタン

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

横並びにする

背景色を塗りつぶす

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

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

設定

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

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

フォントサイズ

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

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

アイコン設定

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

アイコン位置

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

カラー設定

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

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

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

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

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

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

ボタンの背景色

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

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

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

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

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

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

リンクリストを挿入

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

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

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

リンクリスト項目を追加

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

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

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

一括生成

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

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

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

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

以上で解説を終わります。

最後まで読んで頂きありがとうございました。

本記事が読者の疑問を解決する役に立つと幸いです。

また、色々と触ってみることで実装の幅を増やして頂ければと思います。

おわり。

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

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