オリジナルブロック

「アコーディオン」の作り方

wp-jintest

アコーディオンはQ&Aを作るのに役立つブロックです。

たとえばこんなふうに↓

Q
JIN:Rは複数サイトで利用できますか?

はい。ライセンス所有者のサイトであれば、何サイトでもご利用いただけます。

Q
JINとJIN:Rの違いって何ですか?

JINはClassic Editorに特化したテーマ、JIN:RはGutenbergに特化したテーマです。

どちらも初心者に使いやすいテーマに設計されているのが特徴。時代性に即しているのはJIN:Rのテーマだと言えます。

Q
JIN:Rには購入者サポートはありますか?

JIN:Rには専用フォーラムを用意していますので、テーマを使っていて困ったことがあればぜひ相談してください。

また「JIN BLOG CAMP」のコミュニティで、ブログについてのみんなで学んでいける場を用意しています。

Q
JIN:Rは複数サイトで利用できますか?

はい。ライセンス所有者のサイトであれば、何サイトでもご利用いただけます。

Q
JINとJIN:Rの違いって何ですか?

JINはClassic Editorに特化したテーマ、JIN:RはGutenbergに特化したテーマです。

どちらも初心者に使いやすいテーマに設計されているのが特徴。時代性に即しているのはJIN:Rのテーマだと言えます。

Q
JIN:Rには購入者サポートはありますか?

JIN:Rには専用フォーラムを用意していますので、テーマを使っていて困ったことがあればぜひ相談してください。

また「JIN BLOG CAMP」のコミュニティで、ブログについてのみんなで学んでいける場を用意しています。

記事の中はもちろん、トップページでも使いやすい素材になっています。

LPでも最後の〆の部分に置かれることが多いね!

ひつじくん
ひつじくん

というわけで、アコーディオンの作り方について解説をしていきますね。

アコーディオンの作り方

では執筆画面を開いて、実際にアコーディオンを作っていきましょう!

1| ブロックを呼び出す

執筆画面左上「+」ボタンを押して「アコーディオン」を選べば呼び出せます。

でも、この方法を毎回やるのは少しめんどうです。

そこで時短する呼び出し方を覚えましょう ↓

表示させたい場所をクリックした上で

/アコーディオン 

と、打つとすぐに呼び出せます!

慣れてくるとこっちの方が断然早くて、執筆効率が上がるのでおすすめです。

2|ステップを追加する

タイムラインにマウスを合わせて「親ブロックを選択」をクリックすると「アイテムを追加」のボタンが出てきます。

このボタンを押すと、タイムラインのSTEP数が2個目、3個目と増えていきます。

3|お好みでデザイン変更を

デザイン変更をする時は、タイムラインにマウスを合わせて「親ブロックを選択」をクリックしてください。

そうするとブロックの設定画面が右サイドバーに現れるので、ここでタイムラインのデザインをポチポチと変更することができます!

4| 前後の余白を調整する

アコーディオンブロックの余白はあえて狭めに設計されています。

ブロックの「詳細設定」で余白調整が効くようになっているので、ここを調整して適切な余白を空けてください!

他の記事も読んでみましょう

ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。
記事URLをコピーしました