Gutenbergで特定の段落にオリジナルデザインを適用

過去にもWordPressで別サイトを作ったことがありますが、そのときは旧型のクラシックエディターを使って記事を書いていました。

現在、WordPressを新規インストールするとデフォルトで新しいGutenbergエディターが有効化されますが、クラシックエディターに戻すためのプラグインもあります。

WordPressの公式サイトによると、クラシックエディターは2021年末までサポートをするとのことですが、それ以降はどうなるかわかりません。

今回のサイトではGutenbergの練習を兼ねて使っていますが、自分が便利だと思ったのは次の3点です。

特にメディアライブラリーを経由せずとも画像をアップロードできるのは強みだと思いますが、また一つ、これは使えると思った機能があることを見つけました。

ブロックの高度な設定

Gutenbergには「ブロック」という概念があり、上下どこへでも移動できるようになっています。

画像や動画、Twitterのツイートを埋め込むためのブロックもあり、旧エディターよりも直感的な操作で記事を書く作業が捗るようになりました。

このエディターの「高度な設定」を使うことで、特定の段落に対するCSSクラスの指定が簡単にできるようになっています。

スタイルシートを使って該当するCSSクラスのデザインを行えば、画像のように、ユーザー側でオリジナルボックスを作ることもできます。

「追加CSSクラス」欄にわかりやすい英数字の名前を入力します。この名前は後にスタイルシートで編集するときに使います。

今回は外部リンクを示すための専用のボックスを作ります。

追加CSSクラスには「link」と入力します。

画像で示しているCSSは例ですが、テーマエディターか各テーマのカスタマイザー内の「追加CSS」欄に、次のように入力したCSSをコピペして保存します。

Googleで「CSS ボックスデザイン」といったキーワードで検索すると、コピペ可能なデザインが掲載されたサイトが上位のほうにヒットしています。参考にさせていただきましょう。

他のテーマでは試したことがありませんが、このブログで使っている「Sparkling」というテーマの場合、「p.」の後に追加CSSクラスの名前を入力します。

記事編集中の場合は、テーマエディターか各テーマのカスタマイザーを新しいタブで開くことをお勧めします。

CSSのデザインが反映されていればOKです。

クラシックエディターでもCSSクラス名を入力してオリジナルデザインの段落の適用はできますが、ビジュアルエディターで編集している場合、HTML入力が可能なテキストエディターへの切り替えが必要な作業になります。

Gutenbergではツールバーから直接、CSSクラス名を入力するだけなので、HTMLを打つ手間が省けるので楽になりますね。

ただ、オリジナルのCSSクラスが複数になってくると、手帳やノートに控えなければなりませんが…。