【ワードプレス】タイトル下のテキストリンクをカスタマイズ【STORK】

STORK ではタイトル直下にこういう帯状のテキストリンクを設置できます。この部分も色々カスタマイズできるのでちょっくらやってみます。STORK 以外でもセレクタ(指定場所)を変えれば応用が効きます。

/*ムクムク拡大*/
#container .header-info a{
background: black;
color:white;
font-size:1em;
line-height: 2em;
transition: 1s; }#container .header-info a:hover{
background: red;
color:black;
font-size:2em;
line-height: 3em;
opacity:1;
font-weight:bold;
transition: 1s;
}.header-info a:before{
display:none;
}

【hover】マウスオン時を指定します。

【line-height】帯の縦幅を指定。値を大きくすればするほど帯の幅が広がります。

【transition】何秒かけて変化するかを指定します。この設定は通常時とマウスオン時、両方に与える事ができます。例えば【hover側】の値をゼロにすると、マウスが乗った瞬間に変化が起きます。今回は1秒に設定しているので、1秒かけて徐々に変化します。

【before…display:none;】は矢印を非表示にする命令です。

 

矢印を他のアイコンに変える

/*ヘッダーテキストリンクのアイコン変更*/
.header-info a:before{
font-size:1em;
font-family: “fontawesome”;
content: ‘\f14a’;
margin:0px 10px;
}.header-info a:after{
font-size:1em;
font-family: “fontawesome”;
content: ‘\f14a’;
margin:0px 10px;
}

【before】は『.header-infoの手前』を指定

【after】は『.header-infoの手前』を指定

【font-family】はフォントの種類を指定するコード。MSゴシックやMS明朝を指定する場合にも使いますが、今回指定しているフォントは『fontawesome』超簡単に言うとアイコン画像の集合体です。

【content】ここで実際に表示するアイコンを指定。数字を適当に変えればアイコンも変わりますが、完全なる英数コードで管理されている為、目的のアイコンを探す時は下のリンクから探して下さい。

【ピクセルラボ fontawesome アイコン検索】

僕の場合はYouTubeっぽい再生ボタンを配置してます。色・影・丸みなども自由にカスタマイズできるので色々やってみてください。よく使うCSSコードをまとめた記事もありますのでカスタマイズの参考にしてください。

【ワードプレス】よく使うCSSコード一覧