読者登録ボタンを置こう・ステップ3・アメブロカスタマイズ 新CSS編集用デザイン
新スキンに読者登録ボタンを置こう・ステップ3
このコラムは前回のコラムの続きです。
今回は読者登録ボタンを置くためのステップ3です。今回が最終ステップです。
前回のゴール
前回は「このブログの読者になる」の文字リンクを画像を使わずに装飾してみました。マウスが乗ると色がかわり、ボタンらしくできたのではないでしょうか?
今回のゴールは?
今回はさらに発展して、画像リンクをおきます。以下の画像のようになります。
ボタン画像を設置し、別の画像を設置してマウスがのったら、文字が変化するようにします。
手順その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
登録ボタン1マウスオーバー
ボタン2
登録ボタン2
登録ボタン2マウスオーバー
ボタン3
手順その3
用意した画像をアップロードし、上記コードの赤字部分の「あなたのアップロードした画像のURLを貼り付け」の部分にURLを貼り付けます。
これで上記のように読者登録ボタンの設定ができました。
まとめ
読者登録ボタンの設定を3回に分けて行いました。ステップ2とステップ3をあえて作った理由は、ボタン画像が思うように用意できない方の為です。もしあなたの思い通りの画像がなかったり、好きな色にカスタマイズしたい場合など臨機応変に対応できるようにステップ2を設けて解説しました。あなたの好みに合わせていろいろ試してみてください。
お疲れさまでした。
では
アメブロカスタマイズガイドは当サイトのカスタマイズサイトマップとなっています。