1. TOP
  2. アメブロカスタマイズ
  3. 読者登録ボタンを置こう・ステップ3・アメブロカスタマイズ 新CSS編集用デザイン

読者登録ボタンを置こう・ステップ3・アメブロカスタマイズ 新CSS編集用デザイン

新スキンに読者登録ボタンを置こう・ステップ3

このコラムは前回のコラムの続きです。
今回は読者登録ボタンを置くためのステップ3です。今回が最終ステップです。

前回のゴール

前回は「このブログの読者になる」の文字リンクを画像を使わずに装飾してみました。マウスが乗ると色がかわり、ボタンらしくできたのではないでしょうか?

今回のゴールは?

今回はさらに発展して、画像リンクをおきます。以下の画像のようになります。

image-11032242353-11513598955

ボタン画像を設置し、別の画像を設置してマウスがのったら、文字が変化するようにします。

手順その1 以下のコードをコピーペースする

まず、CSS編集用デザインの画面を開いてください。(CSS編集画面は、管理画面のマイページの上にあるクイックリンクをクリックし、メニュー一覧から「スキンCSSの編集」をクリックしてください。)

以下のコードをコピーし,CSSの/* その他、拡張があれば記述 */の下に(既に拡張されている場合はさらにその下に,貼り付けてください。

/* その他、拡張があれば記述 */
#reader_btn10 a{height:80px;/*あなたの画像の高さ*/
width:300px;/*あなたの画像の幅*/
background-image:url(あなたのアップロードした画像のURLを貼り付け);/*マウスがのる前*/

background-repeat:no-repeat;
text-indent:-9999px;
margin:0px auto 10px;
display:block;
}

#reader_btn10 a:hover {
background-image:url(あなたのアップロードした画像のURLを貼り付け);/*マウスオーバー時*/

background-repeat:no-repeat;
}

いったん保存しましょう。

手順その2 画像を用意する

今回は300px×80pxの画像を用意します。そんな画像ないと言われる方の為に以下に3つのパターンを用意しましたので、こちらもご活用ください。画像をお持ちの方は手順その3に行きます。

下の画像を活用される場合は、ボタン画像の上で右クリックし「名前を付けて画像を保存」を選択し、画像をあなたのパソコンに保存してください。

ボタン1

登録ボタン1
o0300008011513539103

登録ボタン1マウスオーバー
o0300008011513539627

ボタン2

登録ボタン2
o0300008011513539625

登録ボタン2マウスオーバー
o0300008011513539626

ボタン3

登録ボタン3

o0300008011513539104

登録ボタン3マウスオーバー
o0300008011513539102

手順その3

用意した画像をアップロードし、上記コードの赤字部分の「あなたのアップロードした画像のURLを貼り付け」の部分にURLを貼り付けます。

これで上記のように読者登録ボタンの設定ができました。

まとめ

読者登録ボタンの設定を3回に分けて行いました。ステップ2とステップ3をあえて作った理由は、ボタン画像が思うように用意できない方の為です。もしあなたの思い通りの画像がなかったり、好きな色にカスタマイズしたい場合など臨機応変に対応できるようにステップ2を設けて解説しました。あなたの好みに合わせていろいろ試してみてください。

お疲れさまでした。

では

アメブロカスタマイズガイドは当サイトのカスタマイズサイトマップとなっています。

こちらを押してアメブロカスタマイズガイドを見てみる

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ