当サイトのランキング表示を作ってみました‼︎

こんにちは、管理人の@ha_takedenです。本日は、前々から気になっていた、“Wordpress Popular Posts”プラグインを利用してランキング表示が簡単に出来るという事を知ったので、この度設置してみました。

スポンサーリンク

そもそものきっかけ!

そもそも、ランキング表示をなぜしたくなったのかというと…。まずは、ランキングのサムネイルが繋がって表示されるのが嫌で、どうすれば間に隙間を設ける事が出来るのか、色々調べていた時に、これで自由自在!WordPress Popular Postsで人気記事を任意の箇所に表示する3つの方法(プラグイン使用)
このサイトに辿り付きました。【後述】

サムネイルの隙間を作る方法がついにわかりました‼︎

わかってしまえば、たわいも無い事でした。答えは、wpp.cssに修正をかける事で解決しました。

wpp.cssのthumbnail stylesの所
(旧)margin:0 10px 0 0; を
(修正後)margin:0 10px 10px 0;
に修正をかける事で10pxの隙間が無事表示できました。


photo credit: Peregrino Will Reign via photopin cc

そういう訳でいよいよランキングページの作成‼︎

まずは、どういう仕組みで表示されるのか全くわからない為、下記サイトを拝見して勉強しました。

これで自由自在!WordPress Popular Postsで人気記事を任意の箇所に表示する3つの方法(プラグイン使用)
こちらのサイトを参考にさせていただき、固定ページに作成する方法を採用しました。

ランキングページの作成‼︎

まずは、固定ページを作成しまして下記のコードを入力しただけです‼︎

固定ページを作成して、メニューに表示させてみました!

アクセスランキングをタップをして、ランキング表示をさせてみました。

wpp.cssのデザインを踏襲する為、サムネイル同士が10px離れて落ち着いて表示については、概ね満足しております!
リストのドット(・)表示については、Stinger5側のスタイルシートを貪らないといけないので今回はこれで良しとします‼︎
次回また何かわかれば記事にします!
ブログランキングに参加しております。記事が面白かったり、ご賛同頂けましたら、清き一票頂けましたら嬉しいです‼︎↓↓↓

Macintoshランキングへ

こちらのアプリを使って投稿しました。

するぷろ – 迅速かつ簡単にブログを投稿できるエディタ
カテゴリ: ソーシャルネットワーキング, 仕事効率化

ha-takeden.com Facebookページ『いいね!』
この記事をお届けした
Ha-takedenの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク

フォローする

おすすめ記事