このカテゴリは 横ならび目次サンプル(2) で表示させ、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
このカテゴリの記事ページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
 

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←novel-I2-Witch-Jf 素材屋風ハロウィンテンプレート →エンターページテンプレート 名も知らぬご発案者さまへ御礼
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit
   
 

「テンプレートマニュアル」
裏技カスタマイズ

Enterページ(扉・クッションページ)をつくる その2

 画像のないテンプレートで記事をご覧になる場合は
 Temlplate Image : カスタマイズの難易度3 
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←novel-I2-Witch-Jf 素材屋風ハロウィンテンプレート →エンターページテンプレート 名も知らぬご発案者さまへ御礼
 
カスタマイズの難易度3 カスタマイズの難易度3

エンターページとは、同人サイトや年齢制限サイトなどでよく見かける、入室の意思確認のためのページのこと。クッションページ扉ページとも呼ばれています。

13503617523LEZTfaJ5dJxtTL_1350361752.gif

以前StyleKeeperを使ったエンターページの記事をアップして以来、毎日必ず何人かはエンターページ・クッションページのキーワードで検索からいらっしゃいます。

どうやら管理人が考えていた以上にエンターページの需要は高い様ですが、ブログにエンターページをつける場合、通常はブログのトップ(表紙)ページ(インデックスエリア<!--index_area-- >~<!--/index-->で囲まれた部分)をそれに当てなければなりません。しかし、以前も述べましたが、ブログのトップ(表紙)ページはFC2ブログのページ構成の中で唯一自由なレイアウトと記述が許される部分であり、拙作テンプレにとっては全ての情報を集約させたそれこそ心臓部ともいえる最も重要なページになります。その貴重なページを単なる入口、入室の意思確認の通過点だけにすることはできません。

そこで今回ご紹介するのは、表紙ページの代わりにエンターページを表示させる従来の方法ではなく、またその1でご紹介したStyleKeeperで別テンプレートをプレビューさせる方法でもなく、インデックスエリア<!--index_area-- >~<!--/index-->内にエンター画面と通常の表紙画面の両方を組み込んで別々に表示させるカスタマイズになります。

お知らせエンターページ実装済みで、簡単な検索避けを施した「novel-C-Enter 同人サイト様向きエンターページ付き小説テンプレート」も共有テンプレートとして公開しています。


こういうエンターページになります
s2_EnterA.jpg
Enterをクリックすると通常の表紙が表示されますが


s_Enter2.jpg

別ページが開いたのではなく、ただ単にアンカーを置いた位置(表紙画面pagetop)までページ内移動させています。
実はこのエンターページ、通常の表紙の上に画面の高さの分だけ、帽子のようにエンター画面をポンと置いてあります。
s2_bosi.jpg

しかし、エンター画面にスクロールは表示されないので、Enterをクリックしないと通常の表紙画面へは移動できません。また表紙画面をスクロールしても通常であれば、エンター画面へはもどれないので、ちょっと見ただけだと全く別ページへ移動したように見えます。
とは言え、表紙画面に移動してから画面サイズを変更させと、表紙の上にエンター画面の下部が現れてしまうのが玉に傷……(^^ゞ

但し、前にも述べましたが、この様なエンターページは訪問者にとっては検問所のようなもので、決して歓迎されるものではありません。サイトの性質上必用であろう、同人系・二次創作系サイト様など以外は、正直オススメできない代物ですので、導入を検討なさる場合はその点もご一考ください。詳しくはコチラ


注意以下のカスタマイズをお試しになる場合は、必ず拙作テンプレのver1210以降のバージョンのテンプレートをご利用ください。ver1210以前のバージョンのテンプレートではレイアウトが崩れたり、スクロールに不具合が起きます。

カスタマイズの方法


[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く


PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集         こんふうに上から順番に並んでいます。


HTMLのカスタマイズ 全タイプ共通


HTML編集]部分をカスタマイズします。

<head>
~中略~
</head>

<body <!--index_area-->onload="hidethem()"<!--/index_area--> id="~中略~">
///////////ここにソースを貼る//////////////


ボディタグの直下、上の赤字の部分に以下のエンターページのソースを追加します。
2013.2.25.エンターページのソースを改定しました。
フルスクリーン表示のソースがある場合もそれより上、とにかくこのエンターページのソースは必ずボディタグの直下に貼ります。

上は黒背景白文字になりますが、背景色を変更する場合はbackground-colorの、文字色を変更する場合はcolorの色コード(ピンク色の部分)を変更します。
ブログタイトルの下にはブログの説明文が表示されますが、これを注意書などに変更する場合は赤色の部分<%introduction>を削除して差し替えます。Enterをバナーや画像に変更する場合は青色の部分を画像タグに差し替えます。

<!--//////////Enterページココから//////////-->

<!--index_area-->
<!--▼ここより変更不可-->
<div style="position:relative;z-index:100;width:100%;height:100%;background-color:#000;color:#fff;text-align:center;margin:0;padding:0;">
<div style="margin:0 auto;padding:0;height:80%;overflow:hidden;">
<!--▲ここまで変更不可-->

<div style="margin:0 auto;padding:50px 0;font-size:xx-large;"><%blog_name></div>
<div style="max-width:600px;_width:600px;margin:40px;margin:0 auto;" />
<!-- ブログの説明 --><%introduction><!-- ブログの説明 -->
<br /><br />「Enterをクリックしてお入りください」<br /><br /></div>
<a href="#pagetop" rel="nofollow"><span style="font-size:xx-large;">Enter</span></a>


<!--▼ここより変更不可-->
</div><div style="min-height:10%;">Template by <a href="http://noveltemplate.blog26.fc2.com/" target="_blank">Novel テンプレート</a>  <%ad> <%ad2><br /></div></div>
<!--▲ここまで変更不可-->
<!--/index_area-->

<!--//////////Enterページココまで//////////-->



注目 2013.2.26.タグをテーブルからブロックに変更し、高さ指定を追加しました。
 追加したエンター画像や画面サイズに左右されることなくフッター部の表示域(広告や著作権表示)を確保するために、変更不可の個所は背景色・文字色以外の追加変更禁止です


これでエンターページを装着する事ができましたが、このままでは、他ページからHOMEへ戻る度に、Enterページが表示され、その度にEnterをクリックしなければ表紙ページを見ることができません。それはあまりに鬱陶しいので、他ページからHOMEへ戻る時にはEnterページを飛び越してダイレクトに表紙ページの上に着地するようにHOMEへのリンクタグにアンカーを追加します。

テンプレートのHTMLをメモ帳へコピペします。

カーソルをHTML編集のテキストエリアにもってゆき、
右クリック ⇒ 【すべて選択】をクリック 
反転したらもう一度
 右クリック ⇒ 【コピー】をクリック

そのままカーソルをさっき開いたメモ帳の上に持ってゆき、
右クリック ⇒ 【貼り付け】をクリック

メモ帳に、テンプレートのHTMLが丸ごとコピペされたと思います。ここからはメモ帳の上での作業になります。

メモ帳の置き換え機能をつかって文字列を変換します。

メモ帳のツールバーの、
編集】⇒【置き換え】をクリック

細長く小さな別窓が開かれます。
 その窓の【検索する文字列】の欄に href="<%url>"  
【置き換えする文字列】に href="<%url>#pagetop" と入れて
すべて置き換え】をクリック


置き換えが終わったら、
 右クリック ⇒ 【すべて選択】をクリック 
反転したら
もう一度 右クリック ⇒ 【コピー】をクリック

ブログ画面にもどって、さきほどのHTMLの編集テキスト部分に、カーソルを持ってゆき、
右クリック ⇒【すべて選択】をクリック 
反転したら
もう一度右クリック ⇒ 【貼り付け】をクリック


これでHOMEへのリンク先アドレスにアンカーが追加されました。HOMEをクリックしても、Enterページを飛び越してダイレクトに表紙ページが表示されるはずです。

スタイルシートのカスタマイズ


エンターページ画面ではスクロールが表示されず、表紙画面でのみスクロールが表示さるように指定します
スタイルシート編集]部分をカスタマイズします。

以下のコードをスタイルシートに追加します。

novel-PF・PF2タイプの場合

#index {overflow : hidden ;}
#index .main_frm{height:100%; overflow:auto;}


novel-J・Jfタイプ・novel-G・Gfタイプの場合
novel-J・Jfタイプ・novel-G・Gfタイプの場合はスタイルシートのカスタマイズが不要な場合があります。HTMLのカスタマイズを終えた時点で、【プレビュー】をクリックし、その時、エンターページ画面にスクロールが表示されていない場合はそのままでOK、カスタマイズは不要です。スクロールが表示される場合は以下を追加。

#index {overflow : hidden ;}
#index .all{ height:100%; overflow:auto;}


上以外のタイプのテンプレートの場合

#index {overflow : hidden ;}
#index .main{ height:100%; overflow:auto;}



更新 】 をクリック
関連記事
スポンサーサイト
Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
携帯用Novelテンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
表紙ページ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
Novel List 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
目次ページ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
小説本文(個別記事)ページ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
イラストリスト 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
その他・共通ページ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
携帯用テンプレートのカスタマイズ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
テンプレート別のカスタマイズ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
サイト内配布テンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
テンプレートの衣替え 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
裏技カスタマイズ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-tempタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-Sタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-Rタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-Gタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-Jタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-Cタイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
素材屋風テンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
疑似フレームテンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
novel-PF2タイプ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
夢小説用テンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
イラストリスト付きテンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
携帯用テンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
一般ブログ用テンプレート 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
不具合の修正 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
その他お知らせなど 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
管理人のおススメ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
雪の女王 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
銀河鉄道の夜 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
坊っちゃん 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
幸福の王子(夢小説サンプル)  3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png Enterページ(扉・クッションページ)をつくる その2
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit ▽TB[0]▽CO[0]
関連カスタマイズ記事一覧 カスタマイズの難易度3 
   

~ Comment ~

カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←novel-I2-Witch-Jf 素材屋風ハロウィンテンプレート    →エンターページテンプレート 名も知らぬご発案者さまへ御礼

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。