WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【WordPress】サイト作者独自のランキングコンテンツ(いわゆるなんちゃってランキング)を実装する方法

公開日:2018(平成30)年7月23日/最終更新日:

Knowledge Base パソコン



【WordPress】サイト作者独自のランキングコンテンツ(いわゆるなんちゃってランキング)を実装する方法|Knowledge Base

最近いろいろなWordPressのテーマで実装されてきているランキング表示。こんな感じのやつです。

WordPressで作ってる?作ってない?に関わらず、また、サイトを作ってる?作ってない?に関わらず、目にしたことのある方も多いのではないでしょうか??

この表現があるサイトの種類としては

  1. 何かのお悩みを解消するようなサイト
  2. サプリメントなどを販売するサイト
  3. 行楽地の案内や旅行の案内をするサイト

が多いですね。私ランキングというと例えばアクセス数とか販売数とか・・・何かを元にしたランキングなんだろうとすっかり信用していたのですが、どうもそうではないようですね。

勝手ではありますが、これを私は「なんちゃってランキング」って呼んでます。だって何も根拠がないんですから・・・。

まあまあ表現の自由というか何というか、見た人の役に立つといえばそれまでだし、ランキングの根拠も「独自調べ」みたいに表示すれば問題はないわけで・・・批判するのはこの位にしておきます。1つ言えるのは「なんちゃってランキング」の画像やタイトルなどからのリンクがAmazonなんかのアフィリエイトサイトだったらまず間違いなく「なんちゃってランキング」なんでしょう・・。

WordPressでこれを実装する場合の話に戻します。こうしたことを表現するにはやっぱり実装されているテーマに変えるしかないのかなぁ・・・プラグインで何とかならないのかなぁ・・・とプラグインをこよなく愛する私としてはどこかにあるんじゃないか?と探してみましたが、野良プラグインで結構な価格で売られているものしかなかったので、似た表現ができればいいでしょ!ということで作ってみました。

【WordPress】サイト作者独自のランキングコンテンツ(いわゆるなんちゃってランキング)を実装する方法|Knowledge Base


コピペして内容を変えるだけで、こんな感じのランキングが作成できます(画像の幅が小さいのは縮小表示してるからで、今回紹介する方法で実装すると本文の幅いっぱいになります)。

などを使ってボタン化しておくとどこでも「なんちゃってランキング」が挿入できて楽だと思います。

偉そうに書いてますけどhtmlとCSSが少し分かる方なら誰でも作れますよ!!それでは解説をば。

WordPressサイトの本文内に独自のランキング「なんちゃってランキング」を挿入する方法

ランキング用の画像を用意する

タイトル横に表示している王冠画像は自身で用意する必要があります。こうした画像はわざわざ作らなくても、「ランキング 素材 フリー」などでググれば無料で提供してくださってるサイトはたくさんありますから、気に入ったものを入手してメディアへアップロードしておきましょう。

本文内に挿入するコード

投稿編集画面を開き、以下のコードを挿入します

<div class="nrank-box">
<h4 class="ranktag"><span class="oukan">ランキング画像</span>商品名などタイトル</h4>
<div class="rankimg">
画像
</div>
<div class="rankst-cont">
説明
</div>
<div class="ranklink">
<a href="詳細ページのURL" target="_new">>>詳細ページを見る<<</a>
</div></div>

※そのままコピペするとコードの改行がおかしくなってたりする場合がありますので、一度エディタなどへコピーして確認してから挿入するようにしてください

これが1つのブロックになります。1位とか2位とか関係なく必要な分だけこれを追加するわけです。

コード中でいろいろ設定する項目は以下の通りです。

ランキング画像

先ほど入手してアップロードした画像を挿入します。画像の大きさはタイトルとの兼ね合いで調整してください。

大抵のサイトでは1位~3位までを画像表示、それ以下はタイトルに【4位】などとしているところが多いですから、4位以下は

<h4 class="ranktag">商品名などタイトル</h4>

とすればいいでしょう。

商品名などのタイトル

画像

サイトの仕様にもよりますが、一応CSSで画像の幅を調整しているのでサイズは何でもOKです(中サイズ辺りを選択するといいでしょう)

説明

商品などの説明を入力します。画像の横よりも下まで説明がある場合には画像の下に回り込むようになっています

詳細ページのURL

これは別に用意したページ(いわゆるランディングページ)でもいいですし、直接アフィリエイトページへのリンクURLを入れてもいいでしょう

これでなんちゃってランキングの大枠が出来上がります。試しにプレビューしてみると・・・ひどい状態ですねぇ・・・。これを以下で紹介するCSSで調整していきます

テーマのCSSへ追記するコード

テーマのCSSへ以下のコードをコピーします。コードが長いので、テーマカスタマイザーの追加CSSへというよりは、子テーマのCSSへ追加した方がいいかと思います(親テーマでやる場合は一番下に追加してください)

/********************* ランキング表示のCSSここから ***********************/

/***** 外枠 *****/
.nrank-box{
border:1px solid #222;
border-radius:5px;
padding:10px;
margin-bottom:5px;
}

/***** タイトルタグ(h4) *****/
h4.ranktag {
margin-top: 5px;
margin-bottom: 5px;
font-size: 28px;
border-bottom: 3px dotted #111;
}

/***** 画像 *****/
.rankimg {
float: left;
width: 200px;
margin-right: 10px;
margin-bottom: 5px;
}

/***** 表の仕様 *****/
/* 外枠 */
table.sshiyou {
width: 100%;
border: 2px solid #388218;
}

/* 項目の幅(左側) */
td.tdshiuouk {
border: 1px solid #388218;
width:100px;
}

/* 項目の幅(右側) */
td.tdshiuou {
border: 1px solid #388218;
}

/* 詳細ページへのリンク */
.ranklink {
background-color: #000000;
border-radius: 10px;
font-size: 20px;
text-align: center;
clear:both;
}

.ranklink a {
text-decoration: none;
color: #ffffff;
}

/********************* ランキング表示のCSSここまで ***********************/

※そのままコピペするとコードの改行がおかしくなってたりする場合がありますので、一度エディタなどへコピーして確認してから挿入するようにしてください

CSSは環境によって調整が必要ですが、それなりな感じにはなったのでは??

コード内にどの部分の装飾なのかを書いていますから多分分からないことはないと思いますが、微調整などはデベロッパーツールを使って調べてはCSSを編集して・・・という感じで調整してくださいね。


やる気になって作ってみたら案外簡単にできました。この表現を実装しているテーマへ変更しても自身のサイトの見た目に合わせてデザインの調整などは必要でしょうから、今使っているテーマを使いつつ、表示したい場所へ必要なところだけ挿入するという今回のような方法が結局便利なんじゃないかなぁと思いますよ。

「フォーム入力にしたい」、「装飾(色など)を変更したい」、「表を下に追加したい」などカスタマイズご希望の方は

【WordPress】サイト作者独自のランキングコンテンツ(いわゆるなんちゃってランキング)を実装する方法|Knowledge Base

でお受けしていますのでよろしくお願いします。

著:清水 由規, 著:清水 久美子, 著:鈴木 力哉, 著:西岡 由美, 読み手:星野 邦敏, 読み手:吉田 裕介
¥2,889 (2024/02/08 17:07時点 | Amazon調べ)