はてなブログ・スマホ画面の注目記事と関連記事の画像非表示

レスポンシブではないレイアウト画面の場合ですが、スマホ画面の注目記事と関連記事の画像…消したくありませんか？

僕は消したいですっ！！

消したいと言ってくれないと話進みません。ハイ、みんな消したいと思います。消したいけど、検索かけても出てこないので誰か教えてくださいっ！！

と言っても誰も教えてくれないので、ちょっとやってみたのですが間違えてたら「それアカンで」って教えてもらえると非常に助かります。

注目記事の画像非表示

標準だとこんな感じだと思うのですが、なんだかちょっと子供臭くないですかね。1位2位3位みたいな。まあそれもイイっちゃ良いんですけどね。

<style type="text/css">
 /* 注目記事画像無し */
.hatena-module-entries-access-ranking .urllist-with-thumbnails .urllist-item .urllist-image {
 margin: 0 .7em 0 0!important;
 display: none;
}
.hatena-module-entries-access-ranking 
.rank-1:before {
 display: none;
}
.hatena-module-entries-access-ranking 
.rank-2:before {
 display: none;
}
.hatena-module-entries-access-ranking 
.rank-3:before {
  display: none;
}
.hatena-module-entries-access-ranking 
.rank-4:before {
 display: none;
}
.hatena-module-entries-access-ranking 
.rank-5:before {
 display: none;
}
.hatena-module-entries-access-ranking .urllist-item {
 padding-left: 0px;
 position: relative;
}
</style>

これスマホのページャ下ではなくてフッタですね。フッタに貼ると画像も消えて順位も消えます。

関連記事の画像非表示

記事下にいつもある関連性の薄い関連記事です。

<style type="text/css">
.urllist-with-thumbnails li .urllist-image {
 display: none;
 }
div#entry-footer-secondary-modules {
 margin-top: 10px;
 }
</style>

これを僕は記事下に貼ってます。margin-top: 10pxは上のコンテンツとの間に余白がきちんとあるなら消して下さい。余白が無いなら数値を変化させて余白作ってあげてください。下に余白が欲しいならmargin-bottomを追加。「margin: 10px 0 10px 0; 」こんな感じでも良いけど。