アフィリエイト・WP

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

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

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

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

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

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

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

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

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

サンプル

  1. 共有ファイルサーバの運用ルールの作り方(フォルダ構成とアクセス権)... 97.4k件のビュー
  2. Firefoxを旧バージョンに戻す方法(更新して不具合が出た時の対策)... 95.6k件のビュー
  3. G-SHOCKのお掃除。5年分の汚れと垢を落として綺麗に復活!... 83.2k件のビュー
  4. Postfix トラブル調査でメールログを調べる手順... 80.8k件のビュー
  5. 【Office365】 Outlookが頻繁に応答なし、フリーズする現象... 73.9k件のビュー

カスタマイズ手順

CSS

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

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

ウィジェット

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

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

wpp1

「Use custom HTML Markup」にチェック

「保存」します

wpp2

custom HTMLが編集可能に

ここでulolに書き換える

「保存」します

wpp3

これで手順は終了

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

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

だっち

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

© 2020 ムコの戯言帳