【WordPress】Luxeritasのヘッダーカスタマイズデザイン12パターン（コピペOK）

2020年3月24日2021年5月16日

Luxeritasのヘッダーデザインに、CSSだけで描けるパターンをまとめました。

Luxeritasのユーザーさんは、コードをコピペして子テーマのCSSにそのまま貼り付けて使うことができます。

🌾子テーマについて

Luxeritas以外のユーザーさんも、「#head-in」の部分をテーマに合わせて応用することが出来ます。

ストライプ系

ストライプ系の背景は、

repeating-linear-gradient　で設定することが出来ます。

deg は degree の略で、線の角度を指定できます。

当サイトで使用している背景

#head-in {
    background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px); 
}

斜めストライプの背景

#head-in {
    background: repeating-linear-gradient(-45deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
}

ボーダー柄の背景

#head-in {
    background: repeating-linear-gradient(#edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
}

チェック系

ストライプ柄の応用で、チェック柄も作ることが出来ます。

色の指定ですが、ストライプの時は16コードで指定しましたが、チェックの時はrgbaで指定します。

ギンガムチェック

#head-in {
    background-image: repeating-linear-gradient(90deg,rgba(198, 238, 238, .5),rgba(198, 238, 238, .5) 10px, transparent 0, transparent 20px), repeating-linear-gradient(0deg,rgba(198, 238, 238, .5),rgba(198, 238, 238, .5) 10px,transparent 0, transparent 20px);
}

斜め格子柄のチェック

#head-in {
    background-image: repeating-linear-gradient(-45deg,rgba(198, 238, 238, .5), rgba(198, 238, 238, .5) 10px, transparent 0, transparent 20px), repeating-linear-gradient(45deg,rgba(198, 238, 238, .5), rgba(198, 238, 238, .5) 10px, transparent 0, transparent 20px);
}

2色のチェック

#head-in {
    background-image: repeating-linear-gradient(-45deg,rgba(253, 230, 251, 0.5), rgba(253, 230, 251, 0.5) 10px, transparent 0, transparent 20px), repeating-linear-gradient(45deg,rgba(198, 238, 238, .5), rgba(198, 238, 238, .5) 10px, transparent 0, transparent 20px);
}

これはRGBAで指定できる、透明度を利用しています。

詳しく知りたい方はこちら

カラーコードの仕組みを解説

ドット系

細かいドット柄

#head-in {
    background-image: radial-gradient(#c6eeee 20%, transparent 0), radial-gradient(#c6eeee 20%, transparent 0); /*ドットの色*/
    background-position: 0 0, 8px 8px; /*ドットの位置*/
    background-size: 15px 15px; /*ドットの大きさ*/
}

大きめドット柄

#head-in {
    background-image: radial-gradient(#e0fbfb 20%, transparent 0), radial-gradient(#e0fbfb 20%, transparent 0);
    background-position: 0 0, 30px 30px;
    background-size: 60px 60px;
}

色違いのドット柄

#head-in {
    background-image: radial-gradient(#e0fdfd 20%, transparent 0), radial-gradient(#ffedfd 20%, transparent 0);
    background-position: 0 0, 30px 30px;
    background-size: 60px 60px;
}

カラー背景に白のドット

#head-in {
    background-color: #c6eeee; /*背景色*/
    background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
    background-position: 0 0, 15px 15px;
    background-size: 30px 30px;
}

チェス柄

ストライプ、チェック柄の応用で、チェスの盤のような模様も作ることができます。

チェス柄

市松模様とも。和風のサイトにも良さそう。

#head-in {
    background: linear-gradient(45deg, #edf5f4 25%, transparent 25%, transparent 75%, #edf5f4 75%), linear-gradient(45deg, #edf5f4 25%, transparent 25%, transparent 75%, #edf5f4 75%); /*チェスの色1色目*/
    background-color: #c6eeee; /*チェスの色2色目*/
    background-position: 0 0, 25px 25px;
    background-size: 50px 50px;
}

斜めチェス柄

#head-in {
    background: linear-gradient(45deg, #edf5f4 25%, transparent 25%, transparent 75%, #edf5f4 75%, #edf5f4),linear-gradient(-45deg, #edf5f4 25%, transparent 25%, transparent 75%, #edf5f4 75%, #edf5f4);
    background-color: #c6eeee;
    background-size: 25px 25px;
}

参考にさせていただいたサイト

第0版

Minimal Green

あざらしっくねっと

以上！

それでは良いディベロッパーライフを！