FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

【続きを読む】【続きを閉じる】を画像にする

当サイトが公開している共有テンプレートにおいて、
【続きを読む】
【続きを閉じる】
を画像にする方法を紹介します。

HTMLを編集します。

～


<div id="varP<%topentry_no>">
<div class="readmore">
<a href="<%topentry_link>" title="<%topentry_title>の続きを読む" onclick="showMore(<%topentry_no>,'<%topentry_link>');return false;" id="entry<%topentry_no>aa" name="entry<%topentry_no>aa">【続きを読む】</a></div>
</div>

<div id="varXYZ<%topentry_no>" style="display: none">
<div class="readclose">
<a href="#entry<%topentry_no>aa" title="<%topentry_title>の続きを閉じる" onclick="showMore(<%topentry_no>,0);return true;">【続きを閉じる】</a></div>
<%topentry_more>
</div>


～

赤い箇所を
<img src="画像URL" alt="<%topentry_title>の続きを読む" border="0" />

青い箇所を
<img src="画像URL" alt="<%topentry_title>の続きを閉じる" border="0" />

と入れ替えてください。

画像URLには、各自用意した画像のURLを入れてください。

これで【続きを読む】【続きを閉じる】を画像にすることができます。

関連記事

[ 2009/08/04 00:52 ] カスタマイズ共通カスタマイズ | TB(0) | CM(26)

≪ 背景を半透明にする（RGBa） | HOME | lightframeの左右の余白 ≫

[ 5287 ]

この時【続きを読む】の場所に、以下のタグを埋めればロールオーバーできますね(＾＾)

<img src="★１" onmouseover="this.src='▲１'" onmouseout="this.src='★２'">

★１には最初に表示される画像のURL
▲１はマウスポインタを重ねた時に表示される画像のURL
★２はマウスポインタが離れた時の画像のURL

これを使えばどっかのホームページみたいに、マウスを重ねるだけで画像を切り替えることができますね。

今回のような場合、私ならこんな感じに使います。
★１；http://blog-imgs-30.fc2.com/a/l/u/alumitic/last_1.gif
▲１：http://blog-imgs-30.fc2.com/a/l/u/alumitic/last_2.gif

この画像を使えば、最初に表示される画像は色がなくて
ポインタすれば★１に色が付いたように見えますね！

ポインタが離れた時に画像を★１に戻したい時は、★２には★１と同じURLを。

ロールオーバーを使う場合は、画像の大きさを同じにするのが良いみたいですね。
ちょっとお洒落になりました＾＾

[ 2009/08/04 19:48 ] [ 編集 ]

[ 5292 ] > alumiさん

素晴らしいコメントをありがとうございます。
これはみんなが参考になります。

画像の容量が小さければマウスオーバーしたときのタイムラグも気になる程ではないし、これが一番解りやすいロールオーバーの方法ですね。

[ 2009/08/04 21:16 ] [ 編集 ]

[ 5294 ]

alumiさん、いたおさん、素晴らしい情報を有難うございます^^

そこで一つ思ったのですが、alumiさんが紹介してくれているような「続きをみる」等のフリー素材がダウンロード出来るオススメのサイトはありますか？自分で色々検索しても沢山ありすぎて分かり難くて(-_-;)今は上記の「続きをみる」系の画像を入手したいです。我儘を言ってしまって申し訳ありません。ヨロシクお願いします(#^_^#)

[ 2009/08/05 01:43 ] [ 編集 ]

[ 5295 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/08/05 05:55 ] [ 編集 ]

[ 5306 ] > 緑茶さん

申しわけありません。普段画像を使用しないので、私も素材屋さんに詳しくありません。

検索すると沢山あって迷いますが、その中から好きな画像を探すのも楽しみの１つだと思います。是非お気に入りの素材屋さんを探して見つけ出してください。

[ 2009/08/05 23:33 ] [ 編集 ]

[ 5313 ]

>>いたおさん
左様で御座いますか(*´∇｀*)実を言うと色々なサイトを巡ってはいたのですが、中々目的の画像が見つからなかったので質問させていただきました。最初から、このように書いておけば良かったですね( ;^^)もう少し辛抱強く探してみますp(´∇｀)q

[ 2009/08/06 01:32 ] [ 編集 ]

[ 5320 ] > 緑茶さん

今回、例に出した（続きを開く）画像は自作モノです

画像加工ソフトを使えば、自分に合った画像を作る事ができます。
フリーで探してて、なかなか思ったような画像がなくて＾＾；
それで自作してみました。

ペイントでも作れますが、今回は「JTrim」というフリーソフトを使って作りました。

ちょっと面倒ですが、そんなに難しくはないと思うので、是非やってみて下さい！

失礼しました。

[ 2009/08/06 14:57 ] [ 編集 ]

[ 5328 ] > 緑茶さん、alumiさん

> 緑茶さん
どうしても気に入るものが無ければ、alumiさんのように自作してしまうほうがいいかもしれません。

> alumiさん
画像も自作だと、さらに愛着が沸きそうですね。
私も少し画像を作ってみようかな＾＾

[ 2009/08/06 21:26 ] [ 編集 ]

[ 5604 ]

べんりっすね
他の記事にもコメントさせてもらってるんですけど、
この続きを読むが画像になってるかを知りたいので、
教えてください。

場違いですいません＞＜

[ 2009/08/23 22:33 ] [ 編集 ]

[ 5608 ] > かにさん

管理画面の「新しく記事を書く」ページの下の方に「追記の編集」があります。
ここに記事をかけば「続きを読む」が表示されます。

[ 2009/08/23 23:00 ] [ 編集 ]

[ 6889 ] RSSリーダーで

はじめまして。
キメ細やかにサポートして頂けるので、
私のようなカスタマイズ初心者には本当に助かります。

このカスタマイズ通りでを画像にしたのですが、
RSSリーダー上だと「続きを読む」の画像が表示されない為、
続きを読むの表示がなくなってしまいます。
例えばザイーガ（http://www.zaeega.com/）とかだと、
続きを読むを同様に画像にしているのですが、
RSSリーダー上では文字として表示されてますので、
このようにブログ上では画像、RSSリーダー上では文字で表示したいのですが、
どのようにすれば良いのでしょうか？

ちなみに、
【続きを読むを個別記事ページに遷移させる】
http://10plate.blog44.fc2.com/blog-entry-114.html
のカスタマイズも施してます。
また、RSSリーダーはgooとライブドアで確認してます。
ご教授頂ければ嬉しいです。

[ 2009/11/10 11:15 ] [ 編集 ]

[ 6900 ] > 哲夫さん

これはFC2の仕様のようで、「続きを読む」が画像リンクでもテキストリンクでもRSSには表示されないようです。

FC2リクエストにもあったので、私も一票投じておきました。FC2が対応してくれれば良いのですが・・・

http://request.fc2.com/view_wish.php?wid=5_1257326726_1209829

[ 2009/11/10 23:06 ] [ 編集 ]

[ 6910 ] ご丁寧に有難う御座います

早速のお返事有難う御座います。
本当ですね。見落としてました。
教えて下さってどうも有難う御座いました。

お忙しい所お時間取らせて申し訳ありませんでした。
テンプレート自体も最高ですが、このブログは本当に勉強になります。
今後も定期的にカスタマイズ方法を記事にしてご教授頂けると嬉しいです。
いつも本当に有難う御座います。

[ 2009/11/10 23:50 ] [ 編集 ]

[ 6913 ] 記述忘れ

リクエストへ票投して下さってどうも有難う御座いました。
大事なお礼の記述を忘れてしまいました(^_^;)

[ 2009/11/10 23:59 ] [ 編集 ]

[ 6926 ] > 哲夫さん

あとはFC2さんが早く対応してくれるといいですね＾＾；

[ 2009/11/11 23:22 ] [ 編集 ]

[ 7270 ]

続きを読む

なのですが、先頭に記事のタイトルを入れることは出来ますか？

～記事（タイトル）の続きを読む

としたいのですが・・。

[ 2009/12/04 01:02 ] [ 編集 ]

[ 7276 ] > あうさん

続きを読む
というところを、
<%topentry_title>の続きを読む
としてください。

[ 2009/12/04 23:27 ] [ 編集 ]

[ 7337 ]

画像を左に少しずらしたいのですがどうすればいいでしょう?

[ 2009/12/08 23:24 ] [ 編集 ]

[ 7338 ] > Geckoさん

スタイルシートの末尾にこれを加えてみてください。

.readmore {
margin-left: -10px;
}

数値はいろいろ変えて調整してください。

[ 2009/12/08 23:54 ] [ 編集 ]

[ 7339 ]

上の者ですが解決しました。
もう1つ質問です。
ページナビゲーションも画像にしたのですが何故か2段になってしまいます。
どうすればいいでしょうか?

[ 2009/12/08 23:55 ] [ 編集 ]

[ 7340 ] > Geckoさん

HTMLに以下のような箇所があるはずです。



～



これを

の上に移動させてみてください。

万が一に備えてバックアップをとっておいてください。

[ 2009/12/09 00:53 ] [ 編集 ]

[ 7344 ]

ありがとうございます!!
おかげで解決しました

[ 2009/12/09 11:24 ] [ 編集 ]

[ 7347 ] > Geckoさん

解決して良かったです＾＾

[ 2009/12/09 23:52 ] [ 編集 ]

[ 7352 ]

返信おくれましたが、
説明ありがとうございました。

えーと、名前変えたのでいっておきます。
かにからしょぐらしにへんこうしました。

[ 2009/12/10 18:24 ] [ 編集 ]

[ 7358 ] > しょぐらしさん

名前を変更したのですね。
ご報告ありがとうございます＾＾