はてブのまとめ

 ひゃっはー

ヘッドラインニュース

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

はじめに

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

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

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

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

早速やり方を紹介したいと思います。
画像さえあれば所要時間は5分もかからないぐらい簡単ですね。
以下を管理→デザイン→カスタマイズ→デザイン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;

続きを読む画像を自分で作成できるサイト

ボタン素材 自動生成サイト - ButtonMakerアフラットボタン素材 自動生成サイト - ButtonMakerアフラットはてなブックマーク - ボタン素材 自動生成サイト - ButtonMakerアフラット

私はここで画像を作りました。
色やフォントなど自分で選べるのでそれぞれのブログにあった画像を作ってみてください。
他にもボタンを作る際にまたお世話になりそうです。

おわりに

こうやって少しずつ自分のブログのデザインを変えていくのは楽しいですね。
また面白そうなのがあれば紹介したいと思います。
まみぺこさん本当にありがとうございましたm(__)mまたはぁはぁしにブログを覗きに行かせていただきます!
はぁはぁブログ

広告を非表示にする