Vaster2｜ヘッダーにある一番上の青いラインの消し方。

みなさんこんにちは、soeパパです！
今回はVaster2のヘッダーにある青いラインの消したい場合の方法についてのお話です。

青いラインとはブログの一番上にある青い線のことですね。
簡単なので消し方と色の変え方を解説します。

一番上の青ラインのCSS

青ラインのデザインを決めているコードを探します。
ひらがなで「ヘッダー」と検索しましょう。

/*   ヘッダー
--------------------------------------- */
.Header{
width:100%;
border-top:7px solid #008ec2;
background-color:#fff;
padding-bottom: 30px;
}

上記のコードの赤文字の部分が青ラインの設定です。

青いラインの消し方

/*   ヘッダー
--------------------------------------- */
.Header{
width:100%;
border-top:7px solid #008ec2;
background-color:#fff;
padding-bottom: 30px;
}

先ほど検索したCSSの赤文字を１行削除するだけです。
これで青いラインがなくなります。

青いラインのデザインを変える

次は消さずに色を変えたり太さを変えたい場合のカスタマイズ方法です。

青ラインの色を変える方法

/*   ヘッダー
--------------------------------------- */
.Header{
width:100%;
border-top:7px solid #008ec2;
background-color:#fff;
padding-bottom: 30px;
}

色を変更する場合は赤文字のところのカラーコードを変更します。

「＃」の後の６文字を変更すると色が変わります。
赤であれば「#ff0000」もしくは「red」と入れれば赤いラインに。
border-top:7px solid #ff0000;
border-top:7px solid red;
カラーコードの場合は「＃」が必要ですが「red」と指定する場合は不要。

原色大辞典：
https://www.colordic.org/

コチラのサイトを参考にコードを探すと簡単です。

青ラインの色を変える方法

/*   ヘッダー
--------------------------------------- */
.Header{
width:100%;
border-top:7px solid #008ec2;background-color:#fff;
padding-bottom: 30px;
}

ラインの太さを変える場合は赤文字の数値を変更します。
７pxになっているので数値を小さくすれば細く、大きくすれば太くなります。

まとめ

ヘッダーはブログの印象を決める大きな要素なので自分なりのカスタマイズをしたいところですよね。一番上のラインを消したり変更したりするのは簡単なので試してみてくださいね。

今日のお話はここまで！
それではまたお会いしましょう〜

Vaster2 カスタマイズ