ポチポチ祭り設置方法（アメブロＣＳＳ編集）
(-∀-管)『管理人Xです！』
井口ブログ、
読者さんのネット関連の
質問に答えます。
井口ブログにある、
ポチポチ祭りの
動く画像
コレ↑の設置方法は、
２つの作業が必要です。
１つ目。
アメブロの管理画面の、
タブ・・・マイページ、ブログ、ブログネタ・・・
の、【ブログ】をクリックすると、
さらに、もう１階層タブが表示されるので、
タブ・・・アメブロを書く、読者とコメント、デザインの変更・・・
の【デザインの変更】を押します。
すると、スキンＣＳＳの編集が出てきます。
【ブログのスキンによって編集できない場合もあります】
スキンＣＳＳの編集を押すと、
スクロールバーで、
下まで下がれるので、
１番下まで下がり、
（※既存のＣＳＳ【文字】は消さないように注意。追加する形にして下さい）
そこへ、
下記内容を、貼り付け保存します。
グレーの箇所、全てコピーして
貼り付けして構いません。
/*■ポチポチ追加箇所ＣＳＳ■*/
#frame { position: relative; }
div#igu{ position:absolute; top:290px; left:-50px; z-index:110; }
/*■ここまで■*/
２つ目は、
上記のＣＳＳを機能させる、
指令を出すタグを
設置する必要があります。
デザイン変更がある
同じタブの、
サイドバーより、
フリースペースの編集をクリック。
その中に、
下記を貼り付けます。
<div id="igu"><a href="http://ameblo.jp/iguchi-blog">
<img src="http://stat.ameba.jp/user_images/20090509/12/x-lecture/43/3f/g/t00800075_0080007510178126688.gif">
</a></div>
これで、表示されます。
位置の調整は、
１つ目の箇所を
いじればＯＫです。
top:290px;
left:-50px;
ここの数字を変更します。
以下、それぞれ、
左右、
上下の動かし方。
左右を動かす場合。
left:-50px;
の数字のみを、
半角数字で変更します。
もっと左にしたい場合は、
-100に
もっと右にしたい場合は、
-（マイナス）を省き、
0にしてから、
プレビュー確認しながら、
10
50
100
など、好きな位置に調整してください。
数値が増えれば、
右に画像は移動します。
－（マイナス）は
消しても構いませんが、
前後の
left: と px; は消さないで下さい。
上下を動かす場合、
top:290px;
の数値を変更します。
上から下へ
画像をずらす数値となるので、
数値が大きければ、
より下へ、
少なければ、
上へ画像は移動します。
０なら、１番上にいきます。
390に変更すれば、
もっと下へいきます。
100にすれば、
上にいきます。
リンク先を変更する場合。
１つ目ではなく、
２つ目で説明した内容を
編集します。
貼り付けしたままだと、
井口達也ブログへ
画像を押すと、
リンクで飛びますが、
変更したい場合などは、
の箇所を、
お好きなＵＲＬへ変更して下さい。
違う画像を使用する場合は、
http://stat.ameba.jp/user_images/20090509/12/x-lecture/43/3f/g/t00800075_0080007510178126688.gif
の箇所を、
画像のＵＲＬに変更すれば、
変更可能です。
ただし、
背景を、透過させないと、
ブログ上に画像が
かぶってしまいます。
png画像は、
ブラウザＩＥ８以下だと、
透過させて
作成した画像でも、
透過箇所が、
薄いグレーに表示されるので、
ご注意下さい。
井口達也ブログの
ロゴでは、
閲覧者が多く、
多くの人に
綺麗に表示させる為、
バナーは画像１枚で作成してます。
私Ｘのブログの
ロゴは、
１枚の画像の上に、
もう１枚の画像がある形となります。
サンプル、
この画像の上に
この画像が、左に表示されています。
このように、
２枚の画像によって、
バナーにしています。
ＣＳＳでpng画像を
呼び出して、
立体的に表示されてますが、
ブラウザのバージョンが
古い場合、
一部の人は、
四角いグレーが表示されてしまいます。
こんなイメージです。
なので、
井口ブログでは、
辞めました。
（書籍化発表１２時の時点では立体的でしたｗ）
と言うわけで、
今回、
笑いがありませんが・・・
説明を終わります。
x-lecture
をレスキューと勘違いしてる
空気をパンチしちゃう子・・・
レクチャーに、
今回のでなったかな・・・汗
次回は、
バナー上の、
タイトルと、
タイトル下のブログ説明文の、
文字サイズ変更方法と、
設置場所の指定方法を
予定してます。
(-∀-管)