【CSS】お正月記事向け・ブログの背景をその記事だけ紅白模様にするコードｗ
どうも！LSSです！！
先日、クリスマスの記事、
の中で、強引にブログ記事の背景などを書き換えていました。
次のイベントといえば「お正月」ですが、「１記事限定で正月らしい紅白模様にする」コードを公開してみますｗ
サンプルとコード
と言っても、「この記事」を最初から紅白模様にするのはさすがに気が早すぎるかなぁｗ
と思ったので、↓のボタンをクリックする事で、コード導入した時のイメージを見ていただければ、という事にしておきます^^
このブログの背景を紅白模様にしてみる
コード
<style><!--
body{
background-image:linear-gradient(90deg,#ffcccc 50%,white 51%);
background-size:200px 200px;
}
#title a{text-shadow:2px 2px 0px black;}
--></style>
使い方と解説
コードを、はてなブログ該当記事の「HTML編集画面」にコピペするだけで、その記事限定で背景がめでたい紅白模様になりますｗ
※ただし、記事が連続表示になっていると、該当記事を含んだページがまるごと紅白になってしまいますが。
body{
background-image:linear-gradient(90deg,#ffcccc 50%,white 51%);
background-size:200px 200px;
}
の部分が、背景を指定している部分です。
linear-gradient(90deg,#ffcccc 50%,white 51%);
によって、90deg（右向き）の#ffcccc 50%（半分赤）でwhite 51%（残り半分白）のグラデーション背景を作り、
background-size:200px 200px;
によって背景サイズを200ピクセルにしています。
（200ピクセルのうち、半分赤半分白なので、赤の幅は100ピクセルって事になります）
…「赤」といいつつ、#ffccccはピンク色ですが、これを最初「red」にしてみたところ、あまりにドギツかったのでｗ、ピンク色にしておきました。
あと、もうひとつのCSS指定、
#title a{text-shadow:2px 2px 0px black;}
これはブログタイトル文字（うちでいうと画面上部のLittle Strange Software）の部分が、白色だった場合に読めなくなってしまうので、影つき文字にする指定です。
元々問題ない配色だった場合はこの一行は削ってしまっても構いません^^
あとがき
クリスマスネタの副産物、ですねｗ
ただ、スマホから見た時にはレスポンシブ対応ブログでもあまり変わらない（変化した部分が画面に出てこない）かもです^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
