「ワードプレス」ブロックエディターでの枠作り！プラグインとCSS使って簡単に！
こんにちは、TDです！
wordpressが新たにアップデートして、記事書く際に何これ！？って思った方もいると思います。
アップデートで記事作成画面がテキストエディターからブロックエディターに代わっておりました。
プラグインで旧テキスト形式に戻りますので、大丈夫です！
ただ、これから始めた方は現行の形のブロックエディターしか見たことないかと思います。
私はテキストエディターからブロックエディターに変更して記事を更新しているのですが、最初の頃はかなり苦戦しました。(パソコンに弱い人間なので)
1番苦労したのが、見出しに使う枠です！
プラグイン使えば簡単に枠が作れるようになるので、それを書いていこうと思います！
プラグイン「 Simple Custom」を有効化にしよう
ダッシュボード→「プラグイン」→「新規追加」→右上のキーワードにて「Simple Custom」検索→
「今すぐインストール」→「有効化」にしよう！
私の場合はすでに「有効」となっていますが、インストール後「有効化」というボタンが出てきますので、そちらは必ず押してください！
「 Simple Custom」でＣＳＳカスタム設定
次は「外観」→「カスタムＣＳＳ」をクリックすると下記の画面になるかと思います。
（何も入力されていないと思うので、「/* カスタム CSS をここに入力してください */」のみ記載されているかと思います。）
この枠に見出しのデザインを入れていけば反映します。
例えば、このＣＳＳですと、このような形になります。↓
少し薄いですが、青色のデザインになっております。
まずは試しにこちらのデザインをＣＳＳに入れてみて、できるかどうか確認してみるのも良いかと思います。
↓のＣＳＳをコピーして貼り付けて、左下の「カスタムＣＳＳの更新」を必ず押してください。
article h2{
border: none !important;
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 1px #96c2fe;
padding: 0.2em 0.5em;
color: #454545;
}
※ロリポップを使用している方は「カスタムＣＳＳの更新」をクリックしたときに、「403エラー」と出る可能性が高いかと思います。
※ＣＳＳの冒頭の「ｈ2」を「ｈ3」に変えるとｈ3の見出しで反映されます。
見出しの確認
ＣＳＳを貼り付けたら次はちゃんと反映しているか確認です。
上のメニューにある「新規」→「投稿」をクリックすれば新規投稿画面に移ります。
適当に見出しを作って、見出しにわかりやすく文章を入れてください。
※この時点ではまだ反映しておりません。
この状態で右上にある「プレビュー」をクリック。
どうですか？青い見出しができましたか？
できない方はもしかしたらまだＣＳＳが更新して反映してないかもしれませんので、10分ほど待ってもう一度やってみてください。
まとめ
このようにＣＳＳで簡単に見出しのデザインを変えることができます。
今回は見出しの「Ｈ2」という見出しだけやりましたが、Ｈ3.Ｈ4も同じ形でできます。
ＣＳＳのｈ2のところを3.4と数字を変えるだけで見出しのデザインが変わります。
アップデートして投稿画面が変わりましたが、旧投稿画面に戻すことも可能ですので、ぜひそちらも試して頂けたらと思います。