はてなブックマーク - Zenback(ゼンバック)の『関連する記事』を画像+テキストにした時のレイアウトを調整する方法
Pocket

2013070201

平均PVを上げる為に、すでに活用しているZenback(ゼンバック)を少し変更。関連する記事を4件から8件に増やし、さらにテキストのみから、画像+テキストにしました。

しかし写真のように、横4列で並ぶかと思われたレイアウトが見事に崩れてしまいました。

スポンサードリンク

『関連する記事』のレイアウトを調整する方法

ブログパーツのHTMLソースコードのid/class構造とcssについて – Zenback ブログ

こちらを参考にしてカスタマイズしました。

#zenback-widget #zenback-related-article .zenback-module-item.hasthumb

いじるのはここ。あたまに「#zenback」を付けて、自分のWordPressのCSSに追加で入れます。

#zenback #zenback-widget #zenback-related-article .zenback-module-item.hasthumb {
    float: left;
    height: 160px;
    margin: 0 0 1.62em;
    padding: 5px;
    font-size: 12px;
}

paddingが9pxだったのを5pxに変更しました。

2013070202

見事キレイに4列並びました。細かいことなんですが、こういうのがキッチリしていないと意外と気持ち悪いんですよね。

Tags: ,
2013年7月2日

ブログの更新情報はこちらからどうぞ

RSSリーダーへ登録していただく他に、facebookページや、twitterからもブログの更新情報をお知らせしています。是非ご登録下さい。



自己紹介

サムリ。1974年4月生まれ。東京都出身、埼玉在住。アメコミ映画に、仮面ライダー、ロボットアニメが好きな二児の父でフリーランスやっています。詳しいプロフィールはこちら

  • サムリブログのはてなブックマーク数