はてなブログで続きを読むを画像（ボタン）に変更する方法

はじめに

はい、タイトルまんまですね。
デフォルトの続きを読むがあまりにも貧相で味気ないので前々から変えたいなーと思ってたんですけど、うまく変える方法がわからずに放置してました。

同じような人がいるんじゃないかなと思い、やり方を紹介します。

覗き見し…参考にしたのはまみぺこさんのはぁはぁブログです。
はてなブログでこんなにカスタマイズできるんだと衝撃でした。
はてなブログになりました - はぁはぁブログ

続きを読むを画像に変えるには

早速やり方を紹介したいと思います。
画像さえあれば所要時間は５分もかからないぐらい簡単ですね。
以下を管理→デザイン→カスタマイズ→デザインCSSに貼り付けるだけです。

a.entry-see-more{
width:220px;
height:50px;
text-indent:-999px;
display:block;
background:transparent url("自分でアップロードした画像") no-repeat left top;
}
a.entry-see-more:hover    {background-position:0px -50px;}

注意すべきはこれは私の設定なのでwidthとheightをそれぞれ自分がアップロードした画像に合わせることですかね。
マウスオーバーした時に続きを読むの画像の色が変わるようにするには

a.entry-see-more:hover    {background-position:0px -50px;}

この部分ですね。-50pxはまたアップロードした画像に合わせてください。
f:id:ponako10:20130617052736g:plain
こんな感じで縦にすると一つの画像でいけるようです。

※追記
下記のCSSを追加するとマウスオーバー後の画像がいりませんし、いい感じになります。
こっちのほうが楽だね！
a.entry-see-more:hover{
text-decoration: none;
box-shadow: inset 0px 1px 12px #666;
text-shadow: 0 0 3px #000;
opacity: 0.8;