読者です 読者をやめる 読者になる 読者になる

はてなブログの"トップページ"のカスタムcss【ブログカスタムVol.4】

はてなブログカスタム

f:id:george-gogo:20151219012037p:plain

前の記事でトップページに"続きを読む"のカスタムをしましたが、さらにカスタム!「Blank」というテーマを使っていれば同じようにできるはずです。

はてなブログのカスタム記事のまとめはこちら

画像縮めて、文字を横に持っていくカスタム

まずは現状

f:id:george-gogo:20151218221529p:plain

僕は必ず記事の最初に手作りの画像を置いています。これをだね、スマホから見たときみたいなレイアウトにしたいわけです。

ようはもっとコンパクトかつ、スタイリッシュでスマートにして一覧っぽくしていきます。

cssは.entry-content imgとみせかけて…

危ない危ない。.entry-content img だと思ってカスタムしたら
記事内の画像も全部小さくなっちゃいました。
つまり記事内の全画像にこのクラス名が付いているってことですね。

じゃあなんだ?どれだ?この画像だけの印は。

 

んー(10分間もジッとコードを見続けています。)

 

んー(面倒くさくなってこの記事を消そうか悩んでいます。。)

 

やった発見!

トップページのアイキャッチ唯一の個性!!(たぶん)

.page-index

一番上のbodyにひっそりくっついていました。
これを先頭に付ければ大丈夫でしょ。(たぶん)

cssを書いていきます

.page-index .entry-content img{

    max-width: 50%;

    float: left;

}

 よし。まず画像が100%だったのを50%にして小さくしました。
そしてfloat:leftを使ってその他のパーツを左にグルリと回り込ませました。

f:id:george-gogo:20151218232027p:plain

うん。ぎゅうぎゅう詰めですね。

文字部分のバランス調整

画像と画像の間に隙間を開ける

.page-index .entry-content img{

    max-width: 50%;

    float: left;

    margin-right: 2%;

}

文字の上部のスペースを画像とキッチリ合わせる

.page-index .entry-content p{

    margin: 0;

}

いまできないこと

まだはてなブログProに加入していないので広告消せないんですよねー。
さっさとProにして、あとは

  • 広告消す
  • いいねボタンをトップページからどかす
  • コメントをトップページ非表示

こんなところをやっていきます。 

おしまい