*

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

    関連記事

    Yahoo Japanのテキスト解析、日本語係り受け解析を使ってみた

    先の記事でYahoo Japanのディベロッパーネットワークのテキスト解析の日本語形態素解析や日本語

    記事を読む

    WordPressの子テーマを作る巻

    WORDPRESSの子テーマを作ります 子テーマを作る理由 WORDPRESSのバー

    記事を読む

    リンクの色を変える巻

    CSSを使ってリンクしている文字の色を変更します ちょっとサイトに手を入れだしたら止まりません

    記事を読む

    WordPressのスマホ画面にGoogleAdsenseを表示するには

    WPtouchというプラグインを使うとWordPressで簡単にスマホ画面にレイアウト崩れな

    記事を読む

    本日もアクセス降下中!

    あはは、昨日に引き続き、アクセス降下中 135→86→42→35 23時現在 明日ぐ

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

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

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

    記事を読む

    Googleウェブマスターツールから怒られない! サイトに含まれるWordPressのバージョンを消してみるの巻

    Googleのウェブマスターツールは、いろいろな情報を提供してくれます そんな中にはサイト

    記事を読む

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

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

    記事を読む

    PC

    PC

    PAGE TOP ↑