[blogger]read-more！続きを読むを画像表示に変更する方法。

--Read More--
続きを読むの記事区切りを、なんとなく画像にしてみたくなったので、試してみました。

「作業」

---

■初めに、続きを読むの部分に表示させたい画像を用意しておきましょう。
参考までに、このブログで設定している画像のサイズは172×62です。中途半端なサイズなのは、編集してた最後に枠線を付けてリサイズするのを忘れたからです・ｗ・

■区切り部分にどういった物(テキストないし画像)を表示するかを設定しているのは、テンプレートHTMLの中になるので、まずテンプレートのバックアップを取るようにしておきましょう。
それが済んだら、「HTMLの編集」で編集画面を出して、

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

という部分を探します。
「post.jump」あたりでページ内検索をかければいいかと思います。

コード内、<data:post.jumpText/>が、レイアウト編集画面の投稿ページ要素内で、「投稿ページのリンクテキスト」のボックスで決めてあるテキストを呼び出すという部分になります。
ちなみに、「投稿ページのリンクテキスト」は、<b>などで太字にしたりも出来ます。

では、用意しておいた画像は、適当な場所(bloggerの下書きとか、自分のサイトなど)にアップロードして、画像URLをコピー出来るようにしておいて、
<data:post.jumpText/>を<img src='画像URL' />に置き換えましょう。

---

以上、画像に置き換わるのを確認して、終了にしてもいいですし、CSSを編集して、画像に動きを付けてもいいと思います。

上記の説明のとおりにコードがあれば、「区切り」のdiv classは【jump-link】ということになりますので、テンプレートデザイナーから、カスタムCSSで【div.jump-link {}】を基本に設定をしていけばプレビューで変化を見ながら設定することが出来ます。

div.jump-link a {
margin-left:5px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background-color: #333333;
-webkit-transition:  all 0.5s;
-moz-transition: all 0.5s;
transition:  all 0.5s;
}
div.jump-link a:hover{
     position: relative;
     bottom: 5px;
     opacity:0.5;
}

わたしのCSS設定は、このようなコードを追加しました。
margin-leftで少し左側を空けて、文章とボタンに位置的な動きが出るように。radiusは付けておいたら、たまたま下の線が影のようにうつったので、こんな使い方に。
また、マウスオーバーで、画像が上に動きながら半透明になるようにして動きをつけてあります。

---

画像さえ決まればけっこう楽に変更できる部分ではあると思うので、少し変化を付けたいなという場合にどうでしょう？・ｗ・

●参考サイト

---

bloggerの『続きを読む』をカスタマイズ。ボタン画像にする・テキストを変更する・CSSで装飾する。 | 僕と私のモノ置き場
bloggerのRead More機能は、自動で『続きを読む』というテキストが表示されます。この『続きを読む』を好きなボタンに変えたり、テキストを変更する手順を紹介します。 ...