投稿の背景色をカスタマイズする

Contents

投稿の背景に色をつけたい

このページではWordPressの”グループ化”という機能を用いて投稿の背景色をカスタマイズする方法を紹介します。

今回のカスタマイズのきっかけは、白背景がまぶしいので落ち着いた色にしたいと思ったことです。

グループ化 before-after

例えば左のような白背景ページを右のような青背景に変えるにはどうしたらいいのか。
基本的すぎるせいかあまり検索にヒットしなくて、始めた頃は苦戦しました。

各ブロックの背景色を変更しても、ブロック間のスペースは白のままでカッコ悪いデザインになってしまうのです。

ブロックをまとめてグループ化する

全体が一つのブロックならできそうだなぁ、と思っていたらそんな機能があったことを思い出しました。グループ化です。

グループ化 リストから

グループ化 手順

グループ化の方法はいくつかあるそうですが、私が使った方法を紹介します。
リスト表示して全選択する方法がやりやすいと思います。

グループ化 全選択

全選択ができるとグループ化のアイコンが現れるので、クリックするとグループ化ができます。

背景色を変更する

グループを選択した状態でブロックタブを開くと、背景色が選択できるようになっています。

グループ化 背景色変更

この画面が出ていないときは、画面上の公開ボタン横にある設定ボタンを押すと出てきます。

グループ化のテクニックは色々なところに応用できそうですね。

グループの概念

ここでおさらいしておきます。

グループ化 前

グループ化 前

各ブロックは独立していて、それぞれの内部背景をカスタマイズしてもブロック間の背景に変化はありません。

グループ化 後

グループ化 後

グループ内(赤枠内)の背景を変更することで各ブロック間の背景がカスタマイズされます。

補足事項

高度なカスタマイズになりますが、この方法で画像やHTMLタグのブロック背景を透明(透過)にすることはできません。(少なくとも私の環境では。)
WordPress側で機能が用意されていないので、追加CSSを書いて処理するのが正解だと思います。

私のフロントページは追加CSSで透過しています。ご参考までに。

タイトルとURLをコピーしました