FC2ブログの歩き方ブログ

FC2ブログユーザを応援します。「バックアップとろうよキャンペーン」実施中。トラックバック大歓迎

Entries

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  • TB(-) |
  • CO(-) 
  • [Edit
  • [No Tag]

Enterページを作りたい

最近のWebデザインでは、Enterページ(エンターページ)というのはあまり好まれません。にもかかわらず一定の需要があるのは、アダルトサイトのような年齢認証を必要とするサイトや、特定のジャンルで見る人を限定したいサイトが、それを必要としているからなのですね。ここをこれから読もうとしている方は、そういう方々であろうと推定して、書き進めていきます。

何となくEnterページがあるほうがかっこいい、とか、「ようこそ!」なんて入れて最初に挨拶したい、なんて思っている方は、もう一度考え直してみてください。あんまり意味がないし、閲覧者に余計な1クリックをさせるという意味で、好まれないケースもあるためです。→末尾の参考リンクをご覧ください。

以下、2つの方法を示します。

最も簡単なEnterページの作り方

ブログに全体にパスワードをかけて、プライベートモードにしてください。(設定の仕方はこちら→FC2ブログ公式マニュアル:【ブログの設定】 アクセス制限 プライベートモード) メッセージ欄に、断り書きと閲覧パスワードを入れます。 プライベートモードは、本来閲覧パスワードを知っている者のみがログインできる仕組みですが、メッセージ部分に閲覧パスワードを入れることで「ログインできる意思のある者が選択して閲覧することのできる仕組み」になります。 この「プライベートモードの認証ページをEnterページとする」方法です。方法のメリット・メリットは以下のとおり。
簡単です
何の知識もなくても、管理画面でアクセス制限の設定さえできれば、確実に簡単にEnterページを作ることができます。
必ずEnterページを経由させることができます
ブログは、どのページからも見られることができます。検索エンジンや誰かのブログから直接記事がリンクされていた場合、訪問者は、トップページを経由することなく、直接そのページ(記事)を開きます。けれど、プライベートモードにした場合、必ずパスワード入力が面が表示されます。「私のブログを見る人には、必ずこのことだけは読んでほしい。」というものがある場合には、プライベートモードにしてメッセージを入れるのが一番です(ただしメッセージは全角100文字内となります。それ以上の場合には、読んでほしい記事のリンクを入れることでしょう。それを読むかどうかは閲覧者の判断になりますが)。
デザインがFC2ブログのものとなります
「デメリット」と明記するのは申し訳ないのですが、FC2ブログのユーザは、こだわりを持って自分のブログのデザインであるテンプレートを選択していることが多いと思われます。そこに、自分のブログの訪問者に一番最初に目に触れるページが、あの「とても特徴のある」FC2ブログの赤いタイトルのページデザインである、というのは、ちょっと……というのがあるかもしれません。
検索エンジンに個別ページはインデックスされません
認証しなければブログの中身が見られません。いくら閲覧パスワードが書いてあっても、サーチエンジンのロボットはログインしてくれませんので、クロール(記事を収集)することができません。したがって、Yahoo!JapanやGoogleなどの検索サイトにはトップページのみ掲載されることになります。

それじゃ厭、という場合は、「訪問者はEnterページを経ないこともある」ことを承知の上で、トップページをEnterページにカスタマイズする方法を取りましょう。


独自のEnterページを設置する

Enterページというのは、トップページに配置したいページですね。したがって、<!--index_area-->~<!--/index_area-->、<!--not_index_area-->~<!--/not_index_area-->というエリア(モード)変数を利用します。

エリア(モード)変数というのは、表示モードを切り分ける際に使います。ちなみに、このエリア(モード)変数、公式マニュアルではこのように記されています(テンプレートのカスタマイズの際には、公式マニュアルのテンプレート用変数一覧は必見です)。

変数意味
<!--index_area--> ~ <!--/index_area-->トップページ(インデックスページ、?mode 等のクエリが何も付かないURL)のみで表示されるブロック
<!--not_index_area--> ~ <!--/not_index_area-->トップページ(インデックスページ、?mode 等のクエリが何も付かないURL)以外で表示されるブロック
どの場所でも有効

つまり、トップページに表示したいものは、テンプレート上で<!--index_area-->~ <!--/index_area-->で囲み、表示したくないものは、<!--not_index_area-->~ <!--/not_index_area-->で囲む、これだけです。

ただ、「これだけ」と書きましたが、テンプレートのカスタマイズに慣れておられない方々は、テンプレートの「どこ」を囲んでいいのかが分からないと思います。

ここで、2つほど、公式テンプレートをサンプルに、実際のソースを提示してみますが、その前に、この方法のメリット・デメリットをおさらいしておきましょう。

ちょっと手間が必要です
テンプレートのHTMLを読んで、編集しなければなりません。
すべての訪問者にEnterページを読んでもらうことはできません
前述の通り、ブログは、どのページからも見られることができます。直接個別ページ(記事)を開くこともあります。すべての訪問者がEnterページを経由しているという思い込みは避けねばなりません。
デザインは独自のものを適用できます
ブログデザインのままにできますので、自分のブログの雰囲気を壊すことはありません。
検索エンジンにはそのままインデックスされます
Enterページもブログのページの1ページに過ぎませんので、検索エンジンはどのページもまんべんなくクロールします。検索サイトには個別記事も掲載されます。

「プライベートモードの認証ページをEnterページとする」方法とメリット・デメリットが正反対になっています。

公式テンプレートdefaultにEnterページを設置

htmlの該当部分に太字部分を追加。
  1. <%introduction></p>

  2.  </div>
  3.  
  4. <!--index_area-->
  5.  <div id="top">
  6.   <p id="topmsg">
  7.    (メッセージ文言。改行が必要な場合は<br />で改行)
  8.   </p>
  9.   <p id="enter">
  10.      <a href="<%url>page-0.html ">Enter</a>
  11.   </p>
  12.  </div>
  13. <!--/index_area-->
  14. <!--not_index_area-->
  15.  <div id="left" class="column">
  16. (中略)
  17.   <!--/plugin_second-->
  18.  <!--/plugin-->
  19. <!--/not_index_area-->
  20.  
  21.    <div id="footer">
スタイルシートに以下を追加。
  1. #top{
  2. width:400px;/*Enterブロックの幅はの数値は適宜*/
  3. margin-left:auto;/*中央寄せのためのタグ*/
  4. margin-right:auto;/*中央寄せのためのタグ*/
  5. border:10px #ffa500 ridge;/*枠はお好みで。枠の幅、色、スタイルを設定*/
  6. padding:2em;/*ブロックの内側の余白(枠とコンテンツの間の余白)*/
  7. }
  8. #enter{
  9. font-size:24px;
  10. }/*Enterの文字サイズ。変更の必要なければ#enterからここまで不要*/

このカスタマイズを施したdefaultのトップページは、こんな感じです。

deault_enter_
カスタマイズ後のトップページにアクセス

公式テンプレートchic_eleganceにEnterページを設置

htmlの該当部分に太字部分を追加。
  1. </div><!-- /header -->
  2. <!--index_area-->
  3.  <div id="top">
  4.   <p id="topmsg">
  5.    (メッセージ文言。改行が必要な場合は<br />で改行)
  6.   </p>
  7.   <p id="enter">
  8.      <a href="<%url>page-0.html ">Enter</a>
  9.   </p>
  10.  </div>
  11. <!--/index_area-->
  12. <!--not_index_area-->
  13. <div id="left" class="main">
  14. (中略)
  15. </div><!-- /right -->
  16. <!--/not_index_area-->
  17. <div id="footer"><!-- footer -->

こちらは右上に画像が配置されているため、スタイルシートにカスタマイズしなくても、デフォルト(初期設定)の左寄せでいい感じだと思いますが、いかがでしょう?

chic_elegant_enter_
カスタマイズ後のトップページにアクセス

「私のお気に入りテンプレート」でEnterページを作りたい

ここまで、2つの公式テンプレートでのカスタマイズを載せましたが、これを読んでくださっている方は、今お使いのお気に入りの公式あるいは共有テンプレートでのカスタマイズを望む方が大半と推察します。「今のテンプレートをカスタマイズする手がかりを得るには」についても書く機会を設けたいと思います。

参考リンク

スポンサーサイト

Comment[この記事へのコメント]

管理人のみ閲覧できます 

このコメントは管理人のみ閲覧できます
  •  
  •  
  • at 2009.09.04 19:50 
  • [編集]

管理人のみ閲覧できます 

このコメントは管理人のみ閲覧できます
  •  
  •  
  • at 2009.09.04 19:54 
  • [編集]

管理人のみ閲覧できます 

このコメントは管理人のみ閲覧できます
  •  
  •  
  • at 2010.04.12 06:48 
  • [編集]

Comment_form

管理者のみ表示。

Trackback[この記事へのトラックバック]

トラックバックURL
http://fc2blogwalker.blog21.fc2.com/tb.php/118-d235f6a5

-

管理人の承認後に表示されます
  • from  
  • at 2013.04.16 12:03

-

管理人の承認後に表示されます
  • from  
  • at 2012.08.19 18:05

-

管理人の承認後に表示されます
  • from  
  • at 2010.12.09 22:05

外部リンクから来た閲覧者には、メッセージを出す

 Enterページの話題つづき。sugar氏が「Enterページを作りたい」というとっても真っ当な回答記事を書いていらっしゃるのをほうほうと読みおえた...

Menu

from admin

万が一、記載に誤りのある場合や、追加情報がある場合など、該当記事のコメント欄でお知らせいただけるとありがたく存じます。

sugar

ブロとも申請フォーム

analyzer

カレンダー

08 | 2017/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

StyleChanger

public my share

ブログ内検索

Style Changer

この選択ツールについて up!

見本用記事一覧

アルキカタQ&A検索

アルキカタ版Q&Aの内容を検索します。




複数語は半角スペースで区切って検索してください

analyzer

analyzer

Profile

sugar & FC2blog beauties

Author:sugar & FC2blog beauties
「FC2ブログの歩き方」(アルキカタサイト)FC2ブログ出張所です。このブログは、アルキカタサイトの管理人であるsugarと、協力を申し出たサポータ複数で管理しています。

アルキカタサイト管理人:sugar

&FC2blog beauties(アルキカタサポータ)
 Chako
 cyaimi
 KAI

最近の記事

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