WordPressテーマ ▶︎ AFFINGER6 関連の記事 はこちらから!AFFINGER6

SWELL リンクリストブロックの使い方!面倒なナビゲーションも楽々設置

3402_swell-how-to-use-link-list-blocks-4

こんにちは "osaboo"osabooです。"@osaboo_Bot"

SWELLの「リンクリストブロック」の使い方を初心者さん向けに解説します。

  • SWELLブロック:リンクリスト

SWELL専用のブロックエディター機能です。
使い方はPタグ(段落)のように使えて、ブログパーツとウィジェットを組み合わせて使えば!何処にでも貼れるナビゲーションが出来ちゃいます!

サイト内の案内(ガイド)が簡単に作れる優れものですよ。^^/

この記事でわかること
  1. SWELLブロック:リンクリストについて…
    1. リストブロック表示パターン
  2. リンクリストブロックの使い方(操作手順)
    1. リンクリストブロックの挿入手順
    2. リンクリスト項目の設定(子ブロック)
    3. リンクリストの設定(親ブロック)
    4. リンクリストの一括生成
  3. リンクリストブロックの使い道▶︎ウィジェットとブログパーツを使う
  4. まとめ!

それではご覧ください。

目次 "Contents"

SWELLブロック:リンクリストについて…

複数のリンクをリスト化して並べる事ができるブロックです。
普通のリストとは違い、各項目がリンクになることを前提として組んでいます。

SWELL公式サイト:リンクリストブロックの使い方
  • 普通のリストを使ってリンクを並べるのは手間がかかりますが、リンクリストは各項目ブロック自体にリンク設定項目があるので設定が楽です。
  • リンク集であることを想定したスタイル・表示設定を用意していますので、普通のリスト使うのとは違う表現が可能です。

リストブロック表示パターン

主な設置イメージをご覧ください。

osaboo

リンク先はありませんが…実際に設置したサンプルです。

デフォルト

横並びにする・アイコン設定

ボーダーを付ける・アイコン設定

ボタン・アイコン設定・アイコン位置

ボタン・横並びにする・背景を塗りつぶす

その他にも ボタン形状の変更・カラー設定等いろいろできます。

リンクリストブロックの使い方(操作手順)

この章では、リンクリストブロックの使い方(操作手順)をご紹介します。

リンクリストブロックを投稿画面に追加する手順や 子ブロックと親ブロックのそれぞれの設定項目等をご紹介します。

リンクリストブロックの使い方(操作手順)
  • リンクリストブロックの挿入手順
  • リンクリスト項目の設定(子ブロック)
  • リンクリストの設定(親ブロック)

それでは順番に見ていきましょう。

リンクリストブロックの挿入手順

※ 作業は投稿画面(記事編集画面)での作業になります。

この章では、基本的なリンクリストブロックの挿入手順をご紹介します。

STEP
投稿(記事編集)画面を準備

Menu『WordPress管理>ダッシュボード>投稿>新規投稿を追加』をクリックします。

投稿画面が表示されます。
(編集する場合は、投稿一覧から対象記事を選択してください。)

リンクリストブロックを挿入する箇所をクリックします。

ブロック挿入ツール『+』を切り替えてブロックメニューを開きます。

STEP
ブロック挿入ツールを切り替え

『+』をクリックします。

投稿画面:ブロック挿入ツールを切り替え
STEP
ブロックタブメニューから『リンクリスト』を選択

ブロック挿入ツールが切り替わり 以下の画面が表示されます。

SWELLブロックから『リンクリスト』を選択して投稿画面に挿入します。

『リンクリスト』をクリックします。

4058-2
STEP
リンクリストブロック挿入完了

投稿画面に以下のようにリンクリストブロックが挿入されます。

リンクリストブロックサンプル

※ 子ブロックが選択されている状態で投稿画面に表示されます。

リンクリストブロックは親子構造になっており、親のlink-listの中に複数のlink-list-itemが並ぶ形になっています。表示に関する設定は親ブロック側にあります。

SWELL公式サイト:リンクリストブロックの使い方

リンクリスト項目の設定(子ブロック)

設定するリンク項目を選択すると以下のように青枠が表示されます。また、『リンクリスト項目アイコン』をマウスオーバーすると選択中のリンク項目が青枠で表示されます。

リンクリスト項目(子ブロック)

子ブロックが選択されている状態では 各々のリンクリスト項目が設定できます。
Pタグ(段落)とほぼ同じ設定項目です。

設定メニューの場所は、投稿(記事編集)画面の右側に表示される『設定>ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

投稿画面:設定

ブロックタブメニュー詳細

リンクリスト項目:右側ブロックタブメニュー
親ブロックを選択

親ブロックへの切り替えができます。

ブロック下の余白

ドロップダウンメニュー:ブロック下の余白

高度な設定

※ 新しいリンク項目を追加する場合は『+』をクリックします。

リンクリストの設定(親ブロック)

リンクリストの領域をクリックしてから リンクリストアイコンをクリックするとリンクリストが選択され、以下のようにリンクリストが青枠で表示されます。

リンクリストのスタイル(親ブロック)

※ リンク項目から上方向にカーソルキーを移動していくと子リンクから親リンクに切り替わります。◀︎ 親リンクが選択しにくい場合に便利です。

親ブロックが選択されている状態では リンクリストの設定ができます。
前述した「リストブロック表示パターン」を参考にお好みのスタイルにしてください。

設定メニューの場所は、投稿(記事編集)画面の右側に表示される『設定>ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

投稿画面:設定

ブロックタブメニュー詳細

リンクリスト右側ブロックタブメニュー
スタイル

デフォルト

ボタン

横並びにする

ボーダーを付ける

背景を塗りつぶす
(ボタンで切り替わり表示されるメニュー)

ボタン角丸
(ボタンで切り替わり表示されるメニュー)

設定

フォントサイズ

アイコン設定

アイコン位置

カラー設定

色:ドロップダウンメニュー

ブロック下の余白量

高度な設定

リンクリストの一括生成

リンクリストブロックの右下にある『一括生成』で「カテゴリ・タグ・タクソノミー」ごとのリンク生成が可能です。

リンクリストの一括生成

Menu『一括生成』をクリックすると以下の画面が表示されます。

『Category・Tag・Taxonomy』をクリックして生成項目を選択します。

一括生成:リンクリストの生成

タブをクリックするとそれぞれの詳細が表示されます。

リンクリストの生成:Gtegory
リンクリストの生成:Tag
リンクリストの生成:Taxonomy

操作は、メニューの作成と似ていて ワンタッチ感覚でリストができます。

メニューの設定がいまいち…?…おすすめです!
SWELLの基本設定:メニューの設定方法をご紹介しています。

リンクリストブロックの使い道▶︎ウィジェットとブログパーツを使う

リンクリストブロックは 投稿(記事)ページに使用する他にどのような使い道があるか?

Question

便利な機能!…というのはわかった!
でも、どこに…使ったら良いんだろう??

osaboo

ですよね!^^”

…ということで!使用例をご紹介しておきますね。

ブログパーツとウィジェットを使うことで…

トップページ・固定ページ・サイドバー・フッター等、リンクリストブロックを設置できる場所が広がります。

それでは、ブログパーツとウィジェットを使った設置手順をご紹介します。

STEP
リンクリストをブログパーツで作成する

Menu『WordPress管理>ダッシュボード>ブログパーツ>新規投稿を追加』をクリックします。

手順は以下の通りです。
  • リンクリストを作成します。
  • 『公開』をクリックします。
  • 確認して再度『公開』をクリックします。

❶ ❷ を処理します。

ブログパーツ:公開1

以下の画面に切り替わり 公開の確認が促されます。

❸ を処理します。

ブログパーツ:公開2

ブログパーツを公開するとブログパーツの登録が完了します。

SWELLのエディター機能:ブログパーツについて詳しくご紹介しています。
こちらも便利な機能でおすすめです。

STEP
ブログパーツの呼び出しコードをコピーする

Menu『WordPress管理>ダッシュボード>ブログパーツ』をクリックします。

ブログパーツの一覧が表示されます。

作成したリンクリストの呼び出しコードをコピーします。

ブログパーツ:呼び出しコード
STEP
設置したいにウィジェットにブログパーツの呼び出しコードをペーストする

Menu『WordPress管理>ダッシュボード>ウィジェット』をクリックします。

手順は以下の通りです。
  1. カスタムHTMLを選択します。
  2. 設置場所を指定します。(サンプルでは『共通サイドバー』としています。)
  3. 『ウィジェットを追加』をクリックします。

❶ ❷ ❸ を処理します。

ウィジェット:カスタムHTML→サイドバー

共通サイドバーにカスタムHTMLが追加されたら ブログパーツの呼び出しコードをペーストします。

手順は以下の通りです。

共通サイドバーを開いて追加した『カスタムHTML』を開きます。

  1. 内容の枠内に『プログパーツの呼び出しコード』をペーストします。
  2. 『保存』をクリックします。

❶ ❷ を処理します。

カスタムHTML:ブログパーツをペースト

以上で 共通サイドバーにリンクリストブロックが設置されました。

確認 ページを確認すると…以下のようになっている筈です。

サイドバーにリンクリストブロック設置完了イメージ

工夫次第で使い道は、盛り沢山です。
ご紹介した参考例からアイデアを膨らませていただけれは…^^/ 頑張りどころです!

※ SWELL公式マニュアルはこちらからご覧いただけます。「使い方の様子を動的に確認できます」

まとめSWELL リンクリストブロックの使い方!面倒なナビゲーションも楽々設置

SWELL リンクリストブロックの使い方をご紹介しました。

リンクリストブロックは、Pタグ(段落)と同じ操作で装飾や余白設定ができて使い勝手の良いエディター機能です。
ウィジェットに設置することで「トップページ・サイドバー・フッター」等のナビゲーションとして使用できます。

サイトの導線を作るためにはとても便利な機能です。是非、リンクリストブロックを活用してみてください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

  • URLをコピーしました!
  • URLをコピーしました!
目次 "Contents"