CSSと見出しでランキング記事っぽいものを作ってみる

スポンサーリンク

ブログをやっていると書きたくなるランキング記事。第3位は何々で…みたいな順番に発表していく感じのやつです。CSSのカスタマイズだけでなんとかそれっぽくできないかと思い色々やってみました。

スポンサーリンク

このカスタマイズの意味

有料テーマだとショートコードなどで簡単にテンプレを呼び出せるらしいランキング表示ですが、僕は無料のテーマなので自力でカスタマイズするしかありません。別に普通にテキストを打って第3位○○…第2位○○…とか書いていってもいいのですが、せっかくなので見栄えも気にしてCSSを弄ってみることにします。そうすることによって見ている人の目を引くこともできるかも知れません。

スポンサーリンク

H2見出しを利用

極力弄りたくないので、このサイトに適用しているいつものH2見出しのデザインの上に順位が表示されるようにしたいです。こちらのサイトにあった見出しのデザイン例を参考にさせていただき、class指定で見出しの上に順位が表示されるようなカスタマイズを目指してみました。

スポンサーリンク

Font Awesomeでトロフィーを

最初は王冠のアイコンをランキングの左横に表示できたらそれっぽいかなーと考えていたんですが、どうやらFont Awesomeには王冠はないみたい。他のやり方で表示させる方法もあるのですが、Font Awesomeの中にトロフィーのアイコンがあったので今回はこれを表示することにしました。実際にやってみるとむしろこっちのほうが良いかも知れないと思えてきました。

実際にやってみる

まずはstyle.cssに以下の記述をします。今回はとりあえずTOP3まで表示できるようにしてみました。3位は銅、2位は銀、1位は金とそれぞれ背景色を設定してランキングをイメージしやすいようにしています。

.top3h2:after{
	position: absolute;
  font-family: FontAwesome;
  content: '\f091\ 第3位';
background: #c47022;
color: #FFF;
left: 0px;

bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
 	font-size: 0.938em;
 	line-height: 1;
 	letter-spacing: 0.05em
}

.top2h2:after{
	position: absolute;
  font-family: FontAwesome;
  content: '\f091\ 第2位';
background: #C0C0C0;
color: #FFF;
left: 0px;

bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
 	font-size: 0.938em;
 	line-height: 1;
 	letter-spacing: 0.05em
}
.top1h2:after{
	position: absolute;
  font-family: FontAwesome;
  content: '\f091\ 第1位';
background: #e6b422;
color: #FFF;
left: 0px;

bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 3px 7px 1px;
 	font-size: 0.938em;
 	line-height: 1;
 	letter-spacing: 0.05em
}

これで下準備は完了です。あとはランキング表示させたいH2見出しに、例えば3位なら<h2 class=”top3h2″>○○○○</h2>と記述すればそれっぽく表示されます（○○は見出しの文章）。

まとめ

とりあえずですがランキングをちょっとかっこよく表示することができたかと思います。もっと上手でスマートなやり方があるかも知れませんが今回はこんな感じで…。また何か気づいたり指摘されたら修正したいと思います。自力で手軽にランキング記事をそれっぽく書きたいと思っている方は、よかったら参考にしてみて下さい。

コメント