ブログを書いていると、セクションとセクションの間に、少しだけ余白がほしくなる場面があります。
私はこの余白を、ずっとスペーサーのブロック（高さを指定するdiv）で入れていました。
ただ、最近この入れ方に手間を感じるようになりました。
私は記事を、AIに書いてもらうことがあります。
その原稿をWordPressに貼り付けると、スペーサーの部分だけがうまく反映されず、あとから自分で貼り直す、ということが毎回起きていました。
この手間を、Cocoonのテンプレート機能を使って というショートコード1つで解決できたので、その方法をまとめていきます。
AIに投稿文を書いてもらっている方には、特に便利な方法かもしれません。
CSSで一括指定する案もあったけれど、やめました
余白を入れる方法を調べていたとき、CSSで「h2の上に余白（マージン）を入れる」という技も見つけました。
追加CSSにひとこと書けば、すべてのh2の上に自動で余白が入る、という方法です。
これなら、記事ごとに余白を入れる必要すらなくなります。
ただ、私はこの方法を見送りました。
私のブログには、すでに180記事くらいの記事があります。
CSSで一括指定すると、これから書く記事は問題ないのですが、今まで書いた記事すべてにも余白が反映されてしまいます。
過去記事の見た目が、意図しないところで変わってしまう可能性がありました。
全部の記事を1つずつ確認するのは現実的ではなかったので、CSSでの一括指定はやめて、入れたいところにだけ差し込めるショートコードの方法にしました。
記事数が少ないうちなら一括CSSでもよかったのかもしれませんが、記事が増えてからだと影響範囲が読みにくい、というのが私の判断でした。
Cocoonのテンプレート機能とは
今回使ったのは、Cocoonのテンプレート機能です。
調べた範囲では、よく使う文章やコードを「テンプレート」として登録しておいて、 というショートコードで呼び出せる機能のようです。
登録した内容を変更すると、そのショートコードを貼ったすべての場所に反映されます。
もともとは、プロフィール欄や定型のあいさつ文などを使い回すための機能のようですが、今回はこれを余白の呼び出しに使いました。
余白のdivをテンプレートに登録しておけば、記事では （〇には数字が入ります）と書くだけで、その余白が入る、という使い方です。
余白ショートコードの登録手順
ここからは、実際に私が登録した手順です。
① Cocoon設定 → テンプレート → 新規追加
WordPressの管理画面から、Cocoon設定を開きます。
その中の「テンプレート」をクリックします。
その後に「新規追加」をクリック
② タイトルを付ける
タイトルは、自分がわかる名前で大丈夫です。
私は「スペース」というタイトルにしました。
あとで一覧に並んだときに、何のテンプレートか自分でわかる名前にしておくと迷いません。
③ 内容にコードを入れる
内容の入力欄で、右上のタブの「コード」をクリックします。
そこに、余白のコードを入れます。
私が入れたのは、このコードです。
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>この height:30px の部分が、余白の高さです。
数字を変えると余白の高さが変わるので、ちょうどいい高さに調整できます。私は30pxにしました。
コードはどこで確認したのか（F12・検証）
この余白のコードは、私はもともと記事で使っていたスペーサーの部分を、F12（または右クリックの「検証」）で確認して持ってきました。
ブラウザで自分の記事を開いて、余白の部分を検証すると、そのdivのコードが表示されます。それをコピーして使いました。
F12や検証がまだ難しいという方は、この記事の上に載せている余白コードをそのままコピーして使っても大丈夫です。
高さの数字（30px）だけ、自分の好みに変えれば同じように使えます。
④ 「エディターのリストに表示」にチェックを入れる
「ビジュアルエディターのリストに表示する」という項目にチェックを入れます。
ここにチェックを入れておくと、記事を書くときに、ブロックのテンプレートのドロップダウンからこの余白を選べるようになります。
毎回ショートコードを手で打たなくても、リストから選ぶだけで入れられるようになるので、入れておくと楽です。
⑤ 保存して、ショートコードをコピーする
入力できたら保存します。
保存後、「一覧ページへ」をクリックすると、登録したテンプレートの一覧が表示されます。
その一覧に、ショートコード（ のような形）が表示されています。
このショートコードをコピーしておきます。
idの数字は、登録したときに自動で決まります。私の場合は2でしたが、人によって番号は変わります。
記事での使い方
使い方は、とても簡単でした。
余白を入れたいところに、コピーしたショートコードを貼るだけです。
[temp id=◯]これを書いておくと、その位置に登録した余白が入ります。
先ほどチェックを入れた「リストに表示」を使えば、ブロックのテンプレートのドロップダウンから選ぶだけでも入れられます。
私はAIに記事のHTMLを書いてもらうとき、「セクションの間の余白は を入れてね」と伝えるようにしています。
そうすると、原稿の時点でショートコードが入った状態で出てくるので、貼り付けたあとにスペーサーを1つずつ直す手間がなくなりました。
スペーサーのdivのままだと、貼り付けたときに反映されずに直すことがありましたが、ショートコードなら文字として貼られるので、そのまま機能してくれます。
使ってみて感じた注意点
- idの数字は登録時に自動で決まり、あとから自由に変えることはできないようです。番号は登録後に一覧で確認します。
- 登録したテンプレートの内容を変えると、そのショートコードを貼ったすべての場所に反映されます。余白の高さをあとで変えたくなったときは、テンプレート側を1回直せば全記事に反映されるので、これはむしろ便利でした。
- プレビューで、余白がちゃんと入っているか一度確認しておくと安心です。
まとめ
余白の入れ方には、CSSで全記事に一括で入れる方法と、ショートコードで入れたいところにだけ差し込む方法がありました。
私はすでに記事数が多かったので、過去記事に影響しないショートコードの方法を選びました。
Cocoonのテンプレート機能に余白のコードを登録しておくと、記事では と書くだけで余白が入るようになります。
AIに記事を書いてもらったときも、ショートコードを指定しておけば貼り直しの手間が減るので、同じようにAIで下書きを作っている方には合う方法かもしれません。
ちなみに囲み枠の中に文字を書いて欲しい場合は、少し方法が違います。
下記記事にまとめているのでご参照ください！
私はこの方法にしてから、記事を仕上げるときの細かいストレスがひとつ減りました。同じところで手間を感じていた方に届いたらうれしいです。
ここまで読んでくださり、ありがとうございました。
