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

スポンサードリンク



前の記事でトップページに”続きを読む”のカスタムをしましたが、さらにカスタム!「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にして、あとは

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

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

おしまい

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

東京生まれ東京育ち。フレンチのコックからIT業界に飛び込み、アプリ制作会社を友人と経営してたけど、結婚して会社を抜けて北海道に移住。現在は北海道でサラリーマンをやりながら、野望に向かって切磋琢磨。