*

WordPress popular postsの表示を変更する巻

公開日: : 最終更新日:2012/11/05 WEB

WordPress popular postsの表示を変更しました

WordPress popular postsは人気記事を自動で表示してくれる便利なプラグインです
が、そのまま使うと表示の仕方がイマイチ
リスト構造なので「・」ドットが表示されてしまうし、写真と文字の構成がバラバラ

今回、2点修正しました
1)ドットを外す
2)文字を写真の右側に回しこむ

【修正前】

【修正後】

CSSのソースはこちら↓

/* =Widget Areas
-------------------------------------------------------------- */
#main .popular-posts ul {
	list-style: none;
	margin-left: 0;
}
#main .popular-posts li {
	padding-bottom: 0.5em;
}
#main .popular-posts img {
         float: left;
         margin-right: 1em;
}
#main .floatclear {
         clear: both;
      }

1)のドットを外すについては、popular-postsのulをlist-style: none;にしてしまえばOK
2)の文をまわしこむのは2点修正必要
CSSの修正は上記の通り
もう、1点はpopular postsのWidgetのHTML出力設定を修正
「Before/After each post:」の「

  • 」を「
  • 」に変更
    こちら↓

  • 」にすることで、回り込みの解除を行います

    CSSによる文の回り込み設定はこちらを参考にしました
    【参考】
    画像の回り込みを行う

  • PC

    関連記事

    容易に実現! 最近の投稿の写真を枠つきに変えてみたの巻

    こちらも簡単にできました 最近の投稿を写真なしから写真ありに変えてみました こちらは

    記事を読む

    簡単!WPのパンくずリストのプラグインBreadcrumb NavXTをインストールしてみたの巻

    一言 インストールは簡単で、表記には、ちょっとしたコツが必要でした はじめに パンくず

    記事を読む

    これでアクセス数低下を阻止!重複するメタデータ(descriptions)の問題を解消!?

    先月ぐらいから急激に姉妹サイト(日々雑記帳 =ラーメンを綴る日々=)のアクセス数が急激に落ち込み

    記事を読む

    WordPressのテーマをtwentytenからtwentyelevenに変えたの巻

    WordPressのテーマをtwentytenからtwentyelevenを変更するのは簡単

    記事を読む

    Perlのppmでインストールできない時にローカルファイルでインストールの巻

    会社の社内LANでPerlのppmが上手くインストールできなかったので備忘録メモ PR

    記事を読む

    少し便利に!アマゾン、楽天で同時検索するブックマークレットの選択したテキストをクリップボードにコピーするように修正したの巻

    はじめに 先日、作成した「選択した商品のテキストをアマゾン、楽天で同時検索するブックマークレッ

    記事を読む

    早っ!重複するメタデータ(descriptions)の問題を解消!

    昨日、発見した重複するメタデータ(descriptions)の問題 対策して、一日経って見

    記事を読む

    改善の見込みなし! アクセス数降下中

    昨日は持ち直したものの、今日もアクセス降下中 135→86→42→35→53→22 22時

    記事を読む

    LinkWithInのYou might also likeを変える巻

    LinkWithInのYou might also likeを変える方法 WordPressの

    記事を読む

    もう簡単、記入するだけ! WPtouchでGoogle adsense広告を打ってみたの巻

    あっという間にモバイル向けアドセンスが簡単にできました このブログのモバイル向け表示に

    記事を読む

    PC

    PC

    PAGE TOP ↑