header01_08_20130213231803.png


スポンサーサイト
  1. --/--/--(--) --:--:--|
  2. スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

Read moreボタン設置方法
  1. 2013/05/04(土) 00:09:30|
  2. ブログ制作
ブログ制作日記(?)第3回です*゚Д゚*

実は意外な事に、当ブログで一番拍手が多いのはこの制作カテゴリだったり。
森ブログなんですけどねー・・w(嬉しいです!めっちゃ嬉しいです!!)
需要があった事に驚きを隠せません。


今回は、丁度さっき設置した「続きを読む」のボタンについてです。

更に、今回当ブログに設置した「続きを読む」ボタンはマウスを乗せると
画像が変わる仕様にしてみたので、それも併せてご紹介します*´ェ`*



追記の時に表示される「続きを読む」という字をボタンにしたい。
という事でまずは、変更方法を。


画像を用意します。(今回は作りました)
readmore.png

こういうのにしてみました。
それを、ブログにアップロードします。



今回触るのはhtmlです。

<!--more_link-->
<a href="<%topentry_link>#more"><%template_extend></a>
<!--/more_link-->


こういう部分を探します。


Point(?)
<!-- -->
△この部分をコメントアウトと言いますが、中に書いた事は反映されないので
メモに使うと便利だと思います*゚∀゚*
<!--追記ボタン--> 
△こういう風に日本語でメモっても大丈夫ですので、
「いじった後にわからなくなりそう!」
なんて時はここはどの部分で~みたいに整理しておくと、編集の時に便利です。

私は編集する時に自信がなかったりすると、<!-- -->でコードごと囲っておいて
すぐに復旧出来るようにしてから書き加えたりする事もあります。






さて、話がかなり脱線しましたが、上のhtmlがリンクの基本記述です。
<a href="URL">文字</a>
だと、「文字」の部分をクリックで飛ぶテキストリンク。
<a href="URL"><img src="画像URL"></a>
だと画像をクリックして飛ぶ画像リンクになります。


ですので今回は

<!--more_link-->
<a href="<%topentry_link>#more"><%template_extend></a>
<!--/more_link-->

赤字で書いた部分を画像URLに変えます。
(人によっては、テキストで「続きを読む」と記述されているかも知れません。
 個々で違うと思いますので、ご自分の編集画面で確認して下さいませー)


<!--more_link-->
<a href="<%topentry_link>#more"><img src="画像URL"></a>
<!--/more_link-->

という具合に書きかえると、ボタンが反映されるかと思います。
プレビューなどで確認して、Okなら保存です。




さて、次はマウスオーバーで画像が変わるタイプのボタンの設置です。
追記に書きますので、Read more...ボタンからどーぞー!












マウスを乗せた時だけ画像が変わるボタンにする方法です。
他にもあるっぽいですが、皆目見当もつかないので(泣)この方法をご紹介します。


まずは画像を用意します。
今回用意するのは2種類の画像です。
そしてブログにアップロードしておきます。

①通常の時に表示される画像。
②マウスを乗せた時に表示される画像。



今回私が作ったものはこんな感じです。(かなり簡素ですが)

①通常時
readmore.png

②マウスオーバー時
readmore02.png


そしてこういうコードを書きます。(コピペでOK!)


<img src="①通常表示される画像URL" onmouseover="this .src='②マウスオーバー時の画像URL';" onmouseout="this .src='①マウスを外した時の画像URL';">

①・②の赤字のところをアップロードした画像のURLに書きかえます。



これを先ほどの要領で、
<!--more_link-->
<a href="<%topentry_link>#more"><img src="画像URL"></a>
<!--/more_link-->


の箇所に挿入します。

<!--more_link-->
<a href="<%topentry_link>#more">
<img src="①通常表示される画像URL" onmouseover="this .src='②マウスオーバー時の画像URL';" onmouseout="this .src='①マウスを外した時の画像URL';"> </a>
<!--/more_link-->


こういう感じになってればOKです。
プレビューで確認して出来ていたら保存です*゚∀゚*!!



私は、htmlもCSSも初心者(にすら至っていない)ミジンコみたいな頭で触ってますが
元の表記をコメントアウトでもコピペでも残しておく事が大事だと身に染みました;w;
いつでも戻せる環境にしておく事がとても大事です。
プレビューのつもりが保存しちゃって、しかも反映どころかレイアウト崩れた!!
みたいな事で一晩中テンパったりもしたのでこりごりですホント´□`;

さて、今回はここまでー。
また近いうちにブログ制作日記書きます*´ェ`*(ネタはあるの!)
web拍手 by FC2

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。