ワードプレスLuxeritasで簡単におしゃれな装飾ボックス（囲み枠）を自作する方法
読みやすい記事には、必ず装飾ボックス（囲い枠）でアクセントがつけられているものです。
Luxeritasにはトピックブロックという便利なブロックが準備されているので、簡単にタイトル付の装飾ボックスを自作することができます。
装飾ボックスを使って、次のボックスを作っていきます。
・”ワンポイント”タイトル付ボックス
・ワイドタイトル付ボックス
・”メモ”タイトル付ボックス
次のようなボックスです。ブルー以外の色のバリエーションは記事内で紹介します。
”ワンポイント”タイトル付ボックス
ワンポイント（ブルー）
ワイドタイトル付ボックス
ブルーのワイドタイトル
”メモ”タイトル付ボックス
メモ（ブルー）
このように作成したボックスは、せっかくなのでパターンに登録しておきましょう。Luxeritasならば簡単です。
パターンに登録することで記事内ですぐに呼び出せます。
https://web-children.com/2021/06/27/luxeritas-block-pattern/トピックブロックとは
Luxeritasオリジナルのブロックの１つです。
記事内に挿入するには、次のようにブロック一覧から”トピック”を選択します。
（”LUXERITAS BLOCKS”の中にあります）
記事内に挿入したトピックブロックは次のように、タイトル部と枠線部の2重構成になっています。
タイトル部にアイコンやテキストを入力でき、枠線部内にはブロックなどのコンテンツを配置します。
デフォルトでは枠線部内に段落ブロックが入っている状態です。
リスト表示させてブロックの構造を確認すれば、”トピック”の下層に”段落”が入っているのがわかります。
枠線部内の段落ブロックはリストや画像など別のブロックに変更できます。
また、複数のブロックを配置することも可能です。
トピックブロックを編集する上での注意点としては、親となる”トピック”を選択中なのか、その下層の”段落”を選択中なのかを意識しておくことが大切です。
- トピックブロック全体のスタイルを整えるときは”トピック”を選択する
- 枠線内のコンテンツを編集するときは、”段落”など下層ブロックを選択する
したがって、慣れないうちはリスト表示させながら、今選択中のブロックがトピックなのか段落なのかを確認するのがよいでしょう。
トピックブロックでできること（各設定）
”トピック”を選択状態では、画面右の情報パネルに各設定が表示されます。
次の通りです。
- タイトル部を横幅いっぱいに広げる
- タイトル部にアイコンを挿入（アイコンの大きさも調整可能）
- 枠線の太さ、角の丸み、枠線幅、スタイル（一重線、点線、ニ重線など）
- 枠線の配置切り替え（左、中央、右）
- 枠線のマージン、パディング
- タイトルの位置（上から下げる、左から遠ざける）
- 背景画像（枠線内）
- 各種色設定（タイトル文字色・背景色、枠線内文字色・背景色）
”ワンポイント”タイトル付ボックス
作成の手順と各設定
トピックブロックを挿入した後、次の手順で設定していきます（デフォルトから変更した部分のみ）。
- タイトル部にアイコンを挿入
- タイトル部に文字入力後、太字化と文字サイズ18pxに変更（段落ブロック同様にツールバーで可）
- 枠線太さを3pxに設定
- 各部色設定（グレイッシュなブルーには#72bac1としました。）
- 枠線内の”段落”ブロックに文字入力
色のバリエーション
グレイッシュなブルー以外に次の色バリエーションも参考までに並べておきます。
グレイッシュなブルー（#72bac1）
ワンポイント（ブルー）
グレイッシュなグリーン（#77c9a0）
ワンポイント（グリーン）
グレイッシュなオレンジ（#eda387）
ワンポイント（オレンジ）
グレイッシュなピンク（#e298a4）
ワンポイント（ピンク）
ワイドタイトル付ボックス
作成の手順と各設定
トピックブロックを挿入した後、次の手順で設定していきます（デフォルトから変更した部分のみ）。
- タイトル部にアイコンを挿入
- タイトル部に文字入力後、太字化と文字サイズ18pxに変更（段落ブロック同様にツールバーで可）
- 枠線丸みを5px、最大幅を650px、左右の位置を中央に設定
- 各部色設定（グレイッシュなブルーには#72bac1、枠線内背景色には#effeff。）
- 枠線内の”段落”ブロックに文字入力
ワイドタイトルなので、見映えを考慮して全体の横幅を最大650pxとしました。左右の配置も中央とします。
色のバリエーション
グレイッシュなブルー以外に次の色バリエーションも参考までに並べておきます。
グレイッシュなブルー（#72bac1、枠線内背景色#effeff）
ブルーのワイドタイトル
グレイッシュなグリーン（#77c9a0、枠線内背景色#ecfff5）
グリーンのワイドタイトル
グレイッシュなオレンジ（#eda387、枠線内背景色#fff4ef）
オレンジのワイドタイトル
グレイッシュなピンク（#e298a4、枠線内背景色#fff1f4）
ピンクのワイドタイトル
”メモ”タイトル付ボックス
作成の手順と各設定
トピックブロックを挿入した後、次の手順で設定していきます（デフォルトから変更した部分のみ）。
- タイトル部にアイコンを挿入
- タイトル部に文字入力(太字化と文字サイズ18pxに変更)、位置を上22px、左20pxに変更
- 枠線太さを4px、丸みを15px
- 各部色設定（グレイッシュなブルーには#72bac1、タイトル部背景色は白）
- 枠線内の”段落”ブロックに文字入力
タイトル部の位置を調整することで、枠線の左上に重なるようにします。
重ねたタイトル部の背景色を白として、枠線を隠します。
（タイトル部背景色はボックスを配置するページの下地に合わせてください。今回は下地が白なので背景色を白としています）
色のバリエーション
グレイッシュなブルー以外に次の色バリエーションも参考までに並べておきます。
グレイッシュなブルー（#72bac1、タイトル部背景色：白）
メモ（ブルー）
グレイッシュなグリーン（#77c9a0、タイトル部背景色：白）
メモ（グリーン）
グレイッシュなオレンジ（#eda387、タイトル部背景色：白）
メモ（オレンジ）
グレイッシュなピンク（#e298a4、タイトル部背景色：白）
メモ（ピンク）
まとめ
トピックスブロックを使えば、さまざまなタイトル付きデザインのボックスが作成可能です。
あなたもオリジナルなボックスを作ってみてはいかがでしょうか？
また、タイトルなしのシンプルな枠線ボックスであれば”枠線ブロック”を使用すると可能です。
下記記事では、枠線ブロックで作成したボックスをパターンに登録して活用する方法を紹介していますので参考にしてください。
