はてなブログのトップページ「続きを読む」を簡単にカスタマイズする方法
今回ははてなブログのトップページで「続きを読む」のカスタマイズ方法について説明したいと思います。
続きを読む
トップページは記事の一覧として割り切って、本文は各エントリーを見て欲しいと思ってるわけです。
まあ、複数の記事が掲載されると、それだけ表示も遅くなりますからね。
だからトップページには、記事の冒頭だけ表示して「続きを読む」を表示して、残りは各エントリーのURLに飛ばしてます。
それをやるには、記事を書く際に「続きを読む」を表示させたい場所に埋め込めばいいだけです。
見たまま編集の場合
挿入したい箇所にカーソルがある状態で、下記の「続きを読む」ボタンを押すだけです。
HTML編集の場合
挿入したい箇所に「<!-- more -->」を記述するだけです。
他については下記をご覧ください。
スポンサーリンク
「続きを読む」を画像で表示してみる
これで、トップページなどで「続きを読む」が表示されるようになったと思います。
今度は、この「続きを読む」を、目立つ画像にして、ついつい続きを読みたくなるように強調させてみたいと思います。
CSSの追加
「デザイン」-「カスタマイズ」-「{}デザインCSS」で、「続きを読む」に関するCSSを追記します。
まずは、「続きを読む」を初期状態では非表示にしておきます。
これは後ほど記載しますが、JavaScriptで画像に書き換えるわけですが、どうしても一瞬の隙間ができてしまいます。一瞬でも「続きを読む」の文字列を表示させたくないので、定義上「非表示」にしてしまおうというわけです。
.entry-see-more {
display: none;
}
display: none;
}
この下の記述は見た目だけの話ですが、「続きを読む」に設定した画像の上にマウスを置いたときに、ちょっとしたエフェクトをかけるだけのものです。
.entry-see-more img {
transition: 0.5s;
}
.entry-see-more img:hover {
opacity: 0.6;
transition: 0.5s;
}
transition: 0.5s;
}
.entry-see-more img:hover {
opacity: 0.6;
transition: 0.5s;
}
JavaScriptの記述
「設定」-「詳細設定」で下の方に「headに要素を追加」という欄があるので、ここにJavaScriptを追記します。
<script type="text/javascript" src="https://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>
<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);
}
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 クラスをいじる、というのは同じですので、色を変えたりいろいろやってみてください。
スポンサーリンク
