Swell特有のブロックエディタの使い方を調べてみたいと思います。
Swellブロックの種類
Swellブロックには22種類のブロックが有ります。
- リスト入りグループ
- アコーディオン
- バナーリンク
- ボックスメニュー
- SWELLボタン
- キャプションボックス
- リッチカラム
- 説明リスト（DL）
- FAQ
- フルワイド
- ステップ
- タブ
- ABテスト
- 広告タグ
- ふきだし
- ブログパーツ
- リンクリスト
- 投稿リスト
- 関連記事
- 制限エリア
- 商品レビュー
- RSS
リスト入りグループ
リスト入りグループは、リストをグループ化して色々なレイアウトを施せるようにまとめたブロックです。
＋（ブロック追加）をクリックして、検索でリストと入力すると、リスト入りグループが表示されますので選択します。
すると下記の様に表示されます。
ボーダー設定で4種類のボーダーが選べます。
16種類のスタイルが選べます。
テキスト色や背景色の変更の変更も出来ます。
又、文字サイズの変更も出来ます。
アコーディオン
コンテンツを折りたたみ式のセクションに整理し、表示/非表示を切り替えることができる便利な機能です。
アコーディオンで検索して選択します。
「テキストを入力…」と表示された味気ないブロックが表示されます。
テキストを入力と記述されている箇所にアコーディオンのタイトル名を記述します。
その下の段落部分に中身を記述します。
4種類のスタイルが選べます。
アコーディオンの右側にあるアイコンのセットが選べます。
タイトルのHTMLタグも選択できます。
バナーリンク
画像にテキストを乗せてリンクを作成する機能を提供し、これにより内部ページや外部リンクへのバナーを簡単に作成することができます
ブロックを追加して、バナーで検索します。
表示されたバナーリンクをクリックします。
画像ブロックと見た目の変わらないブロックが表示されます（ブロックツールバーが若干違います）。
画像を選択すると画像上に、タイトルとサブテキストと表示された画像が表示されます。
タイトルとサブテキストを入力します。
- バナーの高さ（PC)
- バナーの高さ（Mobile）
- ブラー効果の有無
- 影の有無
- バナー（画像）上に配置するテキストのカラー設定
- バナー（画像）の上に被せるオーバーレイカラーの選択
- オーバーレイカラーの不透明度の設定
画像サイズを選択して、ALTテキストを入力します（SEO的にもALTテキストは入力した方がいいです）。
画像をクリックしたら表示されるURLを設定します。
ボックスメニュー
ボックスメニューは、サイト内におしゃれなナビゲーションボックス（ボックスナビ）を簡単に作成することができます。
「ボックス」と入力して、検索するとボックスメニューとキャプションボックスが検索されますので、ボックスメニューをクリックします。
アイコンの下にTextと表示された枠が4つ生成されました。
- アイコンとテキストの縦並び、横並びが変更できます。
- ボックス間の余白が設定できます。
- アイコンサイズを変更でいます。
- PC、タブレット、スマホによる表示列数を変更することが出来ます。
ボックスメニューの中の1つ（リンクボックス）をクリックすると、それぞれのリンクボックスの設定が出来ます。
- アイコンタイプがSVGと画像から選べます。
- アイコン選択をクリックすると、色々なアイコンが選べます。
SWELLボタン
SWELLボタンは、WordPress標準のボタンよりもオシャレで高機能なボタンを作成することができます
- ボタンを追加（＋）をクリックして、ボタンを検索します。
- SWELLボタンをクリックします。
- 「テキストを入力…」と表示されたボタンが表示されました。
- その下には、リンク先：未設定の文字がみえます。
- 5種類のボタンがあります。
- 標準的なノーマルボタン
- ちょっと浮き出た感じの立体ボタン
- キラッと光る感じのキラッとボタン
- ボタン枠と文字だけで、中が透明のアウトラインボタン
- SWELL特有のMOREボタン
- ボタンのサイズが小、標準、大、カスタムから選ぶ事が出来ます。
- ボタン文字のフォントサイズも変更できます。
- ボタンのカラーも変更できます。
- 尚、基本的なボタンカラーの設定変更は、SWELL設定から行うことも出来ます。
これは、SWELL特有の機能でボタンのクリック率が計測できます。
とても便利です。
ボタンのクリック率を計測することが出来ます。
- ボタンにアイコンを付与することが出来ます。
- 最初にアイコン選択で、アイコンの文字の前後に付与したいアイコンを選択します。
- アイコンを文字の前につけるか、後ろに付けるかをアイコンの位置で選択します。
- アイコンサイズも変更することが出来ます。
- 「リンク先：未設定」をクリックします。
- URLを入力します。
- 同じサイト内なら検索できます。
- リンクREL属性を設定します。
キャプションボックス
- ブロックの追加（＋）で、キャプションと入力
- キャプションボックスを選択
「タイトル…」と表示されたキャプションボックスが表示されます。
タイトルをどのように表示するかによって7つに分かれています。
- デフォルトでは、枠の上部いっぱいに表示されています。
- 小 は、タイトルの背景色が小です
- 枠上 は、上部枠線に重なって表示されます
- 枠上2 は上記のタイトルに背景色がついています。
- 枠内は、枠の内側に背景色のあるタイトルが配置されます。
- 浮き出し はデフォルトと見た目あまり変わりませんが、枠の外部に影があります。
- 内テキストは、枠の内側のコンテンツの上部に配置されています。
タイトルの文字の前後にアイコンを設置できます。
- アイコン選択でアイコンを選択します。
- アイコンの位置をタイトルの前に付けるか、後ろに付けるかで、左、右を選択します。
- アイコンのサイズを調整します。
リッチカラム
SWELLのリッチカラムブロックは、WordPress標準のカラムブロックを便利にした上位互換機能です。
ブロックを追加して、リッチ又は、カラムと検索してリッチカラムを選択します。
ブロックが2つ作成された状態で、リッチカラムブロックが表示されます。
デフォルト、ボーダー、シャドウで選べますが、特に説明は不要だと思われますので、省略します。
横スクロールで表示するにチェックを入れない状態が標準です。
- 1行に最大8列表示できます。
- PC、タブレット、スマホ毎に1行に表示する列数を変更できます。
- スマホでも最大8列表示できます。
横スクロールで表示するにチェックを入れると、PC、タブレット、スマホで、各カラム毎の横幅が設定できるようになります。
各カラム項目には、好きなブロックを入れることが出来ます。
説明リスト（DL）
説明リストブロックは、何かを説明する際に便利なブロックで、難しい単語や言葉を「分かりやすく」解説することができます
ブロックを追加＞説明で検索＞説明リストを選択
基本的にタイトルと説明文というような構成だと思います。
スタイルは、デフォルト、左に線、横並び、縦並び表があります。
デフォルト
左に線
横並び
縦並び表
FAQ
ブロックの追加＞fと入力して検索＞FAQを選択
- QとAのセットがデフォルトで２個生成されます。
- 基本的に、Qに質問事項、Aに解凍を記述します。
スタイルは、デフォルト、線あり、ボックス、ストライプの４種類があります。
- 構造化データを出力する：検索結果にリッチリザルトを表示したいときにONにしてくださいとあるが、試していないので、不明です。
- タイトルのHTMLを変更できます。（dl、h2〜h6）
- QAアイコンの形を変えられます。（四角、角丸、丸）
- QAアイコンの色を各々６種類ずつ変更できます。
フルワイド
このフルワイドを覚えれば、サイトのデザインはほぼ自由自在です。
絶対にマスターしましょう。
ブロックを追加＞フル又は、ワイドで検索して＞フルワイドブロックを選択
見出しと表示されたグレイのブロックが表示されます。
- コンテンツの横幅を記事幅、サイト幅、フルワイドから選択できます。
- 上下のパディング量をPC用とスマホ用で変更することが出来ます。
テキストカラーを変更できます。
背景色と背景色の不透明度を変更できます。
画像URLを指定して背景画像を設定できます。
上下の境界線の形状を斜線、円、波、ジグザグで設定できます。
ステップ
ステップブロックを使うと、作業の手順や契約の流れなどを順序ごとにわかりやすく説明する事が出来ます。
新規ブロック＞「ステップ」で検索＞ステップを選択
２つのステップがデフォルトで生成されます。
丸い枠内にSTEPの文字と数字が表示されています。
タイトルが大きく中央に配置され、その上にSTEPの文字と数字が配置されています。
STEPと数字が小さく表示されています。
- 「STEP」の文字の変更
-
文字を手順に変更しました。
- 始まり番号の変更
-
５に変更しました
- ステップ番号の変更
-
四角形に変更しました。
タブ
タブは、複数のコンテンツをタブ形式で整理し、表示する機能を提供します
新規ブロック＞タブで検索＞表示されたタブをクリック
タブ１、タブ２という２つのタブを持つブロックが生成されました。
デフォルトのタイプです。
ふきだしタイプのタブスタイルです。
下線タイプのタブスタイルです。
ここは、特に変更する必要は無いと思います。
タブサイズの設定です。下記の種類があります。
- テキストに合わせる
- 固定幅（PCは25％、スマホは50％）
- 端まで並べる
- 端まで並べる（均等幅で）
- ナビをスクロール可能にする
ふきだし
新規ブロック＞ふきだしで検索＞ふきだしアイコンを選択
ふきだしの中に文字を入力します。
5種類の中からふきだしのカラーを選択します。
- ふきだしの形
-
「発言」と「心の声」の2種類があります。
- ふきだしの向き
-
左向きと右向きが選択できます。
- ふきだしの線
-
ふきだしの枠線の有無を選択します。
- アイコンの丸枠
-
枠なしと枠ありを選べます
- スマホでのテキストとアイコンの並び
-
横並びと縦並びが選択できます
その他のブロック
その他のブロックは勉強不足なので、使う機会があったら又ご紹介しますが、以下はChatGPTからの引用ですので、間違いがあったら、ごめんなさい。
ABテスト
SWELLのABテストブロックは、特定の目的のために設計された特別なブロックで、主に比較検証や効果測定を行う際に利用されます。このブロックは、2つの異なるブロック（コンテンツ）をランダムに表示させる機能を提供し、それによりユーザーの反応を比較分析することができます。
- Bテストブロックを利用することで、異なる広告タイプや訴求の効果を測定し、どちらがより効果的であるかを判断することができます
- このブロックは、SWELL専用の「広告タグ」や「SWELLボタン」ブロックと併用することで、クリック率を計測し、比較検証を行うことが可能です
- 簡単に「AとB」の箱に検証したい要素（例えばボタンやテキスト）を入れるだけで、ABテストを開始することができます
- ABテストブロックは、「Aブロック」と「Bブロック」に分かれており、それぞれに自由にブロックを入力することができ、またAブロックとBブロックそれぞれが表示される割合を調節することも可能です
これらの機能により、SWELLのABテストブロックは、サイト運営者にとって非常に便利なツールとなり、効果的な広告やコンテンツの検証をサポートします。
広告タグ
SWELLの広告タグは、WordPressテーマ「SWELL」の機能の一部で、ウェブサイト上の広告管理を助けるものです。この機能を利用すると、広告の新規追加や編集が簡単にでき、さらに広告のクリック数や表示回数を計測できるため、広告のパフォーマンスの分析や改善に役立ちます。
- WordPressの管理画面から「広告タグ」をクリックして広告タグの管理画面を開きます。
- 「新規追加」をクリックするとタグの編集画面が表示され、ここで広告タグの詳細を設定します。
- 以下の項目を記入または選択します
- タグ名: 任意のタグ名を記入します。
- 広告タイプ: テキスト型、バナー型、アフィリエイト型、Amazon型、ランキング型のいずれかを選択します。
- 広告ボックスの枠: 「なし」か「あり」かを選択します。
- 広告タグ: 各ASPなどで提供されているHTML形式などの広告タグをコピペします。
- 評価: 星の数を選択します。
- 表示名: 広告に表示する名前を記入します。
- 価格: 商品の価格を記入します。
さらに、SWELLの広告タグ機能を利用することで、広告のクリック率を計測することが可能で、クリック率やPV（ページビュー）などのデータを簡単に取得できるため、広告の効果測定や分析に利用できます。
また、SWELL広告タグは、広告の一括管理、クリック数の計測、そしてABテストの実施が可能であり、これらのメリットを得ることができます。
さらに、広告タグ管理機能を利用することで、さまざまなデザインの広告リンクを作成して登録することができ、これらの広告のクリック数などを計測し、ABテストブロックと組み合わせて分析や改善につなげることも可能です。
ブログパーツ
SWELLのブログパーツ機能は、事前に登録しておいたブロックの組み合わせや文章を他の場所でも簡単に呼び出すことができる機能です。
- この機能を利用することで、さまざまな記事で繰り返し使うような表現を登録しておくことで、毎回コピペをせずに済むようになり、記事執筆の効率化が図れます。
- ブログパーツは、SWELL独自のブロックで、複数のページや場所で使い回したいコンテンツをあらかじめ登録しておくことで、自由に呼び出すことができます。
- また、ブログパーツはショートコードで様々な場所に呼び出すことができ、記事内で使う方法、ウィジェットで使う方法、メインビジュアルで使う方法、カテゴリー、タグページで使う方法、ブロックパターンとして使う方法、著者アーカイブページで使う方法などがあります。
- また、SWELLのブログパーツ機能とWordPressの「再利用ブロック」機能は似ているが、いくつかの重要な違いがあります。
- 再利用ブロックはWordPress側で提供されている機能で、主に記事内での使用がメインで、ショートコードが使えない（プラグインが必要）です。
一方、SWELLのブログパーツはSWELL専用の機能で、記事以外の場所でも使用可能で、ショートコードが使える点が異なります。これにより、ブログパーツは記事以外のウィジェット、カテゴリーページ、メインビジュアル、タグページ、CTA（Call To Action）などでも使用することができます。
リンクリスト
SWELLのリンクリストブロックは、WordPressのSWELLテーマにおいて、複数のリンクを箇条書き形式でまとめて表示する機能を提供するブロックです。このブロックは、SWELLのバージョン2.7.1から利用可能となっており、ウェブページ上のナビゲーションの作成や、記事、カテゴリーなどへの導線を簡単に作ることができます。
リンクリストブロックは、特にトップページやフッター、サイドバーなどのウィジェットに配置し、複数のリンク項目を一括で作成することができます。また、このブロックはブロックパターンも用意しており、さまざまなデザインのリンクリストを作成することが可能です。
- デフォルトスタイルとボタンスタイルの2種類のデザインから選択できます。デフォルトスタイルではリンクを縦に並べて表示し、ボタンスタイルではリンクをボタンとして表示します。また、リンクを横並びにすることも可能です。
- リストの各項目にアイコンを設定することができます。
- デフォルトスタイルの場合はリストにボーダーを付けることができ、ボタンスタイルの場合はボタンのカラーを塗りつぶすかどうかを設定できます。
これらの設定により、ウェブサイトのデザインに合わせてリンクリストブロックの見た目をカスタマイズすることができます。
また、WordPress標準のリストブロックでも同様のリンクリストを作成することは可能ですが、SWELLのリンクリストブロックを使用することで効率よく、見た目の整ったリンク集を作成することができます。
投稿リスト
SWELLの投稿リストブロックは、WordPressのSWELLテーマで使用できる専用ブロックで、カテゴリー、タグなどを指定して特定の投稿リストを簡単に表示することができます。
このブロックは、記事の一覧を取得し、表示する投稿の数やカテゴリー、タグの指定、記事IDの指定など、細かい設定を行うことができる高機能なブロックと評されています。
また、ブログ効率化を実現するための使いやすいブロックとも評されており、デザイン性抜群のサイトを作成することが可能です。
具体的な設置方法については、以下の手順を参照してください
- エディター画面の「+」アイコンをクリックするとクイックインサーターが表示され、検索または「すべて表示」で「投稿リスト」を選択すると「投稿リストブロック」が設置されます。
- また、段落ブロックの最初に /postlist と入力すると「投稿リストブロック」を呼び出すことができます。
- 投稿ブロックリストのレイアウトや表示順の設定は右サイドバーの「Settings」タブで行います。
- 表示する投稿数を設定でき、最大24件まで表示することが可能です。
これらの設定により、必要に応じて投稿リストの表示をカスタマイズし、効率的かつ見栄えの良い投稿リストを作成することができます。
関連記事
SWELLの関連記事ブロックは、WordPressサイトの記事やページに関連するリンクをブログカード形式で表示するためのブロックです。
このブロックは特に、内部リンクや外部リンクを整理し、視覚的に魅力的な方法で表示するのに役立ちます。以下は、関連記事ブロックの主な特徴と使用方法についての詳細です。
- SWELLでは、関連記事へのリンクをブログカードとして表示するためのショートコードを提供しています。このショートコードは、ブロックエディター（Gutenberg）内で「関連記事ブロック」として利用できるようになっています。
- 関連記事ブロックは、内部リンクと外部リンクをブログカードとして記事に挿入することができる特別なブロックエディター機能を提供します。
- 関連記事ブロックの挿入手順、内部リンクと外部リンクのブログカード化、共通設定、記事ごとの関連記事設定、およびブログカードのエディター設定（デフォルトの表示設定）など、関連記事ブロックのさまざまなカスタマイズと設定オプションがあります。
- 関連記事ブロックを使用することで、関連する記事へのリンクを含むブログカードを簡単に作成することができます。
これらの特徴と設定オプションにより、SWELLの関連記事ブロックは、サイトのコンテンツを関連付けて整理するのに非常に便利で、視覚的に魅力的な方法でリンクを表示するのに役立ちます。
制限エリア
SWELLの制限エリアブロックは、WordPressのSWELLテーマで利用可能な特別なブロックで、特定のコンテンツを制限するための機能を提供します。以下の概要と使用方法を提供します：
- SWELLの制限エリアブロックは、2021年9月11日にリリースされたバージョン2.5.1で追加され、SWELLテーマのオリジナルブロックであることが明らかにされています。
- このブロックは、表示期間を制限する機能、ログイン状況に応じて制限エリアを作成する機能、およびページの種類に基づいてコンテンツを制限する機能の3つの主要な役割を果たします。
- 制限エリアブロックを使用すると、期間限定の投稿やキャンペーン、ログイン制限など、さまざまな制限を簡単に設定できます。
- WordPressエディタで記事を作成または編集する際に、メニューから「制限エリアブロック」を選択し、「＋」アイコンをクリックして制限エリアブロックを設置します。
- 制限エリアブロック内に期間限定で表示したい記事をコピー＆ペーストし、期間を設定します。
- 期間設定は右側の「表示期間を設定する」メニューから開始と終了の日付を選択することで行えます。
- これにより、指定した期間だけ制限エリアブロック内のコンテンツが表示され、他のブロックは常に表示されるようになります。
これらの設定により、SWELLテーマを使用しているユーザーは、期間限定のキャンペーンやセール、ログイン制限など、さまざまな制限を効果的かつ効率的に実装できます。
製品レビュー
SWELLの製品レビューブロックは、商品やサービスのレビューを効果的に表示し、構造化データを出力するための特別なブロックです。このブロックは、SWELLテーマのバージョン2.6.8で2022年8月15日に追加されました。製品レビューブロックの主な特徴と利点は以下の通りです。
- 構造化データの出力
-
ブロックを使用することで、商品のメリット、デメリット、星評価などを構造化データとして出力することが可能です。
- ボックス表示
-
商品のメリットとデメリットを記事内にボックス形式で表示することができます。
- Google検索結果のリッチリザルト
-
構造化データを出力することで、その内容がGoogle検索結果のリッチリザルトとして表示される可能性があり、これにより検索結果上でのクリック率が向上する可能性がある
- 設定とカスタマイズ
-
商品レビューブロックの設定は簡単で、必須項目と任意項目の設定があり、リッチリザルトテストで確認することも可能です。
このブロックは特に、製品やサービスのレビュー記事を書く際に非常に便利で、構造化データを利用してGoogle検索結果にリッチリザルトを表示させることができるため、SEO効果も期待できます。
また、設定が簡単で使いやすいため、多くのユーザーに推奨されています。
さらに詳細な情報や設定方法については、以下のリンクからアクセスできる記事が参考になるかもしれません
- SWELLの商品レビューブロック｜構造化データ出力とボックス表示ができる便利なブロック
- 【SWELL】商品レビューブロックの設定と使い方
- SWELL商品レビューブロックの使い方と広告タグ
- 【SWELL】超便利な専用ブロック16個の使い方を丁寧に解説
RSS
SWELLのRSSブロックは、特定のメディアの最新情報を自動的に取得して表示することができるブロックです。このブロックは主にまとめブログで使用されており、通常のブログ運営では使用頻度は低いとされています。
RSSブロックを利用することで、RSSフィードのリストをSWELLのデザインに合わせた形で最大10件まで表示することが可能であり、設定できる内容は「投稿リストブロック」と共通する点が多いです。
- RSSブロックを呼び出す
- WordPressエディタで、SWELLのRSSブロックアイコンをクリックして呼び出します。
- RSSフィードのURLを取得する
- RSSアイコン上で右クリックし、「リンクをコピー」を選択してRSSフィードのURLを取得します。
- リンクを入力して反映させる
- 取得したリンクをRSSブロックの設定に入力し、記事が正しく取得できることを確認します。
また、RSSブロックの設定では、投稿数、レイアウト、表示設定、カラム数などを好みに応じて設定することができます。
RSSブロックは、お好みのRSSフィードのURLを入力することで、記事内にRSSフィードを表示するブロックです。ただし、一部のユーザーによれば、RSSフィードを使っていないため、このブロックは利用されていないとのこともあります。
RSSブロックを利用することで、新着情報を「自動配信、更新」する機能を利用することができます。
コメント