ペタ・読者登録ボタンのデザインを変更する方法 | 知恵の樹・アメブロテンプレート

知恵の樹・アメブロテンプレート

アメブロテンプレート・カスタマイズ

はじめに

ペタや読者登録ボタンなどを自分の好きなデザインに変更して、他の人のブログとの差別化をしたい人もいますよね。

また、自分の好きなデザインならば更新頻度も増えるとか増えないとか(笑)

ペタ・読者登録ボタン設置方法 」の応用なので簡単ですのでやってみましょう。

ペタ・読者登録ボタンのデザインを変更

ペタ・読者登録ボタン設置方法 」をお読みになったのを前提に進めていきます。
※画像はクリックで拡大します

①記事編集画面にて右上おねだりボタンをクリックしてボタンを表示。
そして青○の「HTMLタグを表示」をクリック。
知恵の樹

②すると、こんな画面になります。
この中の赤枠部分を変更することになります。
※簡略説明
緑線=画像を表示するURL
青線=画像のサイズ・画像名(必要なければ不要)
赤線=画像表示の為のURL

知恵の樹

赤○の画像ボタンをクリック。
※ここで一旦、説明しやすいように記事編集スペースの中身をクリアにしていますが、編集中の場合は「下書き(非公開)」ボタンをクリックして保存しといて下さい。

知恵の樹

④すると画像フォルダが開き、保存されている画像が表示されます。(保存してない場合はありません)
そして画像を選び「この画像を使う」をクリック。

知恵の樹

⑤編集画面に戻り①同様に画像が確認できますので、青○の「HTMLタグを表示」をクリック。

知恵の樹

⑥画面が②同様にHTMLが表示されますので、赤線部分が画像のURLとなります。
ペタやその他の画像を変更したい場合は、ここをコピペなどで入れ替えます。
※コピペの方法はこちら→コピペの方法

知恵の樹

⑦今回の例を表示してみると、このようになります。
の部分を入れ替えてます。の部分は画像サイズが違うので削除しています。

▼アメブロ既存のペタボタン▼
<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=lucifer-d0v0b&amp;service=blog"><img width="96" height="96" src="http://stat100.ameba.jp/blog/ucs/img/decoPeta/pc/decoPeta_21.gif" alt="ペタしてね" /></a>

▼画像フォルダの画像▼
<a href="http://stat.ameba.jp/user_images/20120606/22/lucifer-d0v0b/26/8c/j/o0100010012014366175.jpg"><img border="0" src="http://stat.ameba.jp/user_images/20120606/22/lucifer-d0v0b/26/8c/j/t01000100_0100010012014366175.jpg" alt="知恵の樹" /></a>

▼画像変更後▼
<a href="http://peta.ameba.jp/p/addPeta.do?targetAmebaId=lucifer-d0v0b&amp;service=blog"><img src="http://stat.ameba.jp/user_images/20120606/22/lucifer-d0v0b/26/8c/j/o0100010012014366175.jpg" alt="ペタしてね" /></a>