新スキンに読者登録ボタンを置こう・ステップ2このコラムは前回のコラムの続きです。今回は読者登録ボタンを置くためのステップ2です。前回のコラム読者登録ボタンを置こう・ステップ1を見る前回のゴール前回は以下の画像のように「このブログの読者になる」の文字リンクを配置する作業をしました。今回のゴールは?今回は上の画像のような文字リンクだけではさみしいのでここに装飾をしたいと思います。今回のゴールは以下の画像のようになります。グレーのボタンを作り、マウスがのったら、ピンクになるようにします。以下のコードをコピーペースとするだけです。今回の作業は簡単です。CSS編集用デザインの画面を開いてください。(CSS編集画面は、管理画面のマイページの上にあるクイックリンクをクリックし、メニュー一覧から「スキンCSSの編集」をクリックしてください。*/の下に(既に拡張されている場合はさらにその下に,貼り付けてください。{background-color:#FF99FF;}保存してブログを確認してみてください。上の画像の「ゴール」のように、読者登録のボタンが追加されましたね。このコードをカスタマイズするそれぞれのコードの解説を以下に記載しますので、それぞれの値を変更して、自分色にカスタマイズしてみてください。緑色の文字が解説部分です。解説でカラーコードという言葉がでてきますが、これはその名の通りの色のコードです。私のコラムで色のコラムの解説をしてますのでそちらのコードも参照してみてください。a{height:30px;ボタンの高さを設定します。数字を変えると高さがより高くなります。width:400px;ボタンの幅を設定します。数字を変えると幅がより広くなります。#cccccc;ボタンの枠を設定しています。1pxの数字を大きくすると枠線の幅が広くなり、#ccccccのカラーコードを変更すると枠線の色を変化させることができます。10px;display:block;text-align:center;font-size:2.0em;「このブログの読者になる」の文字のサイズ。数字を大きくすると文字が大きくなるbackground-color:#cccccc;マウスが乗る前のボタンの背景の色。(現在グレー)text-decoration:none;color:#000000;「このブログの読者になる」の文字の色。{background-color:#00CC00;マウスが乗った時の背景の色。上記のコードを2か所だけ変えてみました。変えた部分は以下の赤くした部分です。{background-color:#99FFCC;}ボタンの背景を薄い緑に変更してみました。サイドメニューがグレーなので、色のバランスを調整するため、こちらも配色を変更してみました。サイドメニューの設定はこちらのまとめコラムで解説しているのでそちらも見てみてくださいね。こちらのアメブロカスタマイズガイドよりサイドメニューのカスタムが見れます。次回はボタン画像を設定しましょう☆これで今回のステップは終了です。今回はコード入力だけでボタンを作ってみましたが、次回はこのコードをボタンの画像に変換してより、読者登録ボタンを際立たせてみましょう。新CSS編集用【2016年3月追加分】アメブロの記事下に定型文を張るためのサンプルカスタマイズ記事下に定型文を挿入する方法が、できなくなる。パソコン初心者でもできる。