*

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のテーマをtwentytenからtwentyelevenに変えたの巻

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

    記事を読む

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

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

    記事を読む

    人気記事が更新されないと思ったら、WordPress Popular Postsのデータクリアが必要だった

    先日、気記事が更新されないと思い、WordPress Popular Postsのリセットを

    記事を読む

    簡単にできた! WordPressの個別記事にサイドバーを表示させる巻

    個別記事をホーム画面のようにサイドバーつきに変更します Wordpressでちょっと不

    記事を読む

    繰り返し表示を大量生産! WordPressで差込表示するの巻

    WordPressの記事で特定のシリーズなどで同じ文章を繰り返し表示したいときってありますよね

    記事を読む

    静かな船出!WordPressのバージョンを3.5に上げてみるの巻

    Wordpressのバージョンを上げてみましたが、大差ありませんでしたよ バージョンが

    記事を読む

    修正簡単!ウェブマスターツールのタイトルタグの重複や 重複するメタデータを改善

    ウェブマスターツールのタイトルタグの重複や 重複するメタデータが改善されないなあ、と思ってい

    記事を読む

    【サイト運営】2016年9月にサイトの利益を計算したら0.2円/PVで今後の方針を決めたの巻

    はじめに RSSで人気ブロガーの記事を読んでいます ここ立て続けにサイト運営の記事が出ました

    記事を読む

    POSTSのタイトルを一斉修正! WordPress Search Regexでタイトルを一括変換するの巻

    WordPress Search Regexの修正は必要でしたが、一発で簡単にタイトルの修正

    記事を読む

    スマホ画面でもLinkWithInのYou might also likeを変更するの巻

    スマホ画面でもLinkWithInの「You might also like」を「関連する記事」に変

    記事を読む

    PC

    PC

    PAGE TOP ↑