お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

STORK(ストーク)の「ヘッダー下お知らせリンク」をカスタマイズする方法

投稿日:2017年9月8日 更新日:



今回は有料のWordPressテーマ「STORK(ストーク)」の「ヘッダー下お知らせリンク」をカスタマイズする方法をご紹介します!

ヘッダーのお知らせリンク

ヘッダーのお知らせリンクはこれだよ

  • 背景色を変えたい
  • 文字の前のアイコンを変えたい
  • もっとオリジナリティのあるお知らせリンクにしたい

そんなあなたへ向けた記事です!

\趣味ブログをはじめるなら/

クロネのブログ講座

ヘッダーのお知らせリンクとは

外観 > カスタマイズ > グローバル設定 で設定できます。

ヘッダーのお知らせリンク

ヘッダーのお知らせリンクはこれだよ

これから紹介するコードをコピペするだけでOKです。

コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪

子テーマについては「STORK(ストーク)で子テーマを導入する方法」で詳しく説明してあります。

WordPressでCSSを追加する3つの方法と各メリット・デメリット

背景色を変える

ヘッダーのお知らせリンクの背景色を変える

クリックでCSSを表示

/* --- ヘッダーラベル(背景色変更) --- */
.header-info a{
background-color: お好きなカラーコード;
}

背景をボーダーにする

ヘッダーのお知らせリンクの背景をボーダーにする

クリックでCSSを表示

[box class="blue_box"]/* --- ヘッダーラベル(ボーダー) --- */
.header-info a{
background: repeating-linear-gradient(-45deg, お好きなカラーコード①, お好きなカラーコード① 5px, お好きなカラーコード② 0, お好きなカラーコード② 10px);
}
[/box]

カラーコード①②はそれぞれ同じ色にしてね!サンプルはチカチカするけど薄い色ならきれいだよ。

背景をグラデーションにする

ヘッダーのお知らせリンクの背景をグラデーションにする

クリックでCSSを表示

/* --- ヘッダーラベル(グラデーション) --- */
.header-info a{
background: -moz-linear-gradient(top left, お好きなカラーコード①, お好きなカラーコード② 40%, お好きなカラーコード③ 60%, お好きなカラーコード④);
background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④));
}

背景を画像に変える

ヘッダーのお知らせリンクの背景を画像にする

クリックでCSSを表示

/* --- ヘッダーラベル(背景画像変更) --- */
.header-info a{
background:url(画像のURL)
}

文字色を変える

ヘッダーのお知らせリンクの文字色を変える

クリックでCSSを表示

/* --- ヘッダーラベル(文字色変更) --- */
.header-info a{
color: お好きなカラーコード;
}

文字の大きさを変える

ヘッダーのお知らせリンクの文字の大きさを変える

クリックでCSSを表示

/* --- ヘッダーラベル(文字の大きさ変更) --- */
.header-info a{
font-size: 数字px;
}

文字前も好きな文字に変える

ヘッダーのお知らせリンクの文字の前の文字を変える

クリックでCSSを表示

/* --- ヘッダーラベル(文字前に好きな文字) --- */
.header-info a:before {
content: '好きな文字';
}

文字前のアイコンフォントを変える

ヘッダーのお知らせリンクの文字の前のアイコンフォントを変更

クリックでCSSを表示

[box class="blue_box"]/* --- ヘッダーラベル(アイコン変更) --- */
.header-info a:before {
font-family: "fontawesome";
content: '\f0a4';
}
[/box]

アイコンフォントを変更したい場合は、Font Awesomeにいき下記の画像を参考にして設定してみてください。青文字の部分を変えればOKです!

FontAwesomeの使い方

リンク文字の前のアイコンの色を変える

ヘッダーのお知らせリンクの前のアイコン色を変える

クリックでCSSを表示

/* --- ヘッダーラベル(文字色変更) --- */
.header-info a:before{
color: お好きなカラーコード;
}

太文字にする

リンクの文字を太文字にする

[box class="blue_box"]/* --- ヘッダーラベル(太文字) --- */
.header-info a{
font-weight: bold;
}
[/box]

リンク前の文字やアイコンを太文字にする

[box class="blue_box"]/* --- ヘッダーラベル(太文字) --- */
.header-info a:before{
font-weight: bold;
}
[/box]

上にボーダーを引く

上にボーダーを引く

クリックでCSSを表示

/* --- ヘッダーラベル(上にボーダー) --- */
.header-info {
border-top: 数字px solid お好きなカラーコード;
}

[aside type="normal"]solidを変更するとボーダーの種類を変更できます。

  • solid → 実線
  • double → 二重線(3px以上必要)
  • dashed → 破線
  • dotted → ドット

[/aside]

下にボーダーを引く

下にボーダーを引く

クリックでCSSを表示

[box class="blue_box"]* --- ヘッダーラベル(下にボーダー) --- */
.header-info {
border-bottom: 数字px solid お好きなカラーコード;
}
[/box]

サンプルのボーダーは「dashed」です。

おわりに:ストークの「ヘッダー下お知らせリンク」も簡単に変更できる!

コピペで簡単にストークの「ヘッダー下お知らせリンク」をカスタマイズする方法をご紹介しました。

[voice icon="https://palulog.com/wp-content/uploads/2017/07/IMG_2811.png" name="ぱる" type="r palu"]組み合わせてオリジナルのものを作ってね~[/voice]

あなたが素敵なブログをつくれますように。ぱるでした!

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2019 All Rights Reserved.