ガジェニュー

~iPhone・格安スマホとか~

【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

       後で読む

cap-3STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修正しないといけないことが出てきました。ということで今回は人気記事を簡単に表示させることが出来る「WordPress Popular Post」の「STINGER5」仕様へのカスタマイズをしていきたいと思います。

SPONSORED LINKS

WordPress Popular Postの表示をSTINGER5と同じに

今回、自分のサイトにはサイドバーにウィジットとして「WordPress Popular Post」が入っているのでそちらをカスタマイズしていきます。

ちなみに「STINGER3」に最適にしていたままだとこんな感じ。元からある「NEW POST」の部分と同じような見た目にしたいと思います。cap-1さて、それでは見て行きましょう。

こちらのサイドパーツはウィジットで管理していますので、ウィジット→対象のウィジェットを選択します。設定の画面の下記にはこちらの画像のような部分があります。pic1
まずはHTMLマークアップの「カスタムHTMLマークアップを使う」にチェックをいれます。こちらのにチェックを入れることによって、ウィジェットをカスタマイズが可能になります。

こちらに記載するHTMLですが、サイドバーの要素を見ながら調整しました。記載に関しては下記のように書いた所、今のところ問題なく反映されています。

WordPress Popular Postの設定を変更

中に、書くHTMLについて見て行きましょう。

■Before / after title:

<h4 class="menu_underh2"> </h4>

こちらはウィジットのタイトルの部分に反映させるものです。”menu_underh2″というクラスがサイドパーツに設定されていたので記載しました。前と後ろに分けて記載します。

■Before / after Popular Posts:

<div id="kanren"><div> </div></div>

サイドパーツを設定するために”kanren”がidとして設定されていたのでこちらを記載。前と後ろに分けて記載します。

■Post HTML Markup:

<dl class="clearfix">
 <dt>{thumb}</dt>
 <dd><h5> {title}</h5><div class ="smanone">{stats}</div></dd>
 <p class="clear"></p>
</dl>

中身を設定する部分です。塊として”clearfix”が、タイトルには「h5」が設定されていたのでこちらを記載してみました。

こちらを書いて反映を押したらOK。

こんな感じになります。
cap-2

以上です。

こんな感じで何とかサイドパーツに関しても最適化することが出来ました。

何かのお役に立てれば幸いです。

てな感じで。

 - STINGER5, WordPress, プラグイン , , ,

  関連記事

simages_011615_064354_PM
【STINGER5カスタマイズ】AdSenseをiPhone6/6s Plus対応のレスポンシブにカスタマイズ。

久々のSTINGER5のカスタマイズ記事です。まぁ、厳密に言うとGoogle A …

sum-sns
【STINGER5・GUSH2カスタマイズ】feedly・Poket・LINEで送るボタンの追加設置

今回は、日本語で無料・しかもSEOに強くレスポンシブデザインかつ、カスタマイズも …

icon_1r_192
【アクセス数報告】2015年2月のPVとアフィリエイトの収益とか

2月は28日間ということで他の月より2~3日短いということでさくっと終わってしま …

sHIRO93_machinokurasi500
エックスサーバーにしたら、サーバーの応答速度が大体9分の1ぐらいになった件

ロリポップサーバーからエックスサーバーにお引っ越ししました。でも書きましたが20 …

sum1
カエレバのCSSカスタマイズ

今回はカエレバのカスタマイズを行いました。カエレバといえば、商品のアフィリエイト …

sum
【STINGER5カスタマイズ】iPhoneでAdSenseの表示がはみ出す問題の解決方法

今回は「で発生した問題の解消のエントリーになっています。何度やってもうまく行かな …

sum_012415_124615_AM (1)
【WordPress】ロリポップサーバーからエックスサーバーにお引っ越ししました。

今回は、ロリポップ!のコロリポプラン(月額250円)のプランから、エックスサーバ …

simages_120314_110122_AM
【STINGER5カスタマイズ】スマホでの拡大操作に対応させる方法

今回はSTINGER5でちょっと気になっていたスマホ表示でのピンチイン・アウトに …

images_111514_124303_AM
【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ

今回は、STINGER5のヘッダーのカスタマイズをしたので、備忘録がてら書きます …

sum2
Gush2カスタマイズ~h2タグをカスタマイズします~

今回は「Gush2」のカスタマイズ第2弾です。 自由度が高いサービスだけに結構苦 …

Loading Facebook Comments ...

Message

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