ol要素をWebアイコン背景＆Webフォント数字にしたくて試行錯誤した
ブログのテーマを新しくしようと作成中でして、それに伴い書けそうなネタも溜まってきてるんですが、テーマ公開まで待ってたらいつまで経っても記事にできないなと思ったので、先に小ネタとして出していこうかなとおもいます！ というわけでWebフォントを使った数字&背景画像のお話です。
経緯
ulやolのリストマークに画像を使うっていうのは前からあるんですけど、今はFontAwesomeなんかのWebフォントを使うんですねー！ すごい。未来きてた（今更）。ちなみに、ふつうに自分で用意したpng画像＋Webフォントでol要素をスタイリングするという記事、書いたことありました。
2012年の記事かー。時代を感じる…。。
さて今回、ol要素のリストマークをFontAwesomeのアイコンを使って、さらにWebフォントのちょっとオシャレな数字を使いたいな…、と思ったのですが。数字部分を表示するのにliのbefore要素を使っちゃうので、背景画像はafter要素で指定して、重ね順を調整したらどうだろう…？ と思って試してみたら、いけるんじゃない！？ と思ったのです。
ただ、調べた感じ、ol要素にそこまでやってる人ってあんまりいないような…、マイナーならまだしも、邪道なやり方とかだったらすみません…！
参考
ol要素の数字のリセットとか、FontAwesomeを背景画像にするのにとってもわかりやすかったです！
FontAwesome4→5で仕様が結構変わってて、font-weightを指定してやらなきゃいけなかったんですね(;´Д`) 表示にめちゃくちゃハマったので、本当に助かりました！ ありがとうございます！！
実装
まずはhead部分でFontAwesome5と任意のWebフォントを読み込み。バージョンは現時点（2018/2/13）のものです。
<head> <link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'> <link href='https://fonts.googleapis.com/css?family=Federo' rel='stylesheet'> </head>
テキストのみ
ランキングっぽくしたくて、FontAwesomeのトロフィー画像を使ってます。疑似要素をサポートしているブラウザなら大丈夫なはず…、いちおうIE9以上では動作確認しました。テキストシャドウはIE10以上じゃないと見えませんが。
HTML
<ol class="rnk1"> <li>いち</li> <li>に</li> <li>さん</li> </ol>
リスト自体は、シンプルにこんな感じ。
CSS
ol.rnk1{
list-style: none;
counter-reset: number; /*数値リセット*/
line-height: 1;
}
ol.rnk1 li{
position: relative;
padding-left: 2em;
margin-bottom: 1.3em;
}
ol.rnk1 li:before{ /* 数字部分 */
position: absolute;
counter-increment: number; /*ナンバリング生成*/
content: counter(number);
font-family: 'Federo'; /* webフォント */
font-weight: bold;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* 凸表現 */
font-size: 0.8em;
top: -0.3em; /*位置*/
left: 0;
width: 2.2em; /* センタリング用幅 */
text-align: center;
z-index: 2;
}
ol.rnk1 li:after{ /* トロフィー部分*/
position: absolute;
font-family: 'Font Awesome 5 Free';
content: '\f091'; /* trophy */
font-weight: 900; /* Solid */
color: #b9b15f;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.8); /* 凹表現 */
font-size: 1.6em;
top: -0.2em;
left: 0;
z-index: 1; /* 数字の下へ */
}
細かい数値あたりはフォント変えたりしたら違うと思うので、適宜調整くださいませ。
22行目で数字部分の要素にwidthを指定してるのは、背景画像の幅と合わせると数字のセンタリングがきれいにいくかな、と思ったからです。フォントの種類にもよりますが、「1」なんかは他の数値より幅が狭いので、左詰めだと真ん中にこなかったので(´・ω・)
FontAwesome5を使う場合は30行目のfont-weightが要ります！ ここにハマりました…。このあたりは前述の参考サイトさんがとってもわかりやすいですのでご参照ください！
画像＋テキスト
実際私はどう使いたいかというと、ブログの人気記事ランキングみたいな感じにしたかったんですね。サムネイル画像も含めて、こんなふうにしたかったんです。サイドバー用です。
HTML
<ol class="rnk2"> <li><img src="xxx.png" /><p><a href="#">いち</a></p></li> <li><img src="xxx.png" /><p><a href="#">に</a></p></li> <li><img src="xxx.png" /><p><a href="#">さん</a></p></li> </ol>
olリストに画像も含めて入れています。
CSS
ol.rnk2{
list-style: none;
counter-reset: number; /*数値リセット*/
line-height: 1;
}
ol.rnk2 li{
position: relative;
padding-left: 4.5em;
margin-bottom: 1.5em;
}
ol.rnk2 li:before{ /* 数字部分 */
position: absolute;
counter-increment: number; /*ナンバリング生成*/
content: counter(number);
font-family: 'Federo'; /* webフォント */
font-weight: bold;
color: #fff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* 凸表現 */
font-size: 1.3em;
top: 2.3em; /*位置*/
left: 0;
width: 3.1em; /* センタリング用幅 */
text-align: center;
z-index: 2;
}
ol.rnk2 li:after{ /* トロフィー部分*/
position: absolute;
font-family: 'Font Awesome 5 Free';
content: '\f091'; /* trophy */
font-weight: 900; /* Solid */
color: #b9b15f;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.8); /* 凹表現 */
font-size: 3.6em;
top: 0.7em;
left: 0;
z-index: 1; /* 数字の下へ */
}
Webフォントの位置や大きさが違うだけで、とくには上のと変わりません。
以上です！ お気づきの点があったらぜひ教えてください！ ←って言ったら本当に教えてもらったので（うれしい！）px単位からem単位でちょっと書き直してみました！ 使いどころわかってなかった…。ありがとうございました(*｀･ω･)ゞ
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）
YouTubeでQ&Aコンテンツを企画しています
運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。