初心者でもできるアメブロのカスタマイズ 読者ボタン編
アメブロのデザインって色々制約があってカスタマイズは
難しいと思ってませんか？
その通り、簡単ではありません。今の私のデザインに至る
まで結構勉強しました。HPを作成する時に使うHTML やCSS
といった知らない人からすれば、？？？ばかりだと思います。
ですから、誰でも簡単にできるって訳ではないです。
でも、ちょこっとしたやり方を覚えてしまえば、実は全然
難しくなくなるんです。
そんな難しくて自分にはちょっと・・・という方が気軽に
カスタマイズを試してもらえようこのブログの手順を見ながら
コピーandペーストで貼り付けるだけでできるような記事を
ちょっとずつですが書いていこうと思います。
ひとまずは私のブログでやっているカスタマイズ内容を紹介
していこうと思っています。
さしあたって一番簡単な 読者になるボタン のオリジナル画像
への置き換えです。
では行ってみましょう。
１．使う画像を用意する
「このブログの読者になる」に当てはめるボタンの画像が
必要になります。
お手軽が目的なので 幅150ｐｘ 高さ40ｐｘ の画像を作るか
もしくはまずは練習代わりに下記の画像を使ってみてください。
ボタンは通常時表示用と マウスカーソルが乗った時の
二つの画像を用意します。
通常時の画像
マウスカーソルが乗ったときの画像
＊画像を保存する場合は上の画像を右クリックして画像を保存
しておいてください。
２．画像をアメブロにアップする
使う画像をアメブロにアップします。
ブログで画像を使う場合と同じ要領になりますが、一応手順を。
（ご存知の方は飛ばしてください。）
マイページの左上のクイックリンクを開きます。
その中の画像フォルダをクリック
そうするとこのような画面が出てくるので参照ボタンを
押して、先ほど保存した画像を選びます。
参照が完了すると下記のような画面になっているハズ
なのでアップロードを押します。（ちょっと待ちます）
すると以下のようにアップロードした画像が出ている
と思います。
これで画像のアップロード作業は完了です。
３．画像設置準備
さてココからがちょっと分かりにくくなってきます。
最初は何も考えず、手順どおりにやってみてください。
まず準備としてWindowsならメモ帳を起動しておいて
ください。
＊スタートメニュー－アクセサリの中にあるハズ。
＊Windows7の方はスタートメニューの検索窓に
notepad と打ち込むと出てきます。
最初に以下の指定範囲をコピーしてメモ帳に貼り付け
てください。（青文字範囲です）
ここの下の行からコピー
/*オリジナル読者ボタン*/
.readerMainLink{
margin:5px auto;
padding:0;
}
.readerMainLink p{
background-image:none;
text-indent:-9999px;
}
.readerMainLink p a{
padding:0;
margin:0 auto;
display:block;
width:150px; /*画像の横幅サイズ*/
height:40px; /*画像の縦幅サイズ*/
background-image:url(画像のurl1);
background-position :center top;
background-repeat:no-repeat ;
}
.readerMainLink p a:hover{
background-image:url(画像のurl2);
background-repeat:no-repeat ;
}
/*オリジナル読者ボタンend*/
ここの上の行までコピー
次に先ほどの画像フォルダ画面でまずは最初に表示したい
ほうの画像をクリックしていてください。
ちょっと大きめに表示されますよね？
そこでその画像を右クリックして、画像のＵＲＬをコピー
というのを選んでください。
そうしたら先ほどメモ帳にコピーした中の 画像のurl1
という部分だけを消してその()括弧内に貼り付けてください。
同じ様にマウスカーソルを乗せたときに表示される
画像のURLをコピーして、今度はメモ帳の 画像のurl2
という部分だけを消してその（）括弧内に貼り付けてください。
ココまで画像設置準備は完了です。
念の為に先ほどコピー貼り付けで作っているメモ帳を
適当な名前を付けて保存しておきましょう。
＊上記作業はFirefoxをブラウザとして使っている場合です。
IEの場合は右クリックでプロパティで同じ様にＵＲＬを見る
事ができたハズなので、そのＵＲＬをコピーすれば同様の
作業ができます。
４．設置作業
最後の作業です。
またまた、マイページのクイックリンクから今度は
「スキンのＣＳＳ編集」を選びます。
するとこういう画面になるので、画面内のカーソルを
一番最後まで持っていき、中の文章の文末に移動します。
画面内の画面（分かりにくい？）をクリックし、文末の
最後の文字の横にカーソルを持っていって、改行します。
後で分かりにくくならないように１行あけておくと良いです。
そしてメモ帳にコピーしていた文章をここに貼り付けます。
（これがよくカスタマイズの記事に出てくるＣＳＳの最後に
貼り付けるという行為になります。）
ここまで終わったら後はうまく設置できているか確認する
だけです。保存ボタンの上にある「表示を確認する」をクリック
してみてください。
ボタンが自分のブログに表示されていますか？？
されていれば、おめでとうございます。設置完了です。
何かおかしかったり、操作中よく分からなくなってしまったら
「編集前の状態に戻す」をクリックしてください。
そうすれば、元の状態に戻ります。
一度設置ができた後に 画像を変えたい場合は同じ画面内で
メモ帳で作業したURLの貼り付けをこの画面で行えばＯＫです。
いかがだったでしょうか？
極力 分かりやすさを追求したつもりですが、分からないこと、
うまくいかないことがあったらお気軽にコメント、メッセージを
お願いします。
＊今回のカスタマイズは元々のブログデザインが シンプル、
カスタマイズ可でやっています。通常のブログデザインでも
できるかどうか、すみません別で確認中です。
それとこれから少しずつですが、カスタマイズ記事を書きながら
そのまま使える素材や素材への希望文章入れなんかをやって
いきたいと思っています。
こんな画像がほしい！とかリクエストがあれば、どしどしお願い
します。
次の記事では私の作った そのまま使えそうなオリジナルボタン
デザインをアップする予定です。