WEBサイトの背景色を方眼ノートのようにするCSS

※当サイトにはプロモーションが含まれています。

WEBサイトの背景色は、「白(#FFFFFF)」「薄灰色 (#F5F5F5)」「ダーク（#121212）」などが多いのではないでしょうか？

単色だと、どうしても”のっぺり”とした印象を感じるので、自分は、市松模様などの画像を作って、それを背景にすることが多いのですが、最近、気に入っているのが、方眼（格子）模様です。

方眼ノートの背景

最近、その模様がCSSで作れることを知ったので、備忘録として残しておきます。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

ワードプレス環境

テーマ：賢威８
WordPressバージョン：5.8.x
PHPバージョン：7.4.x
サーバー：さくらインターネット

※セキュリティの観点から、マイナーバージョンの一部をxとさせて頂きます。

背景色を方眼ノートのようにするCSS

WEBサイトの背景色を方眼ノート（格子）にするCSSです。

body {
background-image: linear-gradient(transparent 95%, #e9e9e9 50%, #e9e9e9), linear-gradient(90deg, transparent 95%, #e9e9e9 50%, #e9e9e9);
background-size: 16px 16px;
background-repeat: repeat;
}

このCSSコードは、body要素の背景に線形グラデーションを適用しています。

background-sizeは、背景画像のサイズを設定しています。

ここでは、16px 16pxと指定していますが、14px 14pxなど値を変更することで、方眼の大きさを変更することも可能です。

なお、賢威8.0でも、上記コードを使用して背景色を方眼状に変更できることを確認済みですよ。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

※全角スペースが入るとレイアウトが崩れる事があります。余計な全角スペースが入らないように気を付けてください。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

	Windows	Mac
Google Chrome	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Microsoft Edge	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Mozilla Firefox	【Ctrl＋F5】【Ctrl＋Shif＋R】	【Command＋Shift＋R】
Safari(Mac)	‐	【Command＋Option＋R】