AFFINGER5カスタマイズ！人気記事を美しく表示させる方法！

ここあです。

ワードプレスでブログを立ち上げると

やっぱり欲しい「人気記事」。

訪問者に「どの記事が一番読まれているか？」

非常に気になりますよね…＾＾

また、訪問者から見ても

「他の訪問者がどんな記事を読んでいるのか？」

非常に気になるところだと思います…

だから、私も「人気記事」の表示はある方が良いと思うし

「人気記事」を表示させるためのプラグイン

「WordPress Popular Posts」を導入しています。

「STORK」の場合は、プラグインを導入するだけで

そのまま記事がランクキング表示され

特に問題はなかったのですが…

テストサイトで使っている「AFFINGER5」では

「STORK」と同じように「人気記事」がランキング表示されず

「え？何で？」と、ちょっと困惑しました＾＾；

「STORK」は初心者でも簡単に

きれいなブログができるように設計されているので

他のブロガーと差別化しようと思ったら

このサイトのごとく「CSSを駆使」して

カスタマイズしまくらないといけないのですが…（笑）

「AFFINGER5」は設定項目が鬼のようにあるので

ある程度使い慣れてきたら「STORK」のように

CSSを全く使わずとも…

他のアフィリエイターと差別化できるぐらい

カスタマイズしやすい「テーマ」です。

なので、カスタマイズが大好物の私にとっては

ある意味「AFFINGER5」は

「いじり甲斐のない」テーマなのですが…（笑）

それでもやっぱり、テーマが変わると

他のテーマとは「同じようにいかない」ということも

非常に勉強になり、驚きました。

ということで、今回は「AFFINGER5」で「STORK」のように

「人気記事を美しく表示させる方法」を

ご紹介したいと思います＾＾

もしも、他のやり方を知っているというなら

それでいいのですが、特に…

• 私とは違う表示方法の仕方を知らない
• とりあえず「人気記事」をちゃんと表示させたい

という方は、ぜひ参考にしてみてくださいね。

「人気記事」カスタマイズ後のイメージ

先に、カスタマイズ後のイメージだけお見せしておきますね。

最後まで記事を読んでもらって

「え？それだけ？」と思われても嫌なので…（笑）

まずは「Before → After」だけ見てください＾＾

カスタマイズするとこうなります。

左が「カスタマイズ前」、右が「カスタマイズ後」です。

これを見て「お、やりたい！」と思った方のみ

読み進めてくださいね＾＾

「WordPress Popular Posts」導入手順

順番に説明していきますね。

すでに「WordPress Popular Postsが入ってるよ！」

という方は、必要なところまで読み飛ばしてください＾＾

それでは、ワードプレスのプラグイン

「WordPress Popular Posts」を

インストールしましょう。

ダッシュボードメニューから

「プラグイン」→「新規追加」をクリック。

プラグインの「新規追加」画面が表示されたら

検索ボックスに「WordPress Popular Posts」

と入力しましょう。

「WordPress Popular Posts」が表示されたら

「今すぐインストール」をクリックし

インストールが完了したら必ず「有効化」してください。

これで「人気記事」を表示するための下準備は完了です＾＾

「WordPress Popular Posts」の設定方法

「WordPress Popular Posts」がインストールできたら

あとは人気記事をきれいに表示させるための設定をします。

問題はここからですね＾＾

今回はAFFINGER5の「サイドバー」に

人気記事を表示させる方法をご説明致します。

ひとまず「サイドバー」に

「WordPress Popular Posts」のウィジェットを

追加しましょう。

ダッシュボードメニューから

「外観」→「ウィジェット」をクリックし

「ウィジェット」設定画面を開きます。

「ウィジェット」設定画面を開いたら

「サイドバーウィジェット」の▼をクリックし

「サイドバーウィジェット」に、先ほど追加した

「WordPress Popular Posts」のウィジェットを

ドラッグして中に入れます。

「サイドバーウィジェット」の中に

「WordPress Popular Posts」のウィジェットが入ったら

あとは設定を行うだけ＾＾

まずは基本的な設定から…

上から順番に説明していきますね。

• タイトル：好きなタイトルを付けてください。
• 最大表示数：5〜10が一般的です。
• ソート数：総閲覧数（推奨）
• 計測期間：全期間（推奨）
• 投稿タイプ：Post（推奨）
• タクソノミー：カテゴリー（推奨）
• アイクキャッチ画像：100 × 75px（推奨）

※ざっくりとしか設定していません＾＾；

ここまで設定できたら

「カスタムHTMLマークアップを使う」にチェックを入れて

一旦設定を保存してください。

ここで一番大事なのは…

「カスタムHTMLマークアップを使う」に

チェックを入れ「マークアップをする」ということです＾＾

マークアップを使わないと…

「人気記事」の表示は以下のようになります。

これではちょっと「人気記事」って分かりにくいですよね？

なので、これをもっと分かりやすくマークアップします。

WordPress Popular Posts」のマークアップ方法

「AFFINGER5」にインストールした

「WordPress Popular Posts」のウィジェットで

「STORK」のごとく「人気記事」を表示させるのはとても簡単。

最初は何も表示されていませんが

一度「カスタムHTMLマークアップを使う」にチェックを入れて

設定を保存すると以下のような「入力画面」が表示されます。

あとは、上の画像のごとく

以下「カスタムHTMLマークアップ」用のコードを

所定の場所にコピペしてください＾＾

タイトルの前/後：

投稿の前 / 後:

投稿の HTML マークアップ:

HTMLの「マークアップ」ができたら

最後にCSSで装飾します＾＾

AFFINGER5「人気記事」のCSSコード

それでは、以下の「CSSコード」記述しましょう。

ダッシュボードメニューから

「外観」→「カスタマイズ」→「追加CSS」の

設定画面を開いてください。

記述コードは以下の通りです。

CSSコード

.number {
position:relative;
}dl.number:before {
counter-increment:ranking;
content:counter(ranking);
position:absolute;
top:0;
left:0;
padding:2px 6px;
background:#fbc02d;
font-size:13px;
font-weight:bold;
color:#fff;
}h4 {
counter-reset:ranking;
}dl.clearfix.number{
margin-bottom:10px;
padding-bottom:10px;
}#side .st-author-description{
text-align:justify;
}dl.number::before{
border-radius:15px;
padding:2px 5px
}

「CSSコード」をコピペして設定を保存すれば

「人気記事」ランキングがきれいに表示されているはずです。

↓ こんな感じに…＾＾

あとはお好みで、ランキング表示のカタチや色を

微調整してくださいね。

「人気記事」のCSSコードカスタマイズ方法

最後にあなたが簡単に調整できる

「CSSコード」の調整方法も解説しておきますね…。

ランキング表示の色を変えたい場合

「人気記事ランキング」の色（サンプルで黄色の部分）を変えたい場合は

以下のコードで調整してください。

全てのコードは書いていませんので

以下、同じ場所を探してくださいね＾＾

上記コードのバックグラウンドカラー

background:#fbc02d;ここのカラーコードを変えると

「人気記事ランキング」の表示色が変更できます。

ランキング表示の文字色を変えたい場合

次に、「人気記事ランキング」の表示色ではなく

ランキングの数字の色（サンプルは白）を変えたいという場合。

そんな時は、以下のコード

color:#fff;の部分のカラーコードを変えてください。

ランキング表示のカタチを変えたい場合

あなたにコピペしてもらった

「ランキング表示」のCSSコードは

ランキングの数字が円形になっています。

しかし、これを「四角に変えたい！」という方も

いると思います。

そんな場合は、以下のコード

border-radius:15px;の数字を

「0px」に変更してください。

逆に、今後も「絶対円形にはしない！」という場合は

思い切って、この1行を丸々削除してもらってもOKです。

以上、簡単ではありますが…

「カスタマイズ」する場合は、参考にしてくださいね。

それ以外の部分はあまり触りすぎると

ややこしくなりそうなので割愛させていただきます＾＾；

「人気記事」ランキングは非常に大事！

検索エンジンの流入からくる訪問者は

もちろん「キーワード検索」をして

お目当ての記事を読みにくるわけですが…

せっかくあなたのサイトを訪れてくれたのに

「お目当ての記事だけ」を読んで帰してしまうのは

非常にもったいないですよね…。

なので、そんな時にサイトの「足止め役」として

活躍してくれるのが「人気記事ランキング」です＾＾

検索キーワードでヒットして

何となくサイトを訪れた訪問者でも

それなりに「気になる記事」があれば

ついでに「読んでみよう！」と思うものです。

だからこそ「人気記事ランキング」は

より分かりやすくしてある必要があるんですね…＾＾

まさか、これだけ優秀な「AFFINGER5」で…

人気記事ランキングの表示を

「カスタマイズしないといけない」とは

思いもよりませんでしたが…（笑）

もしかすると、私のように人気記事ランキングを

「もう少しちゃんと表示させたい」と思う人が

いるかもしれないと思ったので

他にもやり方があるのかもしれませんが

ひとまず、こうしたカタチで

カスタマイズ方法をご紹介致しました。

私にとってはまだまだこれから使いこなすべく

「AFFINGER5」ではありますが…

こうして気になることが見つかったら

また「記事として」ご紹介していきたいと思います。

最後までお読みいただきありがとうございました！