スポンサーリンク
「続きを読む…」を画像にします。
前回の記事、「続きを読む」の色変更で「続きを読む…」の文字色と背景色を変えましたが、
今回は別のカスタマイズ方法としてボタンの画像を使ってみます。
スタイルシートの変更
最初にスタイルシートを開き、前回出てきた
#entries .entryContinue a と #entries .entryContinue a:hover の #background を
コメントアウトにします。
これで、この２つの背景には色がつきません。色がつくと画像と重なって汚く見えます。
HTMLの変更
直すのは「続きを読む…」が表示される、メインとアーカイブの２つのスキンです。
ただし、やることは全く同じです。
スキンを開き
<div class=”entryContinue”><a href=”
#BlogEntryExtend”>続きを読む…</a></div>
</BlogEntryIfExtended>
と書いてある場所を探します。目印は続きを読む…です。
この「続きを読む…」という文字を画像に変えます。
つまり「ブログのタイトルを画像にする」と同じことを適用場所を変えてやるだけの話です。
変更後
<div class=”entryContinue”><a href=”
#BlogEntryExtend”><!–続きを読む…–><img src=”画像のURL” width=”85″ height=”25″ alt=”続きを読む…”/></a></div>
</BlogEntryIfExtended>
画像のURLに使いたい画像を指定します。
width は画像の幅
height は画像の高さ
この２つは適宜画像のサイズに合わせてください。
この２つを指定しないと画像のそのままの大きさで表示されます
alt はなんらかのトラブルで画像が表示されなかった時に代わりに表示する文字です。
これで、いちおうは完成です。
ただ、これだとマウスが乗っても色がついたりしないので、ボタンのような変化がありません。
変化をつけるには次のようにします。
リンクした時に画像を変える
マウスが乗った時に色が変わるように見せるには、同じ大きさ、同じデザインで色だけ違う画像を用意します。
マウスが乗った時にその画像を変更します。
スタイルシートでやる場合は、画像が背景である必要がありますが、これは背景ではないので
JavaScript（ジャバスクリプト）でやりました。
まずスキンのheadに下のスクリプトをコピペします。
使う画像のURLに変更してから、<head>から</head>までのどこでもいいので貼り付けてください。
<script type="text/javascript">
var buttonOver=function(elem){
elem.src='マウスが乗っているときの画像URL';
}
var buttonOut=function(elem){
elem.src='マウスが乗っていない時の画像URL';
}
</script>
次に先ほど直した場所（元は「続きを読む…」の文字だった場所）を下のように再度変更します。
<div class=”entryContinue”><a href=”
#BlogEntryExtend”><!–続きを読む…–><img src=”画像のURL” onmouseover=”buttonOver(this)” onmouseout=”buttonOut(this)” width=”85″ height=”25″ alt=”続きを読む…”/></a></div>
</BlogEntryIfExtended>
赤いところが追加箇所です。青いところにはマウスが乗っていないときの画像URLが入ります。これでマウスが乗ると画像が変わり、色が変化したように見えます。
JavaScriptでやっていることの説明は、今度別の記事にします。
今回のボタンの画像は下記のものを使わせていただきました。
「詳細を見る」と「続きを読む」ボタン / ‘Show Details’ & ‘Read More’ Buttons | Tyto-Style
関連コンテンツ
スポンサーリンク