読者です 読者をやめる 読者になる 読者になる

もふぬこ動画☆画像

かわいい!おもしろい!猫動画と猫画像を毎日更新!(たまに違う記事も書いています)

【はてなブログ】続きを読むリンクを画像ボタンに変更する方法とボタン画像の作り方

技術情報など はてなブログ

前に僕の「続きを読む」ボタンについて質問があったので書いておきます。

 

続きを読むリンクを画像ボタンに変更

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

こちらに記載されておりますので説明は不要かもしれませんが・・・

 

「もふぬこ戦記」では以下のように変更しています。

 以下を管理>デザイン>カスタマイズ>デザイン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です。

 

f:id:emija:20140812103224j:plain

※幅200px、高さ80pxで作っています。ボタンサイズを変えたい場合には、上記CSSの"width:200px;height:80px;"のところも変えてください。

 

「もふぬこ戦記」では記事中の「追記」に記載されている方を使っています。

なお、マウスカーソルが画像の上に来た時に白くなるのは、画像が「透過」するためなので背景が黒いブログ等では白くなりません。

背景が白以外の場合には、上記リンク先記事の最初に記載されている方法(ボタン画像を2つ分用意する方法)を使用してください。

 

画像ボタンの作り方

こちらも上記記事内に書いてありますが、僕のボタンもこれを使って作っています。

WEBボタン素材自動生成サイト - ButtonMakerアフラット

 

文字フォントを変えたかったのでここではボタンの枠だけを作りました。

僕が使ったフォントは「ぷちくまふぉんと」です。

ももいろのぷちかん。

 

他のフォントが良い人は以下のサイトなどからお好みのフォントをダウンロードしましょう。

フォントふぉんとFONT.com | フォント配布サイトのサンプル画像付きリンク集

例)

f:id:emija:20140812113625j:plain

 

ダウンロードしたフォントファイルをWindowsフォルダの下のFontsフォルダにコピーすればインストール完了です。

 

 後はWindows付属のペイントソフトで編集するわけですが、WindowsのペイントソフトはGIF画像を編集すると画像が荒くなります。

※Windows7で確認(8は知りませんが、7以前は荒くなると思います。)

 

 そこで、一度、作成したボタン画像をペイントで開き「名前を付けて保存」でJPEGかPNGに変えて保存します。

※GIFのまま編集したい場合には、Windowsのペイントソフト以外のソフトを使ってください。

 

 そのファイルを再度開いて文字を埋め込みます。 

f:id:emija:20140812110050j:plain

 ツールにあるAというアイコンをクリック

 

f:id:emija:20140812110236j:plain

先ほどダウンロードしたフォントを選択

文字サイズや色を決めて、文字を入れる範囲を選択してから「続きを読む」と入力します。

文字の位置は、枠をドラッグすることで微調整できます。

 

 文字が決定したら保存して完成です!

 f:id:emija:20140812103224j:plain

 

背景の足跡

背景の足跡はどこからきたのか・・?

「頑張って描いた」って言いたい所ですが、昔から美術がダメダメな僕は絵が描けないので・・・Web版のPhotoshopを使いました。

Photoshop Inspiration, Photoshop Information | Photoshop.com

 

ファイルをアップロードして Decorate>Animalsを開くと

 

f:id:emija:20140812111414j:plain

 

足跡あるじゃん!(笑)

 

という感じで、これを2つ付けてPCに保存してから文字を入れました。

Web版のPhotoshopを使ったのはこれが初めてだったのですが、意外と使えるかもしれません。(機能は多くないですが)

 

以上、続きを読むの画像化(もふぬこ戦記版)でした!