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

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

ここあです。

 

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

やっぱり欲しい人気記事

 

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

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

 

また、訪問者から見ても

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

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

 

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

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

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

 

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

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

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

 

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

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

え?何で?と、ちょっと困惑しました^^;

 

STORK」は初心者でも簡単に

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

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

 

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

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

 

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

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

CSSを全く使わずとも…

 

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

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

 

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

ある意味「AFFINGER5」は

いじり甲斐のない」テーマなのですが…(笑)

 

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

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

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

 

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

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

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

 

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

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

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

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

 

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

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

 

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

え?それだけ?」と思われても嫌なので…(笑)

 

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

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

【Before】

AFFINGER5人気記事

【After】

AFFINGER5人気記事

 

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

 

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

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

 

WordPress Popular Posts」導入手順

「WordPress Popular Posts」導入手順

 

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

すでに「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マークアップ」用のコードを

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

 

タイトルの前/後:

前半部分の枠内:<h4 class="menu_underh2">

後半部分の枠内:</h4>

 

投稿の前 / 後:

前半部分の枠内:<div class="kanren ">

後半部分の枠内:</div>

 

投稿の HTML マークアップ:

<dl class="clearfix number">
<dt >{thumb}</dt>
<dd>
<h5>{title}</h5>
<div class="smanone2"><p>{summary}</p></div>
</dd></dl>

 

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

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

 

AFFINGER5「人気記事」の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コードの調整方法も解説しておきますね…。

 

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

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

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

 

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

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

dl.number:before {
background:#fbc02d;
}

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

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

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

 

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

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

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

 

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

dl.number:before {
color:#fff;
}

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

 

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

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

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

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

 

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

いると思います。

 

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

dl.number::before{
border-radius:15px;
padding:2px 5px
}

border-radius:15px;の数字を

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

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

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

 

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

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

 

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

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

 

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

ついでに読んでみよう!と思うものです。

 

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

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

 

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

 

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

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

思いもよりませんでしたが…(笑)

 

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

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

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

 

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

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

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

 

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

「AFFINGER5」ではありますが…

 

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

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

 

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

 

カスタマイズに興味のある方はこちらの記事も参考にどうぞ…^^

 

AFFINGER5カスタマイズ!

 

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

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。