【WordPress】背景をおしゃれなストライプ(斜線)にするCSSカスタマイズ

バビ
バビ

ごきげんよう。バビです。

ブログの背景色ってめちゃくちゃ悩みません?

私は白背景が好きなんですけど、他の人のブログを見てたりすると、グレー系の背景もカッコいいなぁと思ったり、でも、ブログじゃないサイトを見てるとやっぱり白もいいなって何回もループしてしまいます。

そんなときに出会ったのがストライプの背景。

なんとなくシュっとしてカッコいい感じがします。

一見グレーと変わらないような気もしますが、ストライプのほうが動き・リズムが出るので、よりシャープでおしゃれな感じになります。

私の使用しているテーマでは、ストライプの背景の選択はできないので、CSSでカスタマイズすることにしました。

CSS

以下のCSSをコピペして貼り付けるだけです。

/*****************************************
背景をストライプにする
******************************************/
body {
background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.07), rgba(0,0,0,0.07) 1px, transparent 1px, transparent 4px);
background-size: 6px 6px;
}

これを、外観→テーマの編集→(子テーマの)「style.css」に貼り付けます。

背景色を設定している場合は、グレーのストライプが重なって表示されます。

うまく表示されない場合

テーマによってはCSSの読み込みの順序の関係でうまく表示されないことがあります。

その場合は、↓の最後に「important」をつけたCSSを使えば表示されます。

/*****************************************
背景をストライプにする
******************************************/
body {
background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.07), rgba(0,0,0,0.07) 1px, transparent 1px, transparent 4px)!important;
background-size: 6px 6px!important;
}

カテゴリウィジェットの「子カテゴリ」を非表示にする方法【WordPress】 【WordPress】ウィジェットID(番号)の簡単な調べ方|ウィジェット背景を消す(透過)するために Gutenbergのカラーパレットにほかの色を追加するカスタマイズ 【Gutenberg】リストブロックをチェックマークにするカスタマイズ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です