芝生やDIY等のライフハックやWeb制作情報を発信するメディア

メニューを開く

【GIF画像1枚で実装！】サイドバーの「人気記事」にランキングアイコンを簡単に表示する方法

Web2018年2月7日

ブログのサイドバーにある「人気記事一覧」に、「1」「2」「3」などアイコンでナンバリングされているのをよく見かけますよね。これらはcssの疑似要素「:after」や「:before」などを使って実装することが可能で、先日Web屋の芝生DIYでも実装を行いました。

cssだけで実装することも可能ですが、少し動き（アニメーション）を持たせつつデザインにもこだわりたかったので、GIFアニメを併用して実装しました。これにより、リクエストする画像は1枚増えますがcssの記述は簡略化することができます。

本記事では、GIF画像1枚でランキングアイコンを実装する方法をご紹介させていただきたいと思います。

サンプルコード

html

<ol class="rank">
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
<li><a href="#"><img width="80" height="80" src="サムネイルの画像パス" alt=""><span class="txt">記事タイトル</span><p><span class="cat">DIY</span>yyyy年mm月dd日</p></a></li>
</ol>

css

/*サイドバー人気記事のベースレイアウトを構成*/
ol.rank{
    list-style-type:none;
    margin-bottom:0;
}

ol.rank li{
    margin:0 0 10px 0;
    border-bottom:1px dotted #ccc;
    background:#ecece0;
    position:relative;
}

ol.rank li p{
    padding:5px 0 0 0;
}
    
ol.rank li a{
    display:inline-block;
    padding:0 0 10px 90px;
    background:none;
    min-height:100px;
    text-decoration:none;
    z-index:9999;
}

ol.rank li img{
    position:absolute;
    left:0;
    top:0;
    z-index:9998;
}

/*ランキングアイコンのcss*/
ol.rank li:before{
    content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:22px;
    height:22px;
    background:url("/shared/images/arrow_05.gif");
    background-size:22px;
    z-index:9999;
}
ol.rank li:nth-child(1):before{background-position:left top;}
ol.rank li:nth-child(2):before{background-position:left -22px;}
ol.rank li:nth-child(3):before{background-position:left -44px;}
ol.rank li:nth-child(4):before{background-position:left -66px;}
ol.rank li:nth-child(5):before{background-position:left -88px;}
ol.rank li:nth-child(6):before{background-position:left -110px;}
ol.rank li:nth-child(7):before{background-position:left -132px;}
ol.rank li:nth-child(8):before{background-position:left -154px;}
ol.rank li:nth-child(9):before{background-position:left -176px;}
ol.rank li:nth-child(10):before{background-position:left -198px;}

解説

サイドバーに表示されている「画像左＋テキスト右」のレイアウトを想定したものになります。あくまでもWeb屋の芝生DIYの設計をベースとしたサンプルソースとなりますので、どうかご容赦ください。

  • ※流用すればある程度体裁は整いますが、各cssの詳細な値などはサイトにあわせてご調整ください

まず、ランキングアイコンとして以下のようなGIF画像を用意します。スマートフォンも想定して、実際に表示するサイズの2倍サイズで作成しておくのがポイントです。「1」「2」「3」だけ色味の体裁を変えつつアニメーションを付け、「4」～「10」は汎用的なデザインにしています。

疑似要素beforeでGIF画像を背景置換で表示します。widthとheight、またbackground-sizeの値は作成した画像横幅の2分の1で設定します。

あとは疑似要素:nth-child(n)でランキング「1」～「10」それぞれ、background-positionを設定すればOKです。

余談：GIFアニメのフレーム間隔に注意

GIFアニメを作成する際、フレーム間隔に注意してください。ブラウザによって対応しているフレーム間隔は異なるため、「0.06秒（16.67fps）以上」で作成する必要があります。各ブラウザで対応しているフレームレートの限界を超えると、強制的に「0.10秒」で再生されてしまうためです。

今回GIFアニメを作るのは久々でこの特性をすっかり忘れており、最初アニメーションを滑らかにしたいがために0.01秒とか0.02秒で書き出して「あれー？なんかプレビューよりもブラウザで見るとめっちゃ遅く（速く）になってる。。。」という状況に陥りました。

繰り返しになりますが、GIFアニメを作成する際は「0.06秒（16.67fps）以上で作成する」と覚えておきましょう。

まとめ

無機質でシンプルな形状のランキングアイコンであればcssで事足りますが、ある程度こだわったデザインでさらに動きを付けたい、となると中々cssでのデザイン実装は難しかったり、出来たとしてもcssが冗長になりメンテナンス性が低くなってしまいがちです。

ご紹介させていただいた実装方法であれば、画像のリクエスト数は1枚増えるもののこの程度のGIF画像であればそんなに重くない（ご紹介した画像は64KB）ですし、デザインを変更したい場合もGIF画像1枚差し替えれば済むので、メンテナンス性も高いです。

意外と同じような実装をしているサイトは少ないように感じますが、技術的なハードルもそんなに高くないので結構おすすめです。ランキングアイコンを際に実装する際の1つの選択肢としてご参考になれば幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

必須
必須
本文必須

  • ※承認制のため、即時には反映されません。

ページの先頭に戻る