ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

      2015/02/16

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

WordPressで「Stinger3」を使っている時に、プラグインのWordpress Popular Postsを使ったサイドバーに人気記事を表示させるカスタマイズの備忘録を残しました。

今回は「Stinger5」に変更した時に、Popular Postsの表示がStinger5のNew Postsの文字のデザインが違うのが気になったので、文字のデザインが合うような記述をしたいと思います。今回もMAMPを使ったローカル環境のWordPressで設定を行って行きます。導入方法はこちら、

スポンサーリンク

WordPress Popular Posts

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

まだインストールしていない方はプラグインの新規追加からお願いいたします。ダッシュボード → 外観 → ウィジェット のスクロール広告用にWordPress Popular Postsを入れてとりあえず、「投稿サムネールを表示する」にチェックを入れて一回保存してからサムネイルのサイズを100×100に変更しています閲覧数は表示させていません。

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

画像右側上は「New Posts」の表示です。下側がPopular Postsの設定です。タイトルに下線が入りリンク色になってしまっています。これを上部の「New Posts」と同じ黒になるように設定します。又、抜粋は表示しない方向にしました。その辺はお好みでどうぞ!

スポンサーリンク

WordPress Popular PostsのHTMLマークアップの設定を変更

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

WordPress Popular Postsの設定画面の一番下に「HTMLマークアップの設定」があるのですが、そこのすぐ下の「カスタムHTMLマークアップを使う」にチェックをいれて一回「保存」を押すと下記のように書き込むBOXが表示されます。

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

上記の画像のように設定していきます。一番上の「Before / after title:」 の右側に

左側に

一番上の「Before / after Popular Posts: 」 の右側に

左側に

そして最後一番下の「Post HTML Markup: 」に

を記述してください。入力後「保存」を押してブログを確認してみましょう。

スポンサーリンク

WordPress Popular PostをStinger5と同じ表示にカスタマイズ

どうでしょうか?表示が上の「New Posts」と同じに変更できました。今回「ガジェニュー」さんのこちらの記事

を参考にカスタマイズさせて頂きました。読んで頂いてありがとうございました。

 - WORDPRESS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


  関連記事

WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress[MarsEdit] プレビュー画面を自分のブログデザインに変更
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
CloudFlareより読み込みが速い!?CDNサービス「Photon」を検証。
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress[Ultimate TinyMCE] ビジュアルエディタを拡張するプラグイン
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress 投稿一覧にタイトル文字数と本文文字数を表示させる
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]サイドバーのNEW ENTRYを削除する方法
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
WordPress[Stinger3用 子テーマ]favicon(ファビコン)を変更する方法
「All in One SEO」でカテゴリーページが[noindex]になっていた。
「All in One SEO」でカテゴリーページが[noindex]になっていた。