キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

WordPress Popular Posts の人気記事サムネイルにランキングの順位をつける方法

      2014/11/02

ニンニクがないと生きていけないキャリコ( @calicocatxyz )です。

ダイニングがニンニク臭いということでお香を焚かれ、ニンニクを使った料理はリビングで食べるというルールが出来ました ^^; さて、今日は昨日の続編です。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

昨日のエントリーで導入した WordPress Popular Posts で HTML マークアップの設定や CSS を記述して一歩踏み込んだカスタマイズをするにゃ。 今回のエントリーは CHOCOBANDITZ さんのブログを参考にしたにゃ。

キャラチョコブック
人気記事サムネイルに順位バッジ画像を付ける方法-WordPress Popular Postsカスタマイズ

完成図はこれにゃ。

Ads by Google

サムネイルにランキングの順位をつける

HTML マークアップの設定

WordPress のダッシュボードから外観のウィジェットを選んで WordPress Popular Posts を開くにゃ。

次に投稿設定の項目にある投稿サムネールを表示するにチェックを入れて、横幅と高さの値を入力するにゃ。キャリコでは関連記事と同じ大きさになるように、どちらも 100px に設定したにゃ。

ここで昨日のエントリーで省略した HTML マークアップの設定にゃ。

Before / after Popular Posts:

Before( 左側 )のボックスに入力するにゃ。

after( 右側 )のボックスに入力するにゃ。

Post HTML Markup:

ここが今回のつまづいた場所だったにゃ… CHOCOBANDITZ さんのブログではスクリプトも HTML マークアップに記述する書き方だけど、スクリプトを書いて保存をすると永遠に保存が終わらないにゃ ^^; 単に重いだけなのかなと思って5時間くらい保存が終わるの待ってたけど、スクリプトは保存できないって結論に至ったにゃ。だから一番大きなボックスの HTML マークアップには次のコードのみ記述するにゃ。

スクリプトの記述

で、HTML マークアップに記述できなかったスクリプトはどこに書けばいいのかというと、sidebar.php のサイドウイジェット読み込み部分の直前に置いたにゃ。

この記述で jQuery を読み込んで #popular-post dl dt 要素に nunber というクラス名を付けて、さらに 1~Show up to: 項目で設定した数を付与しているにゃ。

CSS の記述

まずはサイドバーの NEW POST と同じ見た目になるように指定をするにゃ。

a タグの指定

以前のエントリーでカスタマイズした部分と合わせて設定したから、キャリコではこんな感じになってるにゃ。

下線の指定

ポイントは :last-child という疑似クラスを使って一番最後の border だけ表示しない指定をしたにゃ。

余白の指定

サムネイル画像とテキストとの間に余白を入れて調整したにゃ。これで見た目は NEW POST と同じになったにゃ。

表示位置の指定

サムネイル画像要素に対する絶対位置への配置だけど、STINGER5 では mybox というクラスに指定したにゃ。

表示の指定

ポイントは counter-reset と counter-increment で要素の連番をセットして、z-index で順位がサムネイル画像の手前に配置したにゃ。top と left の値を変えれば好きな場所に表示することが出来るにゃ。

順位の設定

content で設定した連番の値をセット、さらに背景を指定することで画像を使わずにランキングが出来たにゃ。キャリコでは1位から10位まで表示させてるから長ったらしい表記になったにゃ ^^; ちなみに画像を使いたい場合はこのように記述するにゃ。

1~3位までの場合

まとめ

サムネール画像にランキング表示はできたかにゃ?人気記事一覧にだけランキング表示させることによって、訪問者に一発でランキングだとわかってもらえるにゃ。

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - WordPress

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

WordPress でのファビコンやブックマークアイコンの設定方法
WordPress でのファビコンやブックマークアイコンの設定方法

時代は変わった、キャリコ( @calicocatxyz )です。 これまではファ …

WordPress 専用の高速レンタルサーバーを比較!GMO WP Cloud と wpX レンタルサーバー
WordPress 専用の高速レンタルサーバーを比較!GMO WP Cloud と wpX レンタルサーバー

レンタルサーバー乗り換えを検討中のキャリコ( @calicocatxyz )です …

Photo credit : bluesyemre
WordPress の単一記事でパンくずリストにタグも表示させる方法

イギリスから日本まで3万円で帰れるルートを発見して大喜びのキャリコ( @cali …

WordPress で一部のページにだけ外部ファイルを読み込ませる方法

ここのところ記憶に残る夢といえば泳いでるキャリコ( @calicocatxyz …

超簡単! WordPress で404ページだけアドセンスを非表示にする2つの手順

アドセンスの配置で迷ってるキャリコ( @calicocatxyz )です。 巷で …

Photo credit : freepik
たった3行追加するだけ!パソコンとスマホの表示を別々にしてくれる分岐タグ

そろそろセントラルヒーティングを使ってもいいんじゃないかと思うキャリコ( @ca …

WordPress でレスポンシブ対応の無料テーマ【 Point 】を導入して困った5つのこと

他サイト運営で STINGER5 以外のテンプレートを本格的に扱い始めたキャリコ …

Photo credit : http://www.kenston.k12.oh.us/
WordPress パンくずリスト決定版!親子関係も作れる完璧なコードは Web デザインレシピに載ってた

ようやくカテゴリとタグの棲み分けがわかってきたキャリコ( @calicocatx …

WordPress に4行追加するだけ!特殊文字の自動変換機能を停止して文字化けを防ぐ方法

ただ今、旅行サイトを WordPress に移行中のキャリコ( @calicoc …

Wordpress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編
WordPress 初心者は必見!誰でもわかる「 条件分岐 」の超入門編

WordPress を使うようになってから PHP を扱うようになったキャリコ( …