ブログのホームに入り口(Enter)画像やメッセージなどを配置

★　ブログのホームに入り口(Enter)画像やメッセージなどを配置

●　機能

①　ブログのホームに画像、メッセージ、動画などを貼ることが可能。
②　この表示を１日１回など、表示する期間を指定可能（日単位）。
　　（クッキーを利用　クッキー名：Entk2_アメーバＩＤ）
③　クリックしてブログを表示させるときのクリック部分を指定可能。
④　ブログ表示時のフェードイン、フェードアウトの時間を指定可能。
⑤　クリックするとブログを表示しますが、クリックする場所を
　　複数指定も可能です。（汎用的にスクリプトを作成しています）

■　やりかた。

◆　ＣＳＳへ下記を追記する。

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

●　フリープラグインへ追記する。（形式）
　　★部分にはＨＴＭＬを入れられます。
　　<div id="E_click">★</div>はクリックしたときにブログを表示する
　　ものを指定します。（変更は可能）

◆　説明

・　下記はフリープラグインの最初に１つあればＯＫです。

<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/6d/7d/10030757386.css"></script>

・　"#E_click"　・・・　クリックしたときブログを表示されるセレクタ名。

・　0　・・・　0は１日１回などの指定なし。　1 など日数を指定可能。
　　　　　　　日数を指定した場合は、その期間は Enter 表示はされません。

・　3000　・・・　ブログを表示するときのフェードイン時間。　3000 は３秒。

・　3000　・・・　Enterを消すときのフェードアウト時間。　3000 は３秒。

・　"Y"　・・・　アメーババーを表示する場合は "Y" 表示しない場合は "N"

●　ＣＳＳへ追記する。
（width と　heightは必ず指定する。
width と　heightから中央に表示する計算をしています）

/* ------------------------------------------- */
/* Enter メッセージなどの表示　　　　　　　　　*/
/* ------------------------------------------- */
#E_text{
width:250px;/* 幅 */
height:50px;/* 高さ */
font-size:24px;/* フォントサイズ */
color:#ffffff;/* 文字色 */
text-align:center;/* 中央寄せ */
background-image:url();/* 背景画像 */
background-repeat:repeat;/* 繰り返しする */
}
#b_body{/* 全体背景 */
background-color:#000000;/* 背景色 */
}

例①　ブログホームに　Enterメッセージを表示する。

●　フリープラグインへ追記する。

●　ＣＳＳへ追記する。

/* ------------------------------------------- */
/* Enter メッセージの表示　　　　　　　　　　　*/
/* ------------------------------------------- */
#E_text{
width:250px;/* 幅 */
height:50px;/* 高さ */
font-size:24px;/* フォントサイズ */
color:#ffffff;/* 文字色 */
text-align:center;/* 中央寄せ */
background-image:url();/* 背景画像 */
background-repeat:repeat;/* 繰り返しする */
}
#b_body{/* 全体背景 */
background-color:#000000;/* 背景色 */
}

例②　ブログホームに　Enter画像を表示する。

●　フリープラグインへ追記する。

●　ＣＳＳへ追記する。

/* ------------------------------------------- */
/* Enter 画像の表示　　　　　　　　　　　　　　*/
/* ------------------------------------------- */
#E_text{
width:248px;/* 幅 */
height:116px;/* 高さ */
font-size:24px;/* フォントサイズ */
color:#ffffff;/* 文字色 */
text-align:center;/* 中央寄せ */
background-image:url();/* 背景画像 */
background-repeat:repeat;/* 繰り返しする */
}
#b_body{/* 全体背景 */
background-color:#000000;/* 背景色 */
}

例③　ブログホームに　Enter画像とメッセージを表示する。
（メッセージをクリックしてもブログ表示されない）

●　フリープラグインへ追記する。

●　ＣＳＳへ追記する。

/* ------------------------------------------- */
/* Enter 画像の表示(メッセージつき)　　　　　　*/
/* ------------------------------------------- */
#E_text{
width:400px;/* 幅 */
height:200px;/* 高さ */
font-size:24px;/* フォントサイズ */
color:#ffffff;/* 文字色 */
text-align:center;/* 中央寄せ */
background-image:url();/* 背景画像 */
background-repeat:repeat;/* 繰り返しする */
}
#b_body{/* 全体背景 */
background-color:#000000;/* 背景色 */
}

例④　ブログホームに　Enter画像と動画を表示する。
（動画をクリックしてもブログ表示されない）

●　フリープラグインへ追記する。

●　ＣＳＳへ追記する。

/* ------------------------------------------- */
/* Enter 画像の表示(動画つき)　　　　　　　　　*/
/* ------------------------------------------- */
#E_text{
width:570px;/* 幅 */
height:480px;/* 高さ */
font-size:24px;/* フォントサイズ */
color:#ffffff;/* 文字色 */
text-align:center;/* 中央寄せ */
background-image:url();/* 背景画像 */
background-repeat:repeat;/* 繰り返しする */
}
#b_body{/* 全体背景 */
background-color:#000000;/* 背景色 */
}

例⑤　ブログホームに　規約メッセージを表示する。
　　　（いいえをクリックしたら、違うサイト（規約記事なども可）へ飛ばす)

●　フリープラグインへ追記する。

●　ＣＳＳへ追記する。

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

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

ブログのホームに入り口(Enter)画像やメッセージなどを配置