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

丸ニッキ

小林丸々の日記用ブログ

はてなブログで「続きを読むボタン」の位置のバラバラを直す

ブログ改造

以前、はてなブログのトップページ(最初のページ)が気に食わないので、CSSをカスタマイズしました。

↓以前、トップページでは写真を左側に小さく配置して、文章を右側に配置するように変更しました。
kbysoo.hatenablog.com

これをおこなったことで、別の気に食わない点ができたので、今回それを修正してみます。

気に食わないところ

左側に置いた写真の大きさによって、「続きを読む」のボタンの位置がバラバラになってしまい気持ち悪い感じです。

実際に読者の方(非実在読者)もボタンの位置がバラバラだと押しにくいハズ。

作業前後

↓作業前は、ボタンの位置がバラバラ
f:id:kbysoo:20160310154331p:plain

↓作業後は、ボタンの位置が左下に固定です。スッキリ。
f:id:kbysoo:20160310154358p:plain

ボタンを固定します

「続きを読む」はentry-see-moreクラスです。これをabsolute(位置固定)にします。
そんで、左下に固定で配置します。

記事の外枠を設定する

記事の外枠はentryクラスです。これをrelative(位置相対)にします。位置を固定したもの(続きを読むボタン)が「何から見て左下か?」を指定するためです。
それから、ボタンを置くためのスペースを記事の下の方に作ります。今回は適当に60pxにしました。

CSS

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

.entry-see-more {
    position: absolute;
    bottom: 0;
    left: 0;
}
.entry {
    position: relative;
    padding-bottom: 60px;
}

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

まとめ

少し良くなりました。ちびちびカスタマイズしていこうと思っています。

広告を非表示にする