＜pスライダー説明書＞

pスライダーは、
ブログ上にゲームを展開するための
ベースになるブログスライダーです。

ゲームには高い集客性があります。
ブログには広告との親和性があります。
そこで、ブログ上に
ゲームを展開しようと思って
作ったのが、このウェブアプリです。

開発者は、
この環境に合わせてアプリを作るだけで、
面倒な広告の管理が簡単にできるようになります。


＜利用規約＞

スポンサー広告が入るので、
アダルトサイトや法令違反、モラルが
欠如しているサイトではご利用いただけません。
また、JavaScriptの編集、
スポンサー広告を非表示にする
CSSの編集は禁止とさせていただきます。


17／6／25　Yahoo APIの仕様変更に対応しました。
xdomainajax.jsは、http://blog-imgs-93.fc2.com/y/a/m/yamadathunders/jquery_xdomainajax.jsを直接参照してください。


<!-- テンプレートのhead内でスクリプトを読みこみます。 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-93.fc2.com/y/a/m/yamadathunders/jquery_xdomainajax.js" charset="utf-8"></script>
<script type="text/javascript" src="http://blog-imgs-91.fc2.com/y/a/m/yamadathunders/ymd_exps161122_24.js" charset="utf-8" async="true" defer="true"></script>


<!-- プラグインや記事の先頭などに再生ボタンを1つだけ置きます。 -->
<div id="id_psplay" class="ss_psplay" style="margin-bottom: 10px;">pスライダー</div>


<!-- テンプレートかプラグインに設定タグを書きこみます。（表示されません。） -->

<!-- スポンサー広告を指定します。（なくても構いません。） -->
<div id="id_plgsponsoradv" style="display: none;">
	<!--スポンサー広告（ブログクエスト）--><div class="ss_pssponsoradv"><div><a href="http://yamadathunders.blog.fc2.com/" title="山田の四則演算でわかるポイントサイト検証ブログ" target="_blank"><img src="http://blog-imgs-91.fc2.com/y/a/m/yamadathunders/ymd_psbanner161208b.png" alt="pスライダーバナーb" /></a></div></div>
	<!--permanent_area--><!--スポンサー広告（トイカジノ2）--><div class="ss_pssponsoradv"><div><a href="http://yamadathunders.blog.fc2.com/" title="山田の四則演算でわかるポイントサイト検証ブログ" target="_blank"><img src="http://blog-imgs-91.fc2.com/y/a/m/yamadathunders/ymd_psbanner161208c.png" alt="pスライダーバナーc" /></a></div></div><!--/permanent_area-->
</div>

<!-- プラグインを追加します。（なくても構いません。） -->
<div id="id_psplugin" style="display: none;">
	<!-- プラグインソースコード --><div class="ss_pssponsoradv">プラグイン</div>
</div>

<!-- ブログのメインカラムのIDを指定します。 --><div id="id_psconstmc" style="display: none;">main_contents</div>
<!-- ブログの記事クラスを指定します。 --><div id="id_psconsteb" style="display: none;">entry_body</div>
<!-- CSSクラスを指定しておいて、そのクラスがブログ本文中に現れると、2回に1回直後にインナー広告が入ります。 --><div id="id_psconstbl" style="display: none;">blue</div>

<!-- 背景を指定します。（なくても構いません。） -->
<!-- ブログ全体の背景画像を指定します。（テンプレートかプラグインで指定します。） --><div id="id_psbgimage" style="display: none;">http://blog-imgs-80.fc2.com/y/a/m/yamadathunders/HIRO96_ukabukamo.jpg</div>
<!-- システムサウンドを指定します。 --><div id="id_pssyssound" style="display: none;">http://blog-imgs-91.fc2.com/y/a/m/yamadathunders/page1.mp3</div>

<!-- 広告を指定します。（◆で区切って複数指定もできます。なくても構いません。） -->
<!-- アウター広告のIDを指定します。 --><div id="id_psouteradv" style="display: none;">ymd_slider_004◆ymd_slider_005◆ymd_slider_006◆ymd_slider_007◆ymd_slider_008◆ymd_slider_009◆ymd_slider_010◆ymd_slider_016◆ymd_slider_011◆ymd_slider_012◆ymd_slider_013</div>
<!-- ジョイント広告のIDを指定します。 --><div id="id_psjointadv" style="display: none;">ymd_adv_nam</div>
<!-- インナー広告のIDを指定します。 --><div id="id_psinneradv" style="display: none;">ymd_contentsmatch_1</div>

<!-- PCページを識別させるタグです。 --><div id="id_ymdpcdisplay" style="display: none;">PC表示</div>
<!--not_permanent_area--><!-- PC一覧ページを識別させるタグです。 --><div id="id_ymdnotpermarea" style="display: none;">一覧ページ</div><!--/not_permanent_area-->
<!--permanent_area--><!-- PC個別ページを識別させるタグです。 --><div id="id_ymdpermarea" style="display: none;">個別ページ</div><!--/permanent_area-->


<!-- ブログの追記に設定タグを書きこみます。（表示されません。） -->

<!-- 個別ページのスポンサー広告を指定します。（なくても構いません。） -->
<div id="id_etrsponsoradv" style="display: none;"><!--スポンサー広告（個別［123］）--><div class="ss_pssponsoradv" style="border: 1px solid #b5b5b6;"><div style="padding: 10px;">スポンサー広告<br />（個別［123］）</div></div></div>

<!-- 背景を指定します。（なくても構いません。） -->
<!-- 個別ページの背景画像を指定します。（ブログ全体の指定より優先されます。） --><div id="id_psetrbgimage" style="display: none;">http://blog-imgs-91.fc2.com/y/a/m/yamadathunders/20140721-P7210083de.jpg</div>

＜アップデート28＞

ディスプレイに表示される内容を括っているタグか、その親タグにtitle属性がある場合、タイトルとして表示するようにしました。
どちらにもtitle属性がある場合は、ディスプレイに表示される内容自体を括っているタグ側のtitleが優先されます。



/* 
 * pスライダーとプラグインの連携
 *
 * ymd_psplugin1(int_continue)
 * 再生前のタイミングで実行されます。
 *
 * ymd_psplugin2(int_continue)
 * 内容がセットされた直後に実行されます。
 *
 * ymd_psplugin3(int_continue)
 * 再生後のタイミングで実行されます。
 *
 * int_continueには状態（再生開始［2］、自動再生［1］、1回再生［0］）が入ります。
 * これらの関数はなくても構いません。
 *
 */



/* 
 * CSS
 */

/* =================================================
	p Slider
================================================= */

/*
 * 再生ボタンの設定
 */
.ss_psplay{
	background-color: #efefef;
	padding: 8px;
	font-family: "メイリオ", Meiryo, Verdana, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", sans-serif;
	text-align: center;
	border: 1px #b5b5b6 solid;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
}

/*
 * 再生ボタンの設定
 * FC2ブログのbasic_whiteに合わせて書いています。
 * お使いのテンプレートに合わせて書きかえてください。
 */
.entry_body .ss_psplay a, 
div#notice_fix .ss_psplay a{
	color: #606060;
	font-weight: bold;
	text-decoration: none;
	display: block;
}

/*
 * 再生ボタンの設定
 * FC2ブログのbasic_whiteに合わせて書いています。
 * お使いのテンプレートに合わせて書きかえてください。
 */
.plg_body .ss_psplay a:hover, 
.plg_body .ss_psplay a:focus{
	text-decoration: none;
}

/*
 * オーバレイ背景の設定
 */
div#id_psbackground{
	position: fixed;
	top: 0;
	left: 0;
	background-image: url("http://blog-imgs-88.fc2.com/m/i/l/milldoll/ymd_white_160122a.png");
	width: 100%;
	height: 100%;
	z-index: 1000;
}

/*
 * ディスプレイの設定
 */
div#id_psinner{
	position: absolute;
	top: 64px;
	right: 64px;
	bottom: 64px;
	left: 64px;
	background-color: #ffffff;
	border: 1px #b5b5b6 solid;
	overflow: hidden;
}

/*
 * メニューの設定
 */
div#id_psmenuouter{
	padding: 16px;
	text-align: right;
	border-bottom: 1px #b5b5b6 solid;
}

/*
 * メニューの設定
 */
div#id_psexmenu, 
div#id_psmenu, 
.ss_psmenu{
	display: inline-block;
}

/*
 * メニュー内のアイコンの設定
 */
div#id_psexmenu img{
	max-height: 12px;
	width: auto;
}

/*
 * タイトルの設定
 */
.ss_psheader{
	background-color: #efefef;
	margin: 0 -16px 16px -16px;
	padding: 10px 16px;
	font-size: 12pt;
	color: #606060;
}

/*
 * スライダーの設定
 */
div#id_psinnerbody{
	height: 80%;
	padding: 16px;
	text-align: left;
	overflow-y: scroll;
}

/*
 * スライダー内のimgの設定
 */
div#id_psinnerbody img{
	max-width: 100%;
	width: auto;
	max-height: 100%;
	height: auto;
}

/* 
 * ss_psbody_aはクラスがない時、
 * ss_psbody_bはクラスがある時の補助設定
 */
.ss_psbody_a{
	background-color: #ffffff;
	padding: 5px 8px;
	border: 1px #b5b5b6 solid;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
}

/*
 * スポンサー広告スペースの設定
 * Chrome
 * right: 18px;
 * Edge
 * right: 12px;
 */
div#id_psspsadvouter{
	position: absolute;
	right: 18px;
	background-color: #303030;
	padding: 5px;
	overflow-y: hidden;
	z-index: 2;
}

div#id_psspsadvouter:hover{
	right: 0;
	left: 0;
	background-color: #303030;
	height: 80%;
	padding: 16px;
	overflow-y: scroll;
}

div#id_psspsadvheader{
	color: #909090;
	font-size: 8pt;
	text-align: center;
}

div#id_psspsadvouter:hover div#id_psspsadvheader{
	margin-bottom: 16px;
}

div#id_pssponsoradv{
	display: none;
}

div#id_psspsadvouter:hover div#id_pssponsoradv{
	text-align: left;
	display: block;
}

/*
 * フェードインの設定
 */
.ss_psprefade{
	opacity: 0;
}

/*
 * フェードインの設定
 */
.ss_psfadein{
	opacity: 1;
	transition: 2s ease-in-out;
	-moz-transition: 2s ease-in-out; 
	-webkit-transition: 2s ease-in-out; 
	-o-transition: 2s ease-in-out; 
	-ms-transition: 2s ease-in-out; 
}

/*
 * サウンドタグの設定
 */
.ss_pssound1, 
.ss_pssound2, 
.ss_pssound3{
	display: none;
}

/*
 * スポンサー広告の設定
 */
.ss_pssponsoradv{
	width: 150px;
	height: 180px;
	margin-right: 10px;
	margin-bottom: 10px;
/*	border: 1px #b5b5b6 solid; */
	overflow: hidden;
	display: inline-block;
}

/*
 * スポンサー広告のimgの設定
 */
.ss_pssponsoradv img{
	max-width: 100%;
	height: auto;
}