2012/05/03

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

follow us in feedly
follow us in RSS

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

「作業」

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

区切り部分にどういった物(テキストないし画像)を表示するかを設定しているのは、テンプレート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は付けておいたら、たまたま下の線が影のようにうつったので、こんな使い方に。
また、マウスオーバーで、画像が上に動きながら半透明になるようにして動きをつけてあります。


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

●参考サイト

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

4 件のコメント:

  1. Jean Kamikaze2012/08/11 3:24:00

    どもども、じーんです。お世話になっております。
    さっそく記事を参考にして「続きを読む」をカスタムしてみたんですが。「続きを読む」をカスタムCSSでいじくったらば、ガジェットで導入した「LinkWithin」までいっしょにカスタムされてしまいまして、困惑しております(;・∀・)
    なにかご存知のことがあればお教えください。

    返信削除
  2. こんにちは。
    自由帳のカスタムについてでいいんですよね?

    テンプレートHTMLを見られるわけではないので、確実とは言い切れないんですが。
    ページを確認したところ、<div class="jamp-link">のくくりの中に、linkwithinが含まれてしまっているように思います。
    linkwithinの表示コードを、<div class="post-footer-line post-footer-line-1">の直下に移動させるのはいかがでしょうか?

    画像は、Chromeの右クリックメニュー「要素を検証」から確認してみたものです。
    うまくいかなければ、Twitterで相談致しましょう・w・

    返信削除
  3. 続きを読む、を新しいページで開くのではなく、クリックで展開させる方法をご存知ではないでしょうか?

    返信削除
  4. こんにちは、コメントありがとうございます。

    どこかで見たような気もするのですが、ちょっと思い出せませんでした。
    Javascriptで出来そうな感じなので、Bloggerに拘らずにWordpressなどで使っている方法が分かれば、そのまま使えるかもしれませんね。

    お力になれず申し訳ありません。

    返信削除

Related Posts Plugin for WordPress, Blogger...