「ワードプレス」ブロックエディターでの枠作り!プラグインとCSS使って簡単に!

2020年10月22日

Pocket

こんにちは、TDです!

wordpressが新たにアップデートして、記事書く際に何これ!?って思った方もいると思います。

アップデートで記事作成画面がテキストエディターからブロックエディターに代わっておりました。

プラグインで旧テキスト形式に戻りますので、大丈夫です!

ただ、これから始めた方は現行の形のブロックエディターしか見たことないかと思います。

私はテキストエディターからブロックエディターに変更して記事を更新しているのですが、最初の頃はかなり苦戦しました。(パソコンに弱い人間なので)

1番苦労したのが、見出しに使う枠です!

プラグイン使えば簡単に枠が作れるようになるので、それを書いていこうと思います!

プラグイン「 Simple Custom」を有効化にしよう

ダッシュボード→「プラグイン」→「新規追加」→右上のキーワードにて「Simple Custom」検索→

「今すぐインストール」→「有効化」にしよう!

私の場合はすでに「有効」となっていますが、インストール後「有効化」というボタンが出てきますので、そちらは必ず押してください!

「 Simple Custom」でCSSカスタム設定

次は「外観」→「カスタムCSS」をクリックすると下記の画面になるかと思います。

(何も入力されていないと思うので、「/* カスタム CSS をここに入力してください */」のみ記載されているかと思います。)

この枠に見出しのデザインを入れていけば反映します。

例えば、このCSSですと、このような形になります。↓

少し薄いですが、青色のデザインになっております。

まずは試しにこちらのデザインをCSSに入れてみて、できるかどうか確認してみるのも良いかと思います。

↓のCSSをコピーして貼り付けて、左下の「カスタム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;
}

※ロリポップを使用している方は「カスタムCSSの更新」をクリックしたときに、「403エラー」と出る可能性が高いかと思います。

※CSSの冒頭の「h2」を「h3」に変えるとh3の見出しで反映されます。

見出しの確認

CSSを貼り付けたら次はちゃんと反映しているか確認です。

上のメニューにある「新規」→「投稿」をクリックすれば新規投稿画面に移ります。

適当に見出しを作って、見出しにわかりやすく文章を入れてください。

※この時点ではまだ反映しておりません。

この状態で右上にある「プレビュー」をクリック。

どうですか?青い見出しができましたか?

できない方はもしかしたらまだCSSが更新して反映してないかもしれませんので、10分ほど待ってもう一度やってみてください。

まとめ

このようにCSSで簡単に見出しのデザインを変えることができます。

今回は見出しの「H2」という見出しだけやりましたが、H3.H4も同じ形でできます。

CSSのh2のところを3.4と数字を変えるだけで見出しのデザインが変わります。

アップデートして投稿画面が変わりましたが、旧投稿画面に戻すことも可能ですので、ぜひそちらも試して頂けたらと思います。