久しぶりのカスタマイズネタです。またカスタマイズ熱が沸々と熱さを増してきています。今回はさらっと簡単にですが役立つ情報となれば嬉しいです。
さて、はてなブログのトップページを見てみると、「続きを読む」を入れていないと、記事がそのまま表示されている状態になっています。
表示件数も設定画面の方からする事が出来ます。
今回はこの、続きを読むの部分をカスタマイズしていこうと思います。
■目次
続きを読むを使う。
続きを読むを設定するには、記事を書く時に、上部のツールバーにある、「続きを読む」ボタンを押します。
すると、それ以降の記事がページ一覧表示時に隠せるようになります。
こうすることでトップページの表示速度を上げるのにも役立ちます。
私は今今はまだ適用をしていないのですが、共有部分ではなく（記事上等）目次を本文中に入れようと思ったので、今回このツールを使用する事になりました。
以前も本部に目次をいれていたのですが、本文に目次をいれてしまうと、一番上の記事の目次に全ての見出しを読み込んでしまいます。それを避けるのにも役立ちます。
ちなみにこの機能はトップページやカテゴリー、アーカイブページのみに使用されます。記事自体にはこの機能は加わらないので、記事に直接訪れる読者には影響がありません。
はてなブログでも標準機能にいれて欲しい機能でもありますね。一覧表示時の全文表示か一部表示（何文字か指定出来る）を選べるようになれば便利かなって思います。
見やすくカスタマイズしてみよう
私が使用している、テンプレートでは特にデザインはされておらず、そのままテキストとして「続きを読む」と表示されています。他のテンプレートは調べていないので分かりませんが、これでは続きがあるのかちょっとわかりづらい部分もあります。
続きがあると思わずにそのまま続きの本文を読まずにと言うのも悲しいものです。
そこで、続きを読むを目立たせてみようと思いました。
この部分に画像を使用する事も出来るのですが、今回はCSSのみで出来るデザインカスタマイズを施していきます。
続きを読むの、CSSにあたるのが、「entry-see-more」となります。
ここをいじってみましょう。
CSSコード
二段目のCSSは白だと記事上の訪問済みリンクが見えなくなってしまうので各自変更して下さい。
サンプル マウスを乗せて見てください。
上のボタンはサンプルになりますが、カーソルを乗せると色がゆっくりと変わるのを確認出来ます。一応これでもボタンっぽくなりましたね。
背景に薄くグラデーションやフォントにシャドウなんかをかけても良いですが、フラットライクな方はこのままでも良いかもしれないですね。
今回はシンプルに続きを読むボタンをカスタマイズしてみました。
もう少し他のデザインも試してみたいと思っています。
