FC2ブログにタブで切り替えで2つの人気記事ランキングを表示

同一ページで表示できるものを、タブで切り替えるものを導入しました。

PC用表示では最下部に、片方は今日の人気記事、もう一つに月間の人気記事の2つを表示。


スマホ用では、片方を過去記事の更新記事一覧を表示。



これはケータイWatchで見て、前々からやって見たいと思っていた事。

縦軸に追加していくのではなく横軸に追加なので、スペースを取らずサイトがすっきりすると思います。

表示させているランキングツールはRankletとというツールなのですが、通常無料プランは一個しかウィジェットを表示できない。私の場合は以前キャンペーンをやっていて当選し、無料プランではあるが2個のウィジェットが同時表示可能になってます。


Rankletはそんなことで、2つ以上の表示は有料プランになるが、スマホ用のようにランキングだけでなく、別のものも設置すると面白いかと思います。

導入方法はHTMLとCSSに追加するだけで簡単に導入。デザインもいいので参考サイト様のそのままを利用させてもらいました。


1点だけ変更した箇所で、デフォルトでは横が700pxと指定されていて、そのまま利用すると端末によっては横が見切れてしまいます。


この部分を変更し、見切れないように変更。

[Before]
width: 700px;

[After]
width: 100%;

タブの個数も追加や削除できるので、色々応用すると面白そうです。

現在PC用での、右プラグインの、更新やコメントをこれにしようかと思ってますが、どうも右プラグインだとデザインが崩れるので調整中。

コメントを見る（0）