入口 > スポンサー広告 > スポンサーサイト お問合せ - お返事 > クッションページを設けたい件(簡易版)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

クッションページを設けたい件(簡易版)

2013/04/19 ver.4-2で同様の作業をする際の注意点を加筆しました。下線を引いている二箇所です。



◆nido様 

大変お待たせして申し訳ありませんでした。

>クッションページをサイトの初めに設けたいなと考えているのですが、これは可能でしょうか?
>またクッションページについてucd様の書かれた記事を読んでいると旧版?用とのことで、これはいまのバージョンでは当てはまらないのでしょうか・・・?

とのことで、以前返事として書かせていただいた記事は仰る通り旧版用かつ携帯版でも使える形式でという条件つきだったので、確かに色々と当てはまらないです。
今のバージョンでも幾つか方法は考えられますが、一番簡単にできるのはこちらで紹介されているやり方だと思います。スタイルシートのoverflowプロパティでスクロールの有無を制御し擬似的にエンターページを作るというもので、私も先日こちらの記事で初めて知り目からウロコでした。

うちのテンプレだとこんな感じになります。
具体的な手順は以下の通りです。
1.テンプレHTMLで下記のように、割と初めの方の該当箇所に赤字部分を、末尾近くに青字部分を挿入する(ピンク背景部分は適当に書き換えてください)
(太字にしているバージョン情報はお手元のものに合わせて書き換えてください)

<div id="container">
<!--not_edit_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area-->
<!--■入口前ワンクッション■-->
<div id="before_index">
<div class="enter">
これこれこういうサイトです ご注意ください<br />
OKな方は以下からどうぞ(とか適当に)<br /><br />

<a href="#index_area_1" title="ゆっくりしていってね!(とか適当に)">ENTER</a>
</div>
<div class="enter_footer">
<p class="fc2">Powered by <a href="http://blog.fc2.com/" title="FC2 BLOG">FC2 Blog</a></p>
<p class="template"><a class="cursor" title="*ver.3-2* (site_gitai_p)">Template</a> by <a href="http://ucdundo.blog.fc2.com/" title="UNDO">UNDO</a></p>
<div><%ad> <%ad2></div>
</div><!--/.enter_footer-->
</div><!--/#before_index-->
<!--■入口前ワンクッション終■-->
<div id="after_index">
<!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_date_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_edit_area-->

<!--検索窓-->
 ・
 ・
 (何百行とあります)
 ・
 ・
</div><!--/#footer-->
<!--not_edit_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area-->
</div><!--/#after_index■入口前ワンクッション用■-->
<!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_date_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_edit_area-->

</div><!--/#container-->
</body>
</html>



2.同じくHTMLを、「サイトト」でページ内検索し、ヒットする6箇所(ver.3-2の場合)の下記リンクタグに黄字部分を追加する
(ver.4-2の場合、「<%url>"」で検索しヒットする9箇所を同様に置換してください。その場合「サイトト&#12483;プへ」が「トップへ」になっている部分が3箇所あります)

<a href="<%url>#index_area_1" title="サイトト&#12483;プへ">



3.最後にスタイルシート末尾に下記を足す(ブルー背景部分で注意書き上部の余白を指定しています、お好きに変えてください)

/****** 入口前ワンクッション用 ******/
#index_body #container { height: 100%; max-width: 100%; }
#index_body { overflow: hidden ; }
#before_index { z-index: 100; width:100%; height:100%; }
.enter { padding-top: 20%; }
.enter_footer { position: absolute; bottom: 10px; right: 10px; font-size: 11px; text-align: right; }
#index_body #after_index { position: relative; overflow: auto; height: 100%; }




以上です。

このやり方はシンプルでわかりやすくてすごく画期的だと思うのですが、欠点を上げるなら、スタイルシートを切られると普通に中身が丸見えになってしまうことと、メニュー画面に移動してから画面を縮小表示するとクッション画面も出てきてしまってタネがばれる、といったあたりでしょうか。とにかくスタイルシート依存の方法なのでそこをいじられると弱いです。
あと、小さいことですがうちの現行のテンプレだと入口ページのみ検索窓とフッターが右端ぎりぎりに寄るかたちになり、環境によっては中のページと少しずれが生じます。(どのページも右端でいいよ! ついでにパンくずリストも左端でいいよ! という場合はスタイルシートを「1280px」で検索して「max-width: 1280px; 」を削除してしまってください。←次のテンプレ更新時に変更予定です)

また、かなり手順は増えますが&入口新着情報にカテゴリが併記できなくなりますが、全くの別ページを作る方法もありますので、必要な場合は仰ってください。その際、コメント機能とタグ検索機能(うちでプラグイン画面に使っているページです)どちらかを犠牲にする必要があります。できればどちらが良いかも併せてお知らせください。

以上です。うまくいくといいのですが。宜しくお願い致します。
2012-11-20
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。