今回は有料のWordPressテーマ「STORK（ストーク）」
の「ヘッダー下お知らせリンク」をカスタマイズする方法をご紹介します！
ヘッダーのお知らせリンクはこれだよ
- 背景色を変えたい
- 文字の前のアイコンを変えたい
- もっとオリジナリティのあるお知らせリンクにしたい
そんなあなたへ向けた記事です！
ヘッダーのお知らせリンクとは
外観 > カスタマイズ > グローバル設定 で設定できます。
ヘッダーのお知らせリンクはこれだよ
これから紹介するコードをコピペするだけでOKです。
コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪
子テーマについては「STORK（ストーク）で子テーマを導入する方法」で詳しく説明してあります。
WordPressでCSSを追加する3つの方法と各メリット・デメリット
背景色を変える
クリックでCSSを表示
/* --- ヘッダーラベル（背景色変更） --- */
.header-info a{
background-color: お好きなカラーコード;
}
背景をボーダーにする
クリックでCSSを表示
/* --- ヘッダーラベル（ボーダー） --- */
.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を表示
/* --- ヘッダーラベル（アイコン変更） --- */
.header-info a:before {
font-family: "fontawesome";
content: '\f0a4';
}[/box]
アイコンフォントを変更したい場合は、Font Awesomeにいき下記の画像を参考にして設定してみてください。青文字の部分を変えればOKです！
リンク文字の前のアイコンの色を変える
クリックでCSSを表示
/* --- ヘッダーラベル（文字色変更） --- */
.header-info a:before{
color: お好きなカラーコード;
}
太文字にする
リンクの文字を太文字にする
[box class="blue_box"]/* --- ヘッダーラベル（太文字） --- */[/box]
.header-info a{
font-weight: bold;
}
リンク前の文字やアイコンを太文字にする
[box class="blue_box"]/* --- ヘッダーラベル（太文字） --- */[/box]
.header-info a:before{
font-weight: bold;
}
上にボーダーを引く
クリックでCSSを表示
/* --- ヘッダーラベル（上にボーダー） --- */
.header-info {
border-top: 数字px solid お好きなカラーコード;
}
[aside type="normal"]solidを変更するとボーダーの種類を変更できます。
- solid → 実線
- double → 二重線(3px以上必要)
- dashed → 破線
- dotted → ドット
[/aside]
下にボーダーを引く
クリックでCSSを表示
* --- ヘッダーラベル（下にボーダー） --- */
.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]
あなたが素敵なブログをつくれますように。ぱるでした！