【はてなブログ】続きを読むリンクを画像ボタンに変更する方法とボタン画像の作り方
前に僕の「続きを読む」ボタンについて質問があったので書いておきます。
続きを読むリンクを画像ボタンに変更
はてなブログで続きを読むを画像（ボタン）に変更する方法 - はてブのまとめ
こちらに記載されておりますので説明は不要かもしれませんが・・・
「もふぬこ戦記」では以下のように変更しています。
以下を管理＞デザイン＞カスタマイズ＞デザインCSSに貼り付けます。
a.entry-see-more{
width:200px;
height:80px;
text-indent:-999px;
display:block;
background:transparent url("アップロードした画像のURL") no-repeat left top;
}
a.entry-see-more:hover{
text-decoration: none;
box-shadow: inset 0px 1px 12px #666;
text-shadow: 0 0 3px #000;
opacity: 0.8;
あとは画像を作って "アップロードした画像のURL”に画像のURLを記載すればOKです。
※幅200px、高さ80pxで作っています。ボタンサイズを変えたい場合には、上記CSSの"width:200px;height:80px;"のところも変えてください。
「もふぬこ戦記」では記事中の「追記」に記載されている方を使っています。
なお、マウスカーソルが画像の上に来た時に白くなるのは、画像が「透過」するためなので背景が黒いブログ等では白くなりません。
背景が白以外の場合には、上記リンク先記事の最初に記載されている方法（ボタン画像を２つ分用意する方法）を使用してください。
画像ボタンの作り方
こちらも上記記事内に書いてありますが、僕のボタンもこれを使って作っています。
WEBボタン素材自動生成サイト - ButtonMakerアフラット
文字フォントを変えたかったのでここではボタンの枠だけを作りました。
僕が使ったフォントは「ぷちくまふぉんと」です。
他のフォントが良い人は以下のサイトなどからお好みのフォントをダウンロードしましょう。
フォントふぉんとFONT.com | フォント配布サイトのサンプル画像付きリンク集
例）
ダウンロードしたフォントファイルをWindowsフォルダの下のFontsフォルダにコピーすればインストール完了です。
後はWindows付属のペイントソフトで編集するわけですが、WindowsのペイントソフトはGIF画像を編集すると画像が荒くなります。
※Windows7で確認（8は知りませんが、7以前は荒くなると思います。）
そこで、一度、作成したボタン画像をペイントで開き「名前を付けて保存」でJPEGかPNGに変えて保存します。
※GIFのまま編集したい場合には、Windowsのペイントソフト以外のソフトを使ってください。
そのファイルを再度開いて文字を埋め込みます。
ツールにあるAというアイコンをクリック
先ほどダウンロードしたフォントを選択
文字サイズや色を決めて、文字を入れる範囲を選択してから「続きを読む」と入力します。
文字の位置は、枠をドラッグすることで微調整できます。
文字が決定したら保存して完成です！
背景の足跡
背景の足跡はどこからきたのか・・？
「頑張って描いた」って言いたい所ですが、昔から美術がダメダメな僕は絵が描けないので・・・Web版のPhotoshopを使いました。
Photoshop Inspiration, Photoshop Information | Photoshop.com
ファイルをアップロードして Decorate＞Animalsを開くと
足跡あるじゃん！（笑）
という感じで、これを２つ付けてPCに保存してから文字を入れました。
Web版のPhotoshopを使ったのはこれが初めてだったのですが、意外と使えるかもしれません。（機能は多くないですが）
以上、続きを読むの画像化（もふぬこ戦記版）でした！
