OceanWPでCSSを使ってリストの外側の囲み(デザイン)を作る【Elementor不使用】

OceanWPをこのブログで使っていたのは記事を書いた当時のことであり、現在はここでは違うテーマを使っています。
ここの見た目はOceanWPを利用していた頃と変わっています。ご了承ください。

1つ前にアップしている記事・

の冒頭を見やすくしていきます。

記事のほうは、すでに見やすくしておりますので
修正前の状態の画像を載せます。

じっくり見たい方は、画像をクリック(タップ)していただければ大きくできますが
この画像からでも分かる人は分かるかも…？

なんかこう、もうちょっととっつきやすく・読みやすくできそうな気がしたんですよね。
具体的には
リストとかボックスとか言われているあの、四角で囲んでるあれ。
あれで手順のあたり囲んだらもっと見やすい気がしたんですよ。

私が使いたいのは、箇条書きにしている部分＋それを囲んでいる箱なので
リストに該当するようですが

wordpressの機能ですでに作っていたリストに対してリストをCSSで設定してもうまくいかなかったので、
すでに作ってあるリストの、外側を囲むボックスを作ることになりました。

しかし、覚えたらElementorを使おうと考えている状態であれこれやりすぎると
Elementorを使った瞬間、目を背けたくなる見た目になってしまうかも…

と不安な気持ちが強いので

見出し同様、Elementorとケンカしないやり方で作りました。

という方に向いている方法で
↑の囲み(これをボックスという。中身も込みならリスト)を作ります。

「リストで使うためにFontAwesomeの設定をしたいんだ」という方は、先にこの記事をどうぞ。

OceanWPにFont Awesomeを導入する【プラグインなし】

おおまかなやり方は見出しの時と同じです。
見出しはデザインが反映されているかどうかのチェックだけで充分でしたが

ボックスだと、前後の文章まで手を加えることになるので
デザイン面とは別の理由で、ちょっと作業が増えます。

どんな手順でやっていくのか

作業の流れ

です。

見出しと違い、文章の確認を手順の中に入れていますが
すでに形を作り終えた記事に入れるからこれを手順として入れております。

記事をこれから作るよ！って場合なら必要のない部分ですし
最初からボックスを使う前提で記事を書いていた場合は
軽く見る程度で十分かと思います。

参考にしたのはサルワカさんです。

ちょっと目立つ、追加で何かをインストールとかしなくてよさそうな
二重線の枠を使ってみることにしました。

自分が扱いやすいように、呼び出すための名前を書き変えます。

これは初めて書くボックス用コードなので、box1としました。

自分が管理・呼び出ししやすいように名前を変えたコードを貼り付けます。

記事内で呼び出すための指定方法は、div class=”box1″ 。
終わりには /div と入れます。
HTML判定されないために外して書きましたが、どちらも <>で囲うのを忘れずに。

画像のように書きます。

これで記事を更新(またはプレビュー)して、どうなったか見てみます。

四角い箱で囲むことができました！

今回は、すでにWordpressで作ったリストを活かせるように
リストではなくボックスを使って箱を作り
ボックスリストと呼ばれるものと同じものになるよう仕上げました。

ボックスリストも使ってみたのですが
gutenbergだと、コードを入れて書いた後の編集が
旧エディターや無料ブログの編集画面よりもやりづらく感じて…

ボックスリストだと、中の数字のデザインもこだわれるものもあるので
試してみたい気持ちはものすごくありますが

もうちょっと技術を学んでから挑戦してみます。