アフィリエイト・WP

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

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

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

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

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

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

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

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

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

擬似要素を使って、ol要素を美しくスタイルし、CSS3アニメーションをちょっとだけ加えたスタイルシートのテクニックを紹介します。 CSS3 ordered list styles デモ 実装 対応ブラ

サンプル

  1. G-SHOCKのお掃除。5年分の汚れと垢を落として綺麗に復活!... 113.1k件のビュー
  2. 共有ファイルサーバの運用ルールの作り方(フォルダ構成とアクセス権)... 105.1k件のビュー
  3. Firefoxを旧バージョンに戻す方法(更新して不具合が出た時の対策)... 102.6k件のビュー
  4. 【Office365】 Outlookが頻繁に応答なし、フリーズする現象... 101.9k件のビュー
  5. [Outlook] アドレスの左に表示される四角いボックスの正体が判明!... 92.5k件のビュー

カスタマイズ手順

CSS

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

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

ウィジェット

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

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

wpp1

「Use custom HTML Markup」にチェック

「保存」します

wpp2

custom HTMLが編集可能に

ここでulolに書き換える

「保存」します

wpp3

これで手順は終了

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

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

だっち

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