【STORK】『タイトル下のテキストリンク』をCSSカスタマイズ

 

これはおそらく【STORK】のみのカスタマイズになると思います。

デフォルトで設定可能な上図のテキストリンク部分を自由自在にカスタマイズする方法を紹介します。もちろん『マウスオン時』の設定もできます。

今回は『通常時の帯の縦幅を少し大きくし、マウスオン時に背景色を赤に変えながら全体的なサイズを拡大する』というカスタマイズを行います。

マウスを乗せると・・・

 

 

ムクムクムクーっと背景・文字色を変えながら大きくなるように命令を与えてみます。以下のCSSコードを【追加CSS】にコピペしてカスタマイズを続けてください。

 

/*ヘッダー下テキストリンクをカスタマイズ*/

#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;
}

今回のCSSは3つのコード束に分かれてます。どのコードも一行目で『カスタマイズ場所の指定』を行います。【カテゴリーをカスタマイズ】【タグをカスタマイズ】と同様にそれぞれ文字の大きさや色を指定。

コード束②の【hover】は『マウスオン時』を指定します。

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

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

コード束③は『デフォルト付属の矢印を非表示にする命令』となります。下の方法を使えば『矢印を他のアイコンに置き換える』という事も可能です。気になる方はやってみてください。

最後の『display:none;』はデフォルトで表示されている矢印みたいなアイコンを非表示にさせる命令です。もっと言えば『テキストの前を非表示』っていう命令。

下の項目『矢印を他のアイコンに変える』にて『テキストの前にアイコンを挿入する場合』は

.header-info a: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 アイコン 一覧】

今回僕は『チェック』のアイコンに変更してみました。【before】と【after】を使って『.header-info』を挟むようにアイコンを配置したカスタマイズ後は以下図の様になります。

 

もちろんマウスオン時にも同じように変化してくれます。

 

その他のカスタマイズ例

CSSコード一覧表を確認しながら色々やってみてください。例えば【box-shadow】で帯に影を付けてみたり。

 

【border-radius】で角を丸めてみたり。

 

まあ『見出しの装飾』同様、好き勝手できます。

 

危うくキンドル読み放題の罠にハマる所でありました