ブログのホームに入り口(Enter)画像を配置② | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

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


★ ブログのホームに入り口(Enter)画像を配置します。
但し、1日1回など表示する間隔を指定できます。
(あなたの読者などが、あなたのブログのEnter画像を見てから1日の意味)



★ 最新版(最新バージョン)は下記記事です。


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

http://ameblo.jp/new-blue-777/entry-11339765133.html









★ クッキーを使っていますので、クッキーについては、最後の
  クッキーについてを参照してください。


 ● ブログのホームにEnter画像を設置し、Enter がクリックされたら ブログを表示します。
   表示する間隔は、日で指定可能です。
   


◆ 使用する画像(例)

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



◆ 画面推移


 ① ブログのホームページの場合、Enter画像が表示されます



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



● 注意点

・ ホーム以外のページは、Enter画面は表示されません。
・ クッキーを利用して、Enter画面が表示されてから、次にEnter画面が表示させる
  ため、の日を指定することができます。






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


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



② フリープラグインへ追記(赤字部分は調整してください)


<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>
<script type="text/javascript">
var AMEBA_ID="アメーバID"; // アメーバID
var back_color="#333333"; // 背景色
var E_img="http://stat001.ameba.jp/user_images/20110507/04/new-bulue9/d5/8c/p/o0248011611211956999.png"; // Enter画像
var E_img_w=248; // Enter 画像の横幅
var E_img_h=116; // Enter 画像の縦幅
var Bar_disp="YES"; // アメーババーを消していれば、 "NO"
var fOut_time=3000; // ブログが表示される時間(ミリ秒)3000 は3秒
var kikan=1; // クッキー保持日数(有効期限)
window.onload = function(){Enter_disp_new2();}
</script>


● 設定の説明

アメーバID・・・自分のアメーバIDを設定します
背景色・・・全体の背景色を設定します。transparent にすれば透明になります。
Enter画像・・・Enter画像のURLを指定します。
Enter 画像の横幅と縦幅・・・Enter 画像の横幅と縦幅を指定します(px)。
クッキー保持日数(有効期限)・・・表示する間隔日数を指定します。


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




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

例:

body{
background-image:url(画像のURL);
background-repeat:repeat;
}




★ クッキーについて

① クッキーは、あなたのブログを開いた人のPCに送信します。
② クッキーは、下記の様にブラウザ単位でPCに保存されます
  下記は FireFoxの例


リアナのカスタマイズ日記(CSS編集用デザイン)

③ クッキー名は下記になります

Entk2_あなたのアメーバID

④ 上記スクリプトでは有効期限を1日にしています。
  2日、3日などと指定も可能です。
  有効期限が切れれば自動的に送信されたクッキーは消えます。


④ IEの場合は、下記のファイルの中にクッキー情報が作成されます。

Cookie:v@ameblo.jp/

インターネットオプション→全般→閲覧の履歴の設定→
インターネット一時ファイルと履歴の設定のファイルの表示
ファイルフォルダを開いたら、フォルダの名前をクリックすれば、
名前で昇順で並びます



★ 日付を指定しない方法は前の記事です(下記を参照)

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




★ 指定した有効期限を変更する場合は、注意が必要です。

例:
有効期限を3日から1日に変えた場合、クッキーの有効期限は3日のため、
1日にしてもすぐには反映されません。
(当スクリプトでは、このケースについて対応していません)