賢威7.0

賢威7:サイト最上部に境界線を入れる方法

keni-header-bar-thumbnail

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回は簡単なTipをご紹介します。

特に企業サイトなどで、ヘッダーの一番上に少し太めの(5pxほどの)境界線が入っているサイトがありますよね。
うちのサイトにもサイト最上部に入っている、黄緑色のやつです。

今回の記事では、WordPressテーマ:賢威7サイトにそんな境界線(ヘッダーバー)を入れる方法を紹介したいと思います。

カスタマイズ前

↓ 賢威7をインストールしたばかりの状態(ここではクール版を使用)

keni-site-top-bar-before-1

カスタマイズ後

カスタマイズ 1

↓ 緑色の境界線をサイトトップに追加

keni-site-top-bar-after-1
カスタマイズ 2

↓ 境界線の太さを調整し、青に変更

keni-site-top-bar-after-2

[ad]

1. CSSファイルを編集

サイト最上部に表示するような境界線は、今回紹介する方法以外にHTML+CSSで作る方法もあります。
でもスタイリングのためだけのHTMLはあまり書かない方が良いと思うんですよね。

なのでここではHTMLを使わずに、CSSの :before 擬似要素のみでヘッダーバーを作っていきます。

親テーマ(賢威7本体)の base.css や子テーマの style.css など、お使いのCSSファイルに以下のコードを追加すると、、、

#top:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 5px;
    background: #81d415;
}

サイト最上部に、緑色の境界線が5pxの太さで追加されました。

keni-site-top-bar-after-1

2. お好みの色、太さにするには

先ほど追加した境界線を別の色にする場合は background プロパティを、太さを変更するには height プロパティを変更します。

例えば、青い境界線を10pxの太さで追加するには、追加するCSSコードは下のようになります。

#top:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;   /*← 境界線の太さ*/
    background: #2DB1FF;    /*← 境界線の色*/
}

↓ コード編集後

keni-site-top-bar-after-2

このような要領で、お好みの太さ、色にすることができます。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。