【ha-Basic】テーマで画面の左右余白にグラデーション効果を持った色を付ける方法

やってみたら簡単だったシリーズです（笑）。何はともあれこのページの左右の余白を見ていただければ何をするための記事なのかは一目瞭然だと思います。

またうちの猫ほかの日記を綴っているOrdinary Lifeも同じように左右余白にグラデーションで色付けしていますので参考になれば幸いです。

2019年12月6日現在ではこの手法で表示をしていますが、後々ご覧になった方は既に使用していない可能性があります。その際はご容赦ください。

今回のテーマは「左右の余白が真っ白、とか、単色だとちょっとアレなので、余白の色にグラデーション効果を付けたい」ということです。

私の作るサイトは基本オリジナルテーマの【HABONE】を使っていますので、今回もこのテーマでの手法を紹介しますが、一般的なテーマ（というか全うなhtml構造のページ）であればコピペで即反映できる内容ですので興味のある方はやってみてください。

この手法にたどり着いた経緯と結論

何かのクラス（divクラスなど）に対して上から下、右から左、左から右、真ん中から外へ・・・など色を徐々に変化させるグラデーション表現をCSSで記述する方法は沢山掲載されています。

でも今回は左右にグラデーションを付け、真ん中（つまりサイトコンテンツ）は白にしたいのです。だがしかし・・・通常のCSSでは同じクラスに対して同じ要素を２重に書けば、後に記述されたもののみが採用されてしまう（つまりは左側にグラデーションを付ければ左だけ、また逆もしかり）ので、左のグラデーションを記述してから右のグラデーションを記述すれば右だけに色が付くのです（説明下手ですみません）。

そこで調べると、クラスの中自体は白にして、疑似要素（::beforeや::after）でグラデーション部分を作るという方法が画像に対する方法としていろいろ出てきました。でもこれだと例えばサイト本体のクラスがあって、そこから外に向かって色が濃くなっていくようになってしまうので、その幅をコントロールすることが難しい（要は1200pxのサイト本体の外側に30pxの隙間を設けた後に色をだんだん濃くするという記述をした場合、白い部分は1260ピクセル、その外はグラデーションとなりますから、1320pxの画面で見ればいい感じでも1920px幅の画面で見ると、左右の色ばかり強調されてしまう）ので、これも断念。

また、グラデーション表示を円形（放射上）に変化するようにする「radial-gradient()」を使用すると、ページ全体に対してグラデーションがかかってしまうので、画面のスクロールで上下左右の色が変わってしまう・・・。

などなどいろいろと悩みました。CSSのプロなら簡単なことなんでしょうけど、さすがにネット検索のプロ？の私でもお手上げでした。

そんな私でも「linear-gradient()」は知ってますから、何とかこれを・・・でたどり着いたのが今回の方法です。

コードは以下になります

/** 画面左右の余白をグラデーションにする **/
body{
background: linear-gradient(to right, #1d23d0 0%, #fff 1.5%, #fff 98.5%, #1d23d0 100%);
}

え？これだけ？？って感じです。

何をしているかというと、どのサイトにも必ずあるbodyタグ（つまりページ全体）に対してグラデーション表示をしてちょ！というたった１行のコードです。

linear-gradientは何も指定しないと、上から下に向かって色が変化するようになっていて、今回のように「to right」とすることで左から右になることは知ってました。でも細かくどの割合でというのが指定できるというのは考えつきませんでした。

linear-gradient(to right, #1d23d0 0%, #fff 1.5%, #fff 98.5%, #1d23d0 100%)

という行は

1. 「to right」で左から右に向かって指定色に変化するようにしなさい
2. 画面の一番左の段階（0%）では#1d23d0(青色)にしなさい
3. 画面の一番左から画面の少し右（1.5%）の段階では白（#fff）になるようにグラデーションにしなさい
4. 画面の一番左から画面の大きく右（98.5%）の段階では白のままにしなさい
5. 画面の一番左から一番遠い（つまり一番右＝100%）ところは#1d23d0(青色)にしなさい

※つまり98.5%段階の白から100%段階の#1d23d0までグラデーションにしなさいってこと

こんな風に書かれているんです。単色なら割合の指定ができると思い込んでいた私の勘違い、gradientでも同じことができるんですね～～（笑）。

で出来上がったのがこのページの左右余白のグラデーション表示ということです。

出来てみたら超簡単！！でした。

前述しましたが、WordPressに限らずhtmlで書かれたページには必ずbodyタグがありますから、↑のコードをCSSへ追記すれば即座に左右がこのページと同じようになります。

あとはご自身のページで色や割合を調整したり、ヘッダーの情報などと被ってしまう部分があれば調整するだけで簡単に左右グラデーションの完成です。

ちなみにこの割合はいくらでも追加できますから、もっと細かく割合と色を加えて波のようにするのもありかもしれません。

最近ではWordPressのサイトが本当に増えてて、パッと見て「あ、このサイト、〇〇テーマだな」とソース見なくても何となく分かる位、人気のテーマを使用する比率が高くなっていると思いますから、ほんのちょっとだけオリジナリティを出す方法として、ぜひ余白の左右グラデーションを使ってみてください。

【ha-Basic】テーマならではの設定

ここからは【ha-Basic】テーマを使用されている方向けの情報です。

上のコードで左右グラデーションさせると

1. グローバルメニュー
2. トップページヘッダーの視差画像
3. トップページヘッダーのSlickスライダー

の３つがグラデーション部分と重なってしまいます。そこで以下のコードを追記して、それらを左右方向に少しだけ小さくします。

/** パソコン表示時の設定 **/
@media screen and (min-width: 768px){
/* ヘッダーナビを中央揃えにして左右グラデーションにかからないようにする */
#header-nav {
margin: 0 auto;
max-width: 97%;
}
/* ヘッダー下の線をなくす */
header{
border-bottom:none;
}
/* トップページの視差画像の幅調整 */
#site-top-image {
background-size: 97% auto;
}
/* トップページのスライダーの幅調整 */
.header-slider.slick-initialized.slick-slider {
width: 97%;
margin: 0 auto;
}
}