![](https://pasokon-kasegu.com/wp-content/uploads/2021/04/gimon.png)
SWELLって評判いいけど、 便利なのかな?記事を書くときに使えるブロックには、どんなものがあるんだろう?SWELL専用のブロックを見てみたい!
というお悩みを持つ方に、ぜひ読んでほしい記事です。
SWELLは読み手にも書き手にも優しいテーマとなっており、専用ブロックを活用しないのは「もったいない」。
だからこそ、そんな専用ブロックをご紹介したいというわけです。
- SWELL専用ブロックの種類
- SWELL専用ブロック16個の使い方
ユーザビリティアップや時短効果、結果的にアクセスや収益アップにつながりますので参考にしてみてください。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
- ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。
- 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味:筋トレ・食べ歩き・映画鑑賞など
SWELL専用ブロック16個の紹介
![SWELL専用ブロック16個](https://pasokon-kasegu.com/wp-content/uploads/2021/08/SWELLBlock16.jpg)
![SWELL専用ブロック16個](https://pasokon-kasegu.com/wp-content/uploads/2021/08/SWELLBlock16.jpg)
SWELL専用ブロックは、2021年8月現在で上記の16個です。
それぞれの概要と使い方を解説していきます。
1.RSS
RSSは、特定のメディア最新情報を自動的に取得して表示できるブロックです。。
主に、まとめブログで使用されているもので、通常のブログ運営では使用頻度は低いでしょう。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
必要なら使うといった感じです。
RSSの使い方
![RSS使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/RSS.png)
![RSS使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/RSS.png)
WordPress独自のRSSブロックとは違うので注意。SWELLの方がアイコン太め。
呼び出すと、こんなブロックが出てきます。
![RSS使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7c431c089757e82d06714dd95f358fde.png)
![RSS使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7c431c089757e82d06714dd95f358fde.png)
下記のようにRSSアイコンの上で、右クリックして「リンクをコピー」します。
![RSS使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/c13ea515ad4e9b1e30b9b1c151d9607f.png)
![RSS使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/c13ea515ad4e9b1e30b9b1c151d9607f.png)
取得したリンクを入力し、下記のように記事が取得できればOKです。
![RSS使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ecee581c738e604b3632db9107b79392.png)
![RSS使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ecee581c738e604b3632db9107b79392.png)
リンクだけになる場合は、右のブロック設定にある「RSSフィードのURL」に入力することで反映されます。
![RSS使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ddcffca359b774cf80ef2c9fa6ebe398.png)
![RSS使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ddcffca359b774cf80ef2c9fa6ebe398.png)
投稿数・レイアウト・表示設定・カラム数などは好みで設定してみましょう。
![RSS使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/f448527cdb46f6da14453aeec41a1d06.png)
![RSS使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/f448527cdb46f6da14453aeec41a1d06.png)
![RSS使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b1c7e2b8259ea11d626ee37e78e7e65e.png)
![RSS使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b1c7e2b8259ea11d626ee37e78e7e65e.png)
2.関連記事
関連記事は、ブログカード型やテキスト型の関連記事を表示できるブロックです。
![](https://pasokon-kasegu.com/wp-content/uploads/2021/05/37ec75a0818c0369c1d7483cae616c7d.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/05/37ec75a0818c0369c1d7483cae616c7d.png)
ブログ内の回遊性(他のコンテンツも見てもらいやすくなる)を高めるのに有効な手段です。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
ぜひ活用して頂きたいブロックです。
関連記事の使い方
![関連記事使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b8e7a3804eb262e33e49daf0e45ee937.png)
![関連記事使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b8e7a3804eb262e33e49daf0e45ee937.png)
呼び出すと、こんなブロックが出てきます。
![関連記事使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/f1f266c715636a12f0bccc747a393c9b.png)
![関連記事使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/f1f266c715636a12f0bccc747a393c9b.png)
IDは確認するのが面倒なので、表示させたい記事のキーワードを検索しましょう。
すると下記のように記事候補が出ますので、選択しましょう。
![関連記事使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/54660c50015ded9cca4df8ada0e6f34c.png)
![関連記事使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/54660c50015ded9cca4df8ada0e6f34c.png)
下記のように記事が表示できればOKです。
![](https://pasokon-kasegu.com/wp-content/uploads/2021/05/37ec75a0818c0369c1d7483cae616c7d.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2021/05/37ec75a0818c0369c1d7483cae616c7d.png)
テキストリンクだけで表示したい場合は、右のブロック設定から「テキストリンクで表示する」にチェックを入れればOKです。
![関連記事使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2ee8246f550f351743fa8ae680466812.png)
![関連記事使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2ee8246f550f351743fa8ae680466812.png)
連続で表示させたい場合は、下に同じブロック追加で設定すれば下記のように増やせます。
3.投稿リスト
投稿リストは、ブログ内の記事を任意の条件で表示できるブロックです。
記事下に関連記事コンテンツがあるので、本文に投稿リストを入れることは少ないです。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
本文に入れるとしたら関連記事くらいですが、状況次第では入れてもいいでしょう。
投稿リストの使い方
![投稿リスト使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3d9fc3329abd282252edff022694caee.png)
![投稿リスト使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3d9fc3329abd282252edff022694caee.png)
呼び出すと、こんなブロックが出てきます。
![投稿リスト使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/781584a5544d7ed93c8c92617c3daf1c.png)
![投稿リスト使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/781584a5544d7ed93c8c92617c3daf1c.png)
レイアウトや表示数など変更したい場合は、右のブロック設定「Setting」で好みの設定にしましょう。
これが正解って部分はないので、色々触ってみてください。
![投稿リスト使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1dc50edc80d016d4c589ed93398c5e42.png)
![投稿リスト使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1dc50edc80d016d4c589ed93398c5e42.png)
![投稿リスト使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/046f68811cffec4ad5cce0ce828aa5f6.png)
![投稿リスト使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/046f68811cffec4ad5cce0ce828aa5f6.png)
![投稿リスト使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cbffa03de156e0b21cfe4fbe0ca9f8ab.png)
![投稿リスト使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cbffa03de156e0b21cfe4fbe0ca9f8ab.png)
「Pickup」では、個別に表示させたい記事ID、カテゴリー、タグなどの設定ができます。
こちらも正解はないので、必要なら好みで表示させてみましょう。
![投稿リスト使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/688d3f548a30e37ec44a2cdacb39f5ca.png)
![投稿リスト使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/688d3f548a30e37ec44a2cdacb39f5ca.png)
![投稿リスト使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/893169d339139845d8022807c73ccdbf.png)
![投稿リスト使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/893169d339139845d8022807c73ccdbf.png)
![投稿リスト使い方8](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cb7adefa4d1da524fe6e7828d3dbe696.png)
![投稿リスト使い方8](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cb7adefa4d1da524fe6e7828d3dbe696.png)
4.ブログパーツ
ブログパーツは、事前に設定したブロックの組み合わせを簡単に呼び出せるブロックです。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35.png)
- ブログ実績:エンタメ系ブログ最高150万PV超&当ブログ最高10万PV超。
- 仕事:メインはWEBライター・ブログ運営・YouTube(1800人ほど)・Twitter運用代行も経験あり
- 趣味:筋トレ・食べ歩き・映画鑑賞など
CTA(コールトゥアクション)やプロフィールなど、ブロックを組み合わせてテンプレ化させておくと時短になります。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
僕はリード文の下のリード文は、ブログパーツで組み合わせて表示させています。
ブログパーツの作り方
ブログパーツは、事前にブロックを組み合わせて作って、それを呼び出す形で使用します。
![ブログパーツ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8c0d0b556027e678604f3eae849dcec7.png)
![ブログパーツ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8c0d0b556027e678604f3eae849dcec7.png)
![ブログパーツ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/836fe0fd01a8c2ceeb6fb7c0596b888e.png)
![ブログパーツ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/836fe0fd01a8c2ceeb6fb7c0596b888e.png)
![ブログパーツ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e0f93495c4fa4bb3accfe24d8ed48eed.png)
![ブログパーツ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e0f93495c4fa4bb3accfe24d8ed48eed.png)
呼び出すと、こんなブロックが出てきます。
![ブログパーツ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9d6df472bea0c49b41fb9757e6ec56d8.png)
![ブログパーツ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/9d6df472bea0c49b41fb9757e6ec56d8.png)
![ブログパーツ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/6289eacf4f373faa27359873291e5b1e-1.png)
![ブログパーツ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/6289eacf4f373faa27359873291e5b1e-1.png)
![ブログパーツ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/5a9a894abc007906d92689bbab043a37.png)
![ブログパーツ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/5a9a894abc007906d92689bbab043a37.png)
ブログパーツは、ブロックの呼び出し以外に、ショートコードでも呼び出せます。
さらに、設置したページが分かるようになっていますので、どこに設置しているか一目瞭然です。
![ブログパーツ使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/35c8363208ce1fbfe27db8d88a2234a9.png)
![ブログパーツ使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/35c8363208ce1fbfe27db8d88a2234a9.png)
5.ふきだし
ふきだしは、自身の心の声など記事のアクセントとして活用できるブロックです。
![](https://pasokon-kasegu.com/wp-content/uploads/2020/07/man-1283235_1280-e1593864780582.jpg)
![](https://pasokon-kasegu.com/wp-content/uploads/2020/07/man-1283235_1280-e1593864780582.jpg)
![](https://pasokon-kasegu.com/wp-content/uploads/2020/07/man-1283235_1280-e1593864780582.jpg)
メガネメガネ
自分や誰かとのやり取りを表現するのに、とても効果的なブロックです。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
僕は、ふきだしを多用するので重宝しています。
ふきだしの使い方
ふきだしは、エディターからでも設定できます。
ですが、毎回設定するのは面倒です。
使用頻度の高い「ふきだし」に関しては、事前に設定しておくと時短になります。
![ふきだし使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4a1ee9e1b592dfd7e6718ad54b2ad389.png)
![ふきだし使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4a1ee9e1b592dfd7e6718ad54b2ad389.png)
ふきだし名やデザインなどを、好みで設定したら公開します。
![ふきだし使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2bd7c6efae3c03fb69aabea546541861.png)
![ふきだし使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2bd7c6efae3c03fb69aabea546541861.png)
![ふきだし使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ded47100de9a5479ef58d7b9f538d53c.png)
![ふきだし使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ded47100de9a5479ef58d7b9f538d53c.png)
呼び出すと、こんなブロックが出てきます。
![ふきだし使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/750a965f7a52e24699e6911fe0969463.png)
![ふきだし使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/750a965f7a52e24699e6911fe0969463.png)
![ふきだし使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ed128727b3b5089dfb12a4dfa8b9a53c.png)
![ふきだし使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ed128727b3b5089dfb12a4dfa8b9a53c.png)
ふきだしセット・形・カラー・アイコン画像などの変更は、右のブロック設定でも簡単に変更できます。
![ふきだし使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/25abc8575ece558b83d106f4ffa0560b.png)
![ふきだし使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/25abc8575ece558b83d106f4ffa0560b.png)
![ふきだし使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/611dca9fed282a2a6e559719f09b178a.png)
![ふきだし使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/611dca9fed282a2a6e559719f09b178a.png)
![ふきだし使い方8](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b1b5acea5c44656f2cadabe17a9dc495.png)
![ふきだし使い方8](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b1b5acea5c44656f2cadabe17a9dc495.png)
6.広告タグ
広告タグは、「アフィリエイト型」などの広告を簡単に表示できるブロックです。
広告コードを、そのまま使用して作ることができ、簡単に見やすい広告タグを呼び出せます。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
見やすくて簡単に設置できるのでオススメです。
広告タグの作り方
広告タグは、事前に作って置く必要があります。
![広告タグ使い方](https://pasokon-kasegu.com/wp-content/uploads/2021/08/48f3317df928691cf37dc94b33437ff1.png)
![広告タグ使い方](https://pasokon-kasegu.com/wp-content/uploads/2021/08/48f3317df928691cf37dc94b33437ff1.png)
広告タイプは5種類あり、それぞれ独自の設定ができます。
難しい設定はないので、個々にプレビューを見ながら好きなように設定して公開しましょう。
![広告タグ使い方0](https://pasokon-kasegu.com/wp-content/uploads/2021/08/bc8b6a804997956fb9d11fd8cdcbcd5d.png)
![広告タグ使い方0](https://pasokon-kasegu.com/wp-content/uploads/2021/08/bc8b6a804997956fb9d11fd8cdcbcd5d.png)
![広告タグ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1756e488a670fc4a7253396b2ea1af1c.png)
![広告タグ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1756e488a670fc4a7253396b2ea1af1c.png)
呼び出すと、こんなブロックが出てきます。
![広告タグ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a5aa7feb4245471c151a27a02dfb6d9c.png)
![広告タグ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a5aa7feb4245471c151a27a02dfb6d9c.png)
![広告タグ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7fef0690d971604d6f8b1f4aec993672.png)
![広告タグ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7fef0690d971604d6f8b1f4aec993672.png)
![広告タグ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/365bed21937d51a2c5bb52936aa7361a.png)
![広告タグ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/365bed21937d51a2c5bb52936aa7361a.png)
テキスト型に関しては、ブロックで呼び出すことができません。
ダッシュボード→広告タグで表示される、ショートコードをエディターに貼り付ければ表示されます。
![広告タグ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/808ee42ffc667c2253194ca8a111de72.png)
![広告タグ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/808ee42ffc667c2253194ca8a111de72.png)
さらに広告タグでは、ボタンごとのクリック率も計測できます。
表示させる文章などの反応を見れますので、ぜひ活用してみてください。
![広告タグ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/0b2c661dc47463f1afd3ad9af16f8838.png)
![広告タグ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/0b2c661dc47463f1afd3ad9af16f8838.png)
7.タブ
タブは、1つのスペースで複数の情報を表示できるブロックです。
タブ1の内容
当ブログのTOPページにある「新着・人気記事」や「おすすめカテゴリー」も、タブを活用しています。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
個人的には記事内で活用することははないですが、複数の情報をスマートに表示したい時に便利です。
タブの使い方
![タブの使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1eef06557b513c5fefd85c9a007a4aaa.png)
![タブの使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/1eef06557b513c5fefd85c9a007a4aaa.png)
呼び出すと、こんなブロックが出てきます。
![タブの使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2b5962765558e7c6384bfa6653df64f9.png)
![タブの使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2b5962765558e7c6384bfa6653df64f9.png)
![タブの使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e65960e75601936b2a641020e5da550d.png)
![タブの使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e65960e75601936b2a641020e5da550d.png)
このままで良ければ、これで完了です。
スタイル・タブサイズ・カラー・ボーダーを変更したい場合は、右のブロック設定でできます。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
個人的にスタイルは「ふきだし」で、タブサイズはPC・SPともに「端まで並べる」がオススメです。
![タブの使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/47075b5f43075ae052f61f43b8149001.png)
![タブの使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/47075b5f43075ae052f61f43b8149001.png)
![タブの使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/72151e2bb2277bdf0adeba802b27a516.png)
![タブの使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/72151e2bb2277bdf0adeba802b27a516.png)
![タブの使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/22791d7c987460c49310819cff9bfe0e.png)
![タブの使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/22791d7c987460c49310819cff9bfe0e.png)
8.ステップ
ステップは、何らかの解説をする際に、流れを分かりやすく表示できるブロックです。
ステップを活用して
解説しています。
見出しで区切るのもいいですが、見出しが多くなりすぎてもゴチャゴチャします。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
ステップで解説すると、スッキリするのでオススメです。
ステップの使い方
![ステップ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/276236735559b76101e141382d05cc56.png)
![ステップ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/276236735559b76101e141382d05cc56.png)
呼び出すと、こんなブロックが出てきます。
![ステップ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/db6b2a549b2c12223acdb93382529ee0.png)
![ステップ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/db6b2a549b2c12223acdb93382529ee0.png)
![ステップ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b03c27f8383f02d6a1935d468b704c64.png)
![ステップ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/b03c27f8383f02d6a1935d468b704c64.png)
![ステップ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7061c92e278a906eb961f80f081ed9dd.png)
![ステップ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7061c92e278a906eb961f80f081ed9dd.png)
このデザインのままで良ければ、これで完了です。
タイトルデザインを変更したい場合
タイトル部分をクリックして、右のブロック設定で文字や色など変更できます。
![ステップ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/03a9f03ae533d3fb484318a95de62030.png)
![ステップ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/03a9f03ae533d3fb484318a95de62030.png)
ステップ全体のデザインを変更したい場合
ブロック右上の「親ブロックを選択」をクリックします。
![ステップ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/5dc29d5e3177cf6bccd158e892ff59c4.png)
![ステップ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/5dc29d5e3177cf6bccd158e892ff59c4.png)
全体的なデザイン変更ができます。
好みに応じて変更してみてください。
![ステップ使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/54969f9e8e08e3f6436a8b6d2e8a492c.png)
![ステップ使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/54969f9e8e08e3f6436a8b6d2e8a492c.png)
9.フルワイド
フルワイドは、 幅いっぱいにコンテンツを表示できるブロックです。
これがフルワイドです
こんな感じで、幅いっぱいに目立つコンテンツを簡単に設置できます。
こんな感じで背景画像も挿入できます
こんな感じの背景効果も可能(PCのみ)
これはFixed Background効果です。
背景画像を固定することで立体感を演出できます。
こんな感じの背景効果も可能(PCのみ)
これはパララックス効果です。
さりげない視差効果で立体感を演出できます。
通常の記事でも活用できますが、LPやTOPページで活用すると効果的です。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
オシャレなので、TOPページに設置しています。
フルワイドの使い方
![フルワイド使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8b951ad16fd07759d3d62bd5e4d1c088.png)
![フルワイド使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8b951ad16fd07759d3d62bd5e4d1c088.png)
呼び出すと、こんなブロックが出てきます。
![フルワイド使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7f3f9106a5c1dbc11f7ef5f8b46d7a8f.png)
![フルワイド使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7f3f9106a5c1dbc11f7ef5f8b46d7a8f.png)
![フルワイド使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e3b1708326441b757c752732de7e4b10.png)
![フルワイド使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e3b1708326441b757c752732de7e4b10.png)
このデザインのままで良ければ、これで完了です。
背景色のみでデザイン設定する場合
右のブロック設定でコンテンツサイズ・上下の余白・カラー・境界線の種類など好みで設定できます。
![フルワイド使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a3df5164f5d76b92a8bfee9cc898cc36.png)
![フルワイド使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a3df5164f5d76b92a8bfee9cc898cc36.png)
特に「境界線の形状」を変更すると、一気にオシャレ感が増すのでオススメです。
![フルワイド使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/f6f863b80fa0acdb5c827e7a5e6cefbb.png)
![フルワイド使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/f6f863b80fa0acdb5c827e7a5e6cefbb.png)
背景に画像を設定してデザイン設定する場合
背景色を設定せずに「背景画像の設定」から、背景画像を設定可能です。
境界線の形状を変更することができませんが、背景効果を追加することができます。
![フルワイド使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/443582cebea66552014803c85c94d2da.png)
![フルワイド使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/443582cebea66552014803c85c94d2da.png)
10.FAQ
FAQは、質問と回答を分かりやすく表示させることができるブロックです。
LPなどで活用できます。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
こういうQ&Aの表示は見やすくていいですね。
FAQの使い方
![FAQ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/FAQ.png)
![FAQ使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/FAQ.png)
呼び出すと、こんなブロックが出てきます。
![FAQ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/FAQ1.png)
![FAQ使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/FAQ1.png)
![FAQ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/0ad0fb2c78738be1c5c2c9faec8be2fb.png)
![FAQ使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/0ad0fb2c78738be1c5c2c9faec8be2fb.png)
このデザインのままで良ければ、これで完了です。
質問を追加したい場合は、下の「+」をクリックします。
デザイン変更したい場合は、右上の「親ブロックを選択」をクリックします。
![FAQ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2da464f1bf760acada6dd527565ba7e5-1.png)
![FAQ使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/2da464f1bf760acada6dd527565ba7e5-1.png)
スタイルやアイコンの形・カラーを好みで設定できます。
![FAQ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d206810a25bcfa4e653657ac82d5183c.png)
![FAQ使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/d206810a25bcfa4e653657ac82d5183c.png)
![FAQ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/37653578e722e70d036ac8002a45b257.png)
![FAQ使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/37653578e722e70d036ac8002a45b257.png)
11.説明リスト
説明リストは、タイトルと説明部分を分けて見やすく表示できるブロックです。
- ここにタイトル
-
ここに説明
- ここにタイトル
-
ここに説明
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
僕は使っていませんが、見やすく何かを説明する時に活用してみてください。
説明リストの使い方
![説明リスト使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4986460e6993313e52c709ed0cc7a4df.png)
![説明リスト使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/4986460e6993313e52c709ed0cc7a4df.png)
呼び出すと、こんなブロックが出てきます。
![説明リスト使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/556481f6e7697f0cd66305751289461c.png)
![説明リスト使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/556481f6e7697f0cd66305751289461c.png)
![説明リスト使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/10ad5a37bd8387cf67bb4dc32587c74f.png)
![説明リスト使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/10ad5a37bd8387cf67bb4dc32587c74f.png)
このデザインのままで良ければ、これで完了です。
説明を追加したい場合は、下の「+」をクリックします。
デザイン変更したい場合は、右上の「親ブロックを選択」をクリックします。
![説明リスト使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/41e3080ad304ab033d85375103bfee26.png)
![説明リスト使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/41e3080ad304ab033d85375103bfee26.png)
スタイルを好みで設定できます。
![説明リスト使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/563bf9a64787695cac4a7db4246f1104.png)
![説明リスト使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/563bf9a64787695cac4a7db4246f1104.png)
12.キャプション付きブロック
キャプション付きブロックは、タイトル付きのボックスを表示させてくれるブロックです。
ここにブロックを入れられる
このボックスは、当記事のリード文(冒頭文)にも使用しています。
リストを囲ったり何かの説明をする際に使用するなど、その部分を見やすく強調できます。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
個人的に使用頻度の多いブロックです。
キャプション付きブロックの使い方
![キャプション付きブロック使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7fd754e5dffe18a68eab316c15224e81.png)
![キャプション付きブロック使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/7fd754e5dffe18a68eab316c15224e81.png)
呼び出すと、こんなブロックが出てきます。
![キャプション付きブロック使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/426d183caa82994ff2742e2339fc743a.png)
![キャプション付きブロック使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/426d183caa82994ff2742e2339fc743a.png)
キャプション部分にタイトル、ボックス内に好きなブロックを挿入すればOKです。
![キャプション付きブロック使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e4131da2696edb6de416c7bdb157b1e2.png)
![キャプション付きブロック使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/e4131da2696edb6de416c7bdb157b1e2.png)
ボックスのスタイル・色・キャプション部分のアイコンを変更したい場合は、右のブロック設定を好みの設定にできます。
![キャプション付きブロック使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/95fd4ef910a6c556364ad3cefbce9430.png)
![キャプション付きブロック使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/95fd4ef910a6c556364ad3cefbce9430.png)
![キャプション付きブロック使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3a97596fda762cf29ac521a6c21ed34b.png)
![キャプション付きブロック使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/3a97596fda762cf29ac521a6c21ed34b.png)
13.SWELLボタン
SWELLボタンは、テキストリンクの広告タグを直接入力でき、クリック率まで計測できるブロックです。
SWELLボタンは、当ブログでも使用頻度は高いです。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
アフィリエイトするなら、クリック率計測は必須なので重宝します。
SWELLボタンの使い方
![SWELLボタン使い方](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ef3005fed49fe52f5fdb1d34cc9850de.png)
![SWELLボタン使い方](https://pasokon-kasegu.com/wp-content/uploads/2021/08/ef3005fed49fe52f5fdb1d34cc9850de.png)
呼び出すと、こんなブロックが出てきます。
![SWELLボタン使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/08c0e366e22e28d14a31a3d25ee5c76a.png)
![SWELLボタン使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/08c0e366e22e28d14a31a3d25ee5c76a.png)
ボタン部分に文章とリンクを入力すれば完了です。
![SWELLボタン使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/59979db1574da1cd555f7f799be09887.png)
![SWELLボタン使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/59979db1574da1cd555f7f799be09887.png)
SWELLボタンのスタイル・色・広告タグ・クリック率計測などを設定する場合は、右のブロック設定を好みの設定にしましょう。
![SWELLボタン使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/87dbd767da13eca996072c8e01597b74.png)
![SWELLボタン使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/87dbd767da13eca996072c8e01597b74.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
個人的にオススメのスタイルは、下記の「キラッと」です。
「クリック率を計測する」はONにすることをオススメします。
![SWELLボタン使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/c65e21ca26256ac49d800702d3b86a8e.png)
![SWELLボタン使い方6](https://pasokon-kasegu.com/wp-content/uploads/2021/08/c65e21ca26256ac49d800702d3b86a8e.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
こんな感じで計測してくれるので、 非常にありがたいですね。
![SWELLボタンクリック率](https://pasokon-kasegu.com/wp-content/uploads/2021/08/39701f9f4d99caba12f76f92764d5d86.png)
![SWELLボタンクリック率](https://pasokon-kasegu.com/wp-content/uploads/2021/08/39701f9f4d99caba12f76f92764d5d86.png)
テキストタイプの広告タグは「広告タグを直接入力」にコピーすれば直接反映されます。
![SWELLボタン使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8181adf9030d64d21246fbfe08316a16.png)
![SWELLボタン使い方7](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8181adf9030d64d21246fbfe08316a16.png)
14.バナーリンク
バナーリンクは、任意の画像を背景に設定できる簡易バナーリンクのブロックです。
自社商品など目立たせたい場合に活用できます。
バナーリンクの使い方
![バナーリンク](https://pasokon-kasegu.com/wp-content/uploads/2021/08/167cf7b061ce2261262f0615646b0728.png)
![バナーリンク](https://pasokon-kasegu.com/wp-content/uploads/2021/08/167cf7b061ce2261262f0615646b0728.png)
呼び出すと、こんなブロックが出てきます。
![バナーリンク使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cfa47cb5b49332e07d14bbce92c4d671.png)
![バナーリンク使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cfa47cb5b49332e07d14bbce92c4d671.png)
画像を追加すると、こんな感じです。
![バナーリンク使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cbbb3e0e0900f5c402dc6594b943eeb0.png)
![バナーリンク使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/cbbb3e0e0900f5c402dc6594b943eeb0.png)
![バナーリンク使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/901fbb60dfb4067775f1eefc264ddab0.png)
![バナーリンク使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/901fbb60dfb4067775f1eefc264ddab0.png)
このままで良ければ、これで完了です。
バナーの高さ・Altテキスト・画像加工(ブラー・影・丸み)などを設定する場合は、右のブロック設定でおこなえます。
![バナーリンク使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/96c721ce101618f8525afed522b42852.png)
![バナーリンク使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/96c721ce101618f8525afed522b42852.png)
テキストやオーバーレイ(画像の上に重ねられるカラー)・不透明度も変更できます。
![バナーリンク使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/fdbae7c5ffafdf08deac5c67bb80e272.png)
![バナーリンク使い方5](https://pasokon-kasegu.com/wp-content/uploads/2021/08/fdbae7c5ffafdf08deac5c67bb80e272.png)
15.ABテスト
ABテストは、ランダムで任意のコンテンツを表示してくれるブロックです。
2つの案がある時に、反応を比べられます。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
ページを更新すると、別の文字が見れるかも・・・
ABテストの使い方
![ABテスト使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/690feac0d6c343e1ae7eee27b51355d2.png)
![ABテスト使い方1](https://pasokon-kasegu.com/wp-content/uploads/2021/08/690feac0d6c343e1ae7eee27b51355d2.png)
呼び出すと、こんなブロックが出てきます。
![ABテスト使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a98902a0f19d8e82a9cbdcefa74727a0.png)
![ABテスト使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/a98902a0f19d8e82a9cbdcefa74727a0.png)
![ABテスト使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/23d89f21ac8e7ce90934a0f7be7e0daa.png)
![ABテスト使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/23d89f21ac8e7ce90934a0f7be7e0daa.png)
![ABテスト使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8e4b15706cfd61b305ca575b80aae6c6.png)
![ABテスト使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/8e4b15706cfd61b305ca575b80aae6c6.png)
これで完了です。
あくまでランダム表示だけであり、このブロックだけで計測はできません。
「SWELLボタン」や「広告タグ」など、計測できるブロックとの活用がベストです。
16.アコーディオン
アコーディオンは、メインテキストにサブテキストなどのコンテンツを格納できるブロックです。
なんらかの解説やQ&Aを、スマートに表示できます。
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
![](https://pasokon-kasegu.com/wp-content/uploads/2023/12/dd58270eb324af9192060c3af9c80a35-150x150.png)
個人的にはFAQより、Q&A表示はこちらのほうが好きです。
アコーディオンの使い方
![アコーディオン](https://pasokon-kasegu.com/wp-content/uploads/2021/08/6a20d3c8b4f991ec0487dddee871eb3f.png)
![アコーディオン](https://pasokon-kasegu.com/wp-content/uploads/2021/08/6a20d3c8b4f991ec0487dddee871eb3f.png)
呼び出すと、こんなブロックが出てきます。
![アコーディオン使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/556796681727a56f8781a498a6afd1ca.png)
![アコーディオン使い方2](https://pasokon-kasegu.com/wp-content/uploads/2021/08/556796681727a56f8781a498a6afd1ca.png)
![アコーディオン使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/70b93b3ded1537478c5643d18fda4347.png)
![アコーディオン使い方3](https://pasokon-kasegu.com/wp-content/uploads/2021/08/70b93b3ded1537478c5643d18fda4347.png)
このままで良ければ、これで完了です。
スタイルや右端のアイコン変更は、 右のブロック設定でおこなえます。
![アコーディオン使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/65b442dd20b4d0438657c107c8d1e517.png)
![アコーディオン使い方4](https://pasokon-kasegu.com/wp-content/uploads/2021/08/65b442dd20b4d0438657c107c8d1e517.png)
SWELLブロックを有効活用しよう
16個ご紹介してきましたが、ぶっちゃけ全部は使わないかも・・・
ですが、ふとした時に「あ、このブロック使えるやん」って、かゆいところに手が届くブロック達です。
ブロガー目線で素晴らしいブロックを実装してくれるSWELL・・・素敵やん。
コメント