*

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

    関連記事

    WordPressのテーブル作表はこのプラグイン! Editor Extender

    WordPressでテーブルの表作りが簡単になります ちょっとした表を作りたくて、テー

    記事を読む

    簡単便利! 選択した商品のテキストをアマゾン、楽天で同時検索するブックマークレットを作ったの巻

    はじめに ブログを運営してると、その上達方法の中に記事を量産する話がでます 1日5本の記

    記事を読む

    設置簡単!常にソーシャルシェアボタンが表示されるようにしてみたの巻 WordPress ShareBar

    ソーシャルシェアのボタン設置は簡単でした ネットで調べてみると、フローティングして常に

    記事を読む

    アフェリエイトを少し有利に!もしもアフェリエイトを申請、カエレバ、ヨメレバを設定してみたの巻

    ちょっとアフェリエイトが有利になりそうです はじめ ブログのアクセス数もちょこっと伸びて

    記事を読む

    WordPressの写真に白枠をつける巻

    WORDPRESSの写真に白枠をつけてみました WORDPRESSのバージョンアップを繰り返し

    記事を読む

    カレンダーで記事ポストの予定が立てれて便利! WordPress Editorial Calendar

    WORDPREEの管理画面から、記事投稿の予定がカレンダーで見れて便利です 記事を一日

    記事を読む

    簡単便利!Perlで住所チェックの巻

    必要に迫られて、住所チェックのモジュールを探したものの、なかったので、作ってしまいましたよ

    記事を読む

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

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

    記事を読む

    12月だ! 大掃除の季節! WordPressのHeader内を掃除をしてみるの巻

    12月です 大掃除の季節です WordpressのHeader内の余分なタグを削除してみ

    記事を読む

    6人の人気ブロガーから判る月の更新回数!

    6人の人気ブロガーから判る月の更新回数! 前回、「質より量」と言うことで、月の更新回数の目標を

    記事を読む

    PC

    PC

    PAGE TOP ↑