アフィリエイト・WP

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

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

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

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

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

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

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

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

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

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

サンプル

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

カスタマイズ手順

CSS

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

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

ウィジェット

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

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

wpp1

「Use custom HTML Markup」にチェック

「保存」します

wpp2

custom HTMLが編集可能に

ここでulolに書き換える

「保存」します

wpp3

これで手順は終了

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

記事下 adsense

記事下 adsense

関連 Adsense

  • この記事を書いた人
  • 最新記事

だっち

30代 二人の子持ち。 婿はなにかと肩身が狭いので、寺泊で釣りができることが何よりの癒しです。シーバス、アジング、メバリング、ショアジギング、たまにぶっこみ釣りやサビキ釣りも。冬にはスノボを楽しみます。

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

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