アフィリエイト・WP

WordPress Popular Posts デザインをCSS でカスタマイズしてみた

投稿日:2016-05-02 更新日:

このサイトでもWordPress Popular Postsプラグインを使用して、サイドバーにランキングを表示しています

見た目がありきたりでは面白くない、そう思い

さっそくCSSをカスタマイズ

アクション要素を取り入れてみました

下記がサンプルです。カーソルを合わせると順位がくるっと回転します(^^♪

あとviewsカウントを赤文字に

ランキングの1位~3位は色を変えています

今回、参考にさせていただいたサイト

サンプル

  1. Firefoxを旧バージョンに戻す方法(更新して不具合が出た時の対策)... 35,402ビュー
  2. 共有ファイルサーバの運用ルールの作り方(フォルダ構成とアクセス権)... 32,382ビュー
  3. XPERIA SO-02G 突然戻るボタンが反応しなくなる!タッチパネル故障時の応急措置を紹介... 25,376ビュー
  4. Postfix トラブル調査でメールログを調べる手順... 19,624ビュー
  5. 上司の親のお通夜へ初参列 ~香典の包み方・渡し方・式の流れなど~... 12,222ビュー

広告

カスタマイズ手順

CSS

WordPressのメニューで「外観 >「テーマの編集」の順に選択 

子テーマのstyle.cssを選び、下記のコードを追記します。

広告

ウィジェット

WordPressのメニューで「外観」「ウィジェット」の順に選択

WordPress Popular Postsをドラッグ & ドロップしてサイドバーに追加します

wpp1

「Use custom HTML Markup」にチェック

「保存」します

wpp2

custom HTMLが編集可能に

ここでulolに書き換える

「保存」します

wpp3

これで手順は終了

これからもCSS3のアクション要素に挑戦してみます <おわり>

広告

  • この記事を書いた人

だっち

【HN】:だっち
【出身】:新潟県
【趣味】:海釣り、スノーボード、読書
【職業】:婿
【目標】:できるときにできる限りやる!
【家族】:既婚、嫁と子供2人

-アフィリエイト・WP
-,

Copyright© ムコの戯言帳 , 2017 All Rights Reserved Powered by AFFINGER4.