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

色々虎威 ゆるり

~IRO IRO TRY~

はてなブログのトップページ「続きを読む」を簡単にカスタマイズする方法

今回ははてなブログのトップページで「続きを読む」のカスタマイズ方法について説明したいと思います。

はてなブログのトップページ「続きを読む」を簡単にカスタマイズする方法

 

続きを読む

トップページは記事の一覧として割り切って、本文は各エントリーを見て欲しいと思ってるわけです。
まあ、複数の記事が掲載されると、それだけ表示も遅くなりますからね。
だからトップページには、記事の冒頭だけ表示して「続きを読む」を表示して、残りは各エントリーのURLに飛ばしてます。
それをやるには、記事を書く際に「続きを読む」を表示させたい場所に埋め込めばいいだけです。

見たまま編集の場合
挿入したい箇所にカーソルがある状態で、下記の「続きを読む」ボタンを押すだけです。



HTML編集の場合
挿入したい箇所に「<!-- more -->」を記述するだけです。

他については下記をご覧ください。

スポンサーリンク
 

「続きを読む」を画像で表示してみる

これで、トップページなどで「続きを読む」が表示されるようになったと思います。
今度は、この「続きを読む」を、目立つ画像にして、ついつい続きを読みたくなるように強調させてみたいと思います。

CSSの追加
「デザイン」-「カスタマイズ」-「{}デザインCSS」で、「続きを読む」に関するCSSを追記します。

まずは、「続きを読む」を初期状態では非表示にしておきます。
これは後ほど記載しますが、JavaScriptで画像に書き換えるわけですが、どうしても一瞬の隙間ができてしまいます。一瞬でも「続きを読む」の文字列を表示させたくないので、定義上「非表示」にしてしまおうというわけです。

.entry-see-more {
 display: none;
}


この下の記述は見た目だけの話ですが、「続きを読む」に設定した画像の上にマウスを置いたときに、ちょっとしたエフェクトをかけるだけのものです。

.entry-see-more img {
 transition: 0.5s;
}
.entry-see-more img:hover {
 opacity: 0.6;
 transition: 0.5s;
}

 
JavaScriptの記述
「設定」-「詳細設定」で下の方に「headに要素を追加」という欄があるので、ここにJavaScriptを追記します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready( function(){
  $('.entry-see-more').html('<img src="画像ファイルのURL">');
  $('.entry-see-more').css("display","block");
 });
});
</script>

JavaScriptでは、画面表示時に「続きを読む」のHTMLを書き換えて、CSSで非表示にしていたものを表示に変更します。
たったこれだけです、簡単ですね。

「続きを読む」ボタンの画像ファイルは、下記サイトなどで簡単に作ることができます。
当ブログのボタン画像も、ここで作っています。


なお、画像ではなく

$('.entry-see-more').html('もっと読む!!!');

のように他の文字列に置き換えることもできます。

これですっきり

トップページの表示も早くなったうえに「続きを読む」を大き目の画像にするなどして、記事のページにも誘導しやすくなったかと思います。

あとは、記事と記事の間に広告が出ちゃう件ですね。
これはPROにしないと消せないんですよね。
その辺は、今後考えていきたいと思います。

追記

2016/07/29
ちなみに現在は、テキスト化しました。一応、こんなスタイルにしてます、ってことで貼っておきますね。

.entry-see-more{
 color: rgba(256,256,256,1);
 text-decoration: none;
 text-align: center;
 padding: 10px;
 display: block;
 border-radius: 3px;
 width: 200px;
 background: rgba(66,118,244,1);
 transition: .8s;
}

.entry-see-more:hover {
 background: rgba(66,118,244,0.5);
}

ご使用されているテーマによっては、うまく表示されないかもしれませんが、entre-see-mode クラスをいじる、というのは同じですので、色を変えたりいろいろやってみてください。

スポンサーリンク