雪夏2019年10月7日サイト・ブログ0件のコメント1つ前にアップしている記事・OceanWPで見出しデザインの設定をする【Elementor不使用】の冒頭を見やすくしていきます。記事のほうは、すでに見やすくしておりますので修正前の状態の画像を載せます。見たい方は、画像をクリック(タップ)していただければ大きくできますがこの画像からでも分かる人は分かるかも...?なんかこう、もうちょっととっつきやすく・読みやすくできそうな気がしたんですよね。具体的にはリストとかボックスとか言われているあの、四角で囲んでるあれ。あれで手順のあたり囲んだらもっと見やすい気がしたんですよ。私が使いたいのは、箇条書きにしている部分+それを囲んでいる箱なのでリストに該当するようですがwordpressの機能ですでに作っていたリストに対してリストをCSSで設定してもうまくいかなかったので、すでに作ってあるリストの、外側を囲むボックスを作ることになりました。覚えたらElementorを使おうと考えている状態であれこれやりすぎるとElementorを使った瞬間、目を背けたくなる見た目になってしまうかも...と不安な気持ちが強いので見出し同様、Elementorとケンカしないやり方で作りました。OceanWPを使いたいけどElementor分からないからレイアウトとかこだわれなさそうで怖い...諦めようかな...Elementorは勉強中だから、いずれ使い始めた時に大幅修正かけずに済む方法でやりたいという方に向いている方法で↑の囲み(これをボックスという。中身も込みならリスト)を作ります。「リストで使うためにFontAwesomeの設定をしたいんだ」という方は、先にこの記事をどうぞ。Awesomeを導入する【プラグインなし】おおまかなやり方は見出しの時と同じです。見出しはデザインが反映されているかどうかのチェックだけで充分でしたがボックスだと、前後の文章まで手を加えることになるのでデザイン面とは別の理由で、ちょっと作業が増えます。どんな手順でやっていくのか作業の流れ使いたいデザインを決めるコードを書き変える【外観】の【CSSコード】に書く記事内で呼び出すデザインと文章の確認です。見出しと違い、文章の確認を手順の中に入れていますがすでに形を作り終えた記事に入れるからこれを手順として入れております。記事をこれから作るよ!って場合なら必要のない部分ですし最初からボックスを使う前提で記事を書いていた場合は軽く見る程度で十分かと思います。1.使いたいデザインを決める参考にしたのはサルワカさんです。【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30ちょっと目立つ、追加で何かをインストールとかしなくてよさそうな二重線の枠を使ってみることにしました。コードを書き変える自分が扱いやすいように、呼び出すための名前を書き変えます。これは初めて書くボックス用コードなので、box1としました。【外観】の【CSSコード】に書く自分が管理・呼び出ししやすいように名前を変えたコードを貼り付けます。class=”box1′′。<>で囲うのを忘れずに。画像のように書きます。デザインと文章の確認これで記事を更新(またはプレビュー)して、どうなったか見てみます。四角い箱で囲むことができました!終わりに今回は、すでにWordpressで作ったリストを活かせるようにリストではなくボックスを使って箱を作りボックスリストと呼ばれるものと同じものになるよう仕上げました。ボックスリストも使ってみたのですがgutenbergだと、コードを入れて書いた後の編集が旧エディターや無料ブログの編集画面よりもやりづらく感じて...ボックスリストだと、中の数字のデザインもこだわれるものもあるので試してみたい気持ちはものすごくありますがもうちょっと技術を学んでから挑戦してみます。コメントをキャンセル次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。最近の投稿OceanWPの記事一覧ページで画像のサイズがバラバラにならないように設定を変える【カスタマイズを触るだけの簡単作業】2019年の振り返りと2020年の目標。