ブログのホームに入り口(Enter)画像を配置③

★　ブログのホームに入り口(Enter)画像を配置し、他に動画や画像などを
　　指定した場所に配置します。
　　動画、画像の他にも文字・文章・アイフレなども表示できます。
　　

　●　ブログのホームにEnter画像を設置し、Enter がクリックされたらブログを表示します。
　　　また、指定された動画や画像をこのEnter画面にのみ配置します。

　●　配置は、下記２つのどちらかで絶対配置で指定できます。

　　①　position:absolute;　・・・　スクロールするとついてきます。
　　②　position:fixed;　　　・・・　スクロールしてもついてきません。

　　◆　②の場合は、ウインドウ（画面）の大きさを変えても
　　　　指定した位置は変化しません。
　　　　Enter画像は、位置が常に中央に位置するように変化するので
　　　　ウインドウ（画面）の大きさを変えるとEnter画像との相対位置が変わってしまいます。

　●　設置できる動画や画像は最大３個です。

◆　使用する画像(例）

　http://stat001.ameba.jp/user_images/20110507/04/new-bulue9/d5/8c/p/o0248011611211956999.png

◆　画面推移

　①　ブログのホームページの場合、Enter画像と指定した動画や画像などが表示されます。

　②　Enter画像をクリックすると、ブログが表示されます。

●　注意点

・　ホーム以外のページは、Enter画面は表示されません。
・　クッキーを利用して、Enter画面が表示されてから、次にEnter画面が表示させる
　　ため、の時間や日を指定することもできますが、当記事では紹介していません。
（　Enterが毎回、表示されるのを避けることができます・・・１日１回のみなど）

①　ＣＳＳへ追記する
　　（アメーババーをすでに、ＣＳＳで消している場合は、下記の赤字部分は消してください）

/* ------------------------------------------------ */
/* ◆　ホームのEnter操作（新スキン用）　　　　　　　*/
/* ------------------------------------------------ */
.skinBody{/* 全体を非表示 */
display:none;
border:none;
}
#amebaBar {/* アメーババーを非表示 */
display:none;
border:none;
}
.skinFrame{/* フレームを非表示 */
display:none;
}
#E_imgx:hover{/* Enter画像にカーソルを乗せた場合 */
cursor:pointer;
}
/* ------------------------------------------------ */

②　フリープラグインへ追記（例です。赤字部分は調整してください）

●　設定の説明

アメーバＩＤ・・・自分のアメーバＩＤを設定します
背景色・・・全体の背景色を設定します。transparent にすれば透明になります。
Enter画像・・・Enter画像のＵＲＬを指定します。
Enter 画像の横幅と縦幅・・・Enter 画像の横幅と縦幅を指定します(px)。

下記は追加部分です。(以前のバーションに追加した部分）
前にブログのホームに入り口(Enter)画像を配置を使っていて、
この機能を使いたい場合は、ここから下を変えればＯＫです。
Enter_disp_new3 の名前（関数名）も変えてください

var BG_sw="100";・・・　100 であれば、１個の動画や画像。110 であれば２個　111であれば３個。
BG_01・・・BG_swの１番目が1であれば、指定してください。
BG_02・・・BG_swの２番目が1であれば、指定してください。
BG_03・・・BG_swの３番目が1であれば、指定してください。

BG_01、BG_02、BG_03　の内容に付いて

<div id="名前"> と　</div> で入れたい動画や画像を囲んでください。
名前は、ユニークな名前を英数字で、つけてください（最初の文字は英字）

上記の例では、YouTubeを自動再生で表示しています。

・ Enter_disp_new3() のスクリプト関数名となります。
以前の紹介のものと変わっているので注意

★　上記の　<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
　　は、フリープラグインの一番最初に１つあればＯＫです。
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/b2/ea/10024848068.css"></script>
　　は、フリープラグインに１つあればＯＫです。

③　下記をＣＳＳへ追記する（例です。YouTube01は変えてください）

#YouTube01{/* 名前を指定 */
position:fixed;/* fixed 又は　absolute */
top:100px;/* 上からの位置 */
left:100px;/* 左からの位置 */
z-index:999;/* 重なった時の優先順位 */
}

●　transparent を指定した場合、全体背景画像が背景として表示する
　　ことができます。
　　この場合は、bodyに対して背景画像を設定してください

例：

body{
background-image:url(画像のＵＲＬ);
background-repeat:repeat;
}

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

ブログのホームに入り口(Enter)画像を配置③