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

丸ニッキ

小林丸々の日記用ブログ

はてなブログのトップページを一覧画面っぽくカスタマイズした

ブログ改造

f:id:kbysoo:20151127213458j:plain

こんにちは。

はてなブログは良いサービスだと思いますが、ブログのトップページ(最初のページ)で気に食わない点があります。

トップページは複数記事を表示する一覧画面なのに、個別記事の画面と同じ内容が表示されます。

これだと一覧としての視認性が落ちるので、めんどくさいですが変更しました。

作業前後

↓作業前は、アイキャッチ用の写真が大きく表示されて、文章はその下に表示されています。(個別記事の画面と同じ)

f:id:kbysoo:20151127204838p:plain

↓作業後は、写真が小さくなって、文章は右側に表示されます。一覧画面としての視認性はこちらの方が良いと思います。

f:id:kbysoo:20151127205240p:plain

トップ画面の写真を小さく表示

トップページを表示しているときは、bodyタグにpage-indexクラスが付きます。なので、page-indexのentry-contentのimg(写真)のmax-widthを50%にします。

右側に文章を回りこませる

img(写真)を左にfloatさせて、文章が右に来るようにします。それと写真と文章がくっつかないようにpaddingします。

CSS

上記を踏まえて、CSSファイルに追記する内容はこんな感じです。

.page-index .entry-content img {
    max-width: 50%;
    float: left;
    padding-right: 10px;
}

CSSファイルは、デザインの中の「ココをクリック」すると編集できます。

f:id:kbysoo:20151127212504p:plain

まとめ

ほとんどブログのカスタマイズはしていなかったのですが、手を加えると愛着が湧きました。

これからブログも小説もガシガシ書いていこうと思います。思ってはいます。

追記

その後、カスタマイズ方法を変更しました。 

kbysoo.hatenablog.com

広告を非表示にする