FC2ブログのトップページだけ別の表示にする方法
FC2ブログのカスタマイズ（11）
FC2ブログをやっていると、トップページに常に表示される「ご案内」のようなページを設けたい場合などがあるはずです。
あるいは「ご挨拶」とか・・・どちらかと言うと「ホームページ」と呼ばれる形式に近い構成ですね。
そこで今回は、そのトップページだけ別の表示をするカスタマイズ方法をご紹介いたします。
「トップページだけ別の表示にする」とは？
「FC2ブログのトップページだけ別の表示にするカスタマイズ方法」なんて言われても、すぐにピーンとくる人ばかりではないはずです。
まず、どういうことなのか？お話いたします。
1：「トップページだけ別の表示にする」とは？
（01）
例えば、次のようなブログがあるとします。
一般的なブログの形式（テンプレート）であれば、ブログのトップページを表示すると、各記事が並んで表示されるはずです。
対して、FC2ブログのテンプレートをカスタマイズして「トップページだけ別の表示」にすれば、トップページだけ記事を非表示にして、好きなことを書いておくことができます。
「<!--index_area-->」というFC2変数タグを使用することによって、トップページだけ別な表示をさせることが可能です。
「トップページだけ別の表示」を入れて、各記事も表示するということもできます。
2：分かりやすくするために試してみる
（02）
さらによく理解できるように、実際に試してみましょう。
今回は、テンプレート「alice」を使います。共有テンプレート追加からダウンロードして、適用してください。
3：<body>タグを眺める
（03）
ところで、<body>タグは、ご存知かしら？
簡単に言えば、<body>～</body>で囲まれている内容を、ブラウザの表示領域に、表示するHTMLタグです。
よく分からない場合は、記事「HTML入門 はじめました」をご覧ください。
（04）
テンプレート「alice」のHTMLコードの中から、<body>タグを探してみてください。おそらく、次のように記述されている箇所があるはずです。
4：<!--index_area-->の設定
（05）
これを、次のようにしてみてください。
既存の<body>タグで囲まれていたすべてを<!--not_index_area-->～<!--/not_index_area-->で囲み、<!--index_area-->～<!--/index_area-->内に好きなことを書いています。
5：表示確認
（06）
ブラウザで表示してみましょう。トップページを表示すると、次のようにすっからかんになるはずです。
さらに、「入り口」をクリックしてみてください。
（07）
ページ1（記事1）が表示されます。このような極端な使い方もできるわけです。いかがでしょう？イメージできたかしら？
ただ、トップページをすっからかんにすると、何もないブログと勘違いされる可能性があるため、検索エンジンからあまり好まれません。
また、閲覧者は、無駄に1回多くクリックしなければいけないので、ユーザビリティが悪いとも言えます。
特別な理由がない限りは、あまりこのようなスタイルにしない方が良いと思います。
FC2ブログのトップページだけ別の表示にする方法
それでは本編です。今度は、ヘッダやサイドは常時表示した状態で、記事の領域だけが違う形にしてみます。
1：テンプレート「alice」
（01）
テンプレート「alice」を使います。適用した状態にない場合は、試しに共有テンプレート追加からダウンロードして、適用してみてください。
2：<!--index_area-->の設定
（02）
はじめに、HTMLコードを眺めて、記事関連の領域（記事＋コメント＋コメント編集＋トランクバック）を把握します。
テンプレート「alice」の場合は、次の箇所です。
（03）
前述（02）の領域を、<!--not_index_area-->～<!--/not_index_area-->で囲みます。トップページでは、表示しない領域の設定です。
（04）
次に、<!--index_area-->～<!--/index_area-->を追加します。トップページで表示される領域の設定です。
ひとまず赤文字で「トップページ」とだけ表示されるようにしておきます。
（05）
確認のために、トップページを表示してみましょう。記述に誤りがなければ、赤文字で「トップページ」と表示されるはずです。
カテゴリなどのリンクをクリックすると、ちゃんとカテゴリが表示されるはずです。表示におかしなところがないか、確認してみてください。
3：トップページ部分の作成
（06）
表示に問題ないようであれば、お話を先に進めます。次は、トップページを作成しましょう。
トップページは、お好きなように作成していただいて構いません。ここでは、記事ページの背景画像をそのまま流用します。
記事ページで使っている背景画像が適用しているCSSなどを調べたいときは、次のような手順で行います。
- 右クリックで「背景画像を表示」します。
- 画像ファイル名が分かるので、CSSファイルの中からid名、もしくはclass名が特定できます。
- HTMLファイルの中から、id名、もしくはclass名によって、<div>タグを特定します。
すでに同じようなことを何度か書いているので、詳細は割愛いたします。
（07）
トップページを表示してみましょう。トップページだけに表示する領域が、きれいに作成できているはずです。
例えば、「<!--index_area-->」を使うことで、次のようなことができます。
- 一般的なホームページのような形式で、目次を作成しておくことができます。
- 利用規約など、来訪時にまず読んで欲しい文書を作成しておくことができます。
- 「お知らせ」、「トピックス」などトップページだけに表示したいものを作成しておくことができます。
次回予告
次回は、以前ご要望をいただいたままになっているので、久しぶりにGIMP関係のことを書く予定です。
これからは、単発でイロイロなことを取り上げていこうと思っています。今後も、ご愛顧くださいますよう宜しくお願い申し上げます。カブトムシ。
関連記事
カスタマイズに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門、CSS入門
3：FC2ブログのカスタマイズ
作成日：2008/06/08 更新日：2010/01/30
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。
トップページだけ別の表示をする!
携帯対応
考えてみると、リアルタイムで見る人なんて、
私くらいのものかもしれませんね。作業のついでとは言え。
それにしても、あんな深い時間にやらなくても良さそうなものですが、
んー人気ないのかしら。
ヨン様は、相変わらずの人気みたいですけどね。
テンプレートうまいこと行ったみたいで何よりです。
サイトの完成を楽しみにしています。(・∀・)/
ん、あ、そう言えば、先日ひろこさんとお話ししたときに、
居酒屋とかなら、
「携帯サイトとしても考えないといけないんじゃないかしら」
とか何とか。
少なくとも、場所地図、電子クーポン券などに使えるので、
携帯でも見られるようなコードにしておいた方が良いよねと。
その辺も考慮した作りにしていらっしゃるのかしら？
よく知らないのですが、
使えないコードとかあるんですよね？
index_area
コメントありがとうございます。
index_areaは、使い勝手の良い変数ですね。
ブログっぽさが、無くなって可能性が広がります。
携帯サイト！
携帯サイトいいですね～＾＾
田舎の方は意外と携帯の方がアクセス多いかもです！
けど、私も携帯サイトはコードとかよくわかりません。
でもでも、今回ちょっと挑戦してみますね＾＾
クーポン券ですか！参考になります！
アドバイスありがとうございます！！！
ケータイを携帯する
コメントありが闘莉王！
はい。うちのド田舎でも、
PCより、携帯でネットを利用する人のほうが多いです。
携帯サイトまで作れるなんてことになると、
さらに忙しくなってしまいますねぇ。
楽しみにしています。(oﾟωﾟo)
おはようございます
トップページだけ別の表示、おもしろいですね。
個人サイトさんでも、入り口ページを設けられているのを見かけますね。
<!--index_area-->って、fc2の変数ですよね。
こんなのがあったんだー
うーん、ずっとテンプレ使っていて特に大きなカスタマイズとかしないから
全然変数把握してないや。
ちょっと今度やってみようかなあ
MTの方の練習になったりして！
トップページだけ「しっぽ立ってまうやん」
そうです。トップページだけ「しっぽ立ってまうやん」とか、
いろいろなことが出来ます。
MTにも同じ役割の変数があるのでしょうねー。
概念さえ理解できれば、あとはどんなんでも同じやさかい。
いっぺんやっといたら、もうイケイケぎゃるですわ。
イケイケ
イケイケギャルとかぴちぴちギャルとか、なんか亀仙人の爺さん思い出した。
MTにもきっと同じのありますよねー。
変数って概念自体、とてもなれない部分があるので
FC2のほうでいろいろやってみるのもいいかなあ。
こういう時、がっちり画像で固めてるデザインだと、
画像作り直しとかになるんですよね。
のびても平気なデザインにしてみたいです。
ぱふぱふ
亀仙人こと、KumaCrowです。
慣れている方でやってみたらいいんじゃないかしら。
あるいは、分かり良い方と申しましょうか。
ひろこさんは、dfFlexiGridとか好きそうですね。
画像が好きです
画像使ってるのが好きなのでこっちでいこうかなと思います。
伸びても平気な画像使用のサイトだという事ないんですけど
むずかしそうです。
ところで、dfFlexiGrid、見てきました。
http://www.cssmake.com/2008/04/dfflexigridjs.html
（dfFlexiGrid.jsでユーザビリティの優れたリキットデザインのサイトを表現してみる。 CSSMAKER様）
こちらみてきたねん。
あ、あれは何ですか、すごい！
リアルでΩ ΩΩ< な、なんだってー!!ってなった。
あれは先日お話されてたFlexですよね？
でも、上のやつはjavascriptで扱われてる？
もしそうだったら、今の自分でもあのページみたいなのが作れそう。
またおもしろいこと教えて下さってありがとうございます！
チヂミ食いたし
変数の分かり難いところ、つかみ難いところって、
どの辺なのかしら？やっぱし、条件で分岐するあたりかしら。
慣れるまで時間がかかるよねー。
画像の伸び縮みって、記事内の画像もやるとなると、
けっこう手間な感じがします。
画像すべてにwidth、height入れるのは、大変だなぁ。
この辺は、支援ソフトがないと厳すぃ。
dfFlexiGrid.jsやりよるよね。
技術的には、CSS＋JavaScriptみたいですね。
先日のお話しのFlexは・・・使っていないんじゃなかしら。
（たぶん）
フレキシブルってことで、Flexiとしたのかと。
サイドのメニューを消しているのって、
どうやっているんかね？？？
display:none;とかで消しているのかな。
導入は、JavaScriptをダウンロードして利用するだけだから、
それほど難しくなさそうです。
No title
最近ブログを始めました。パソコン不得意で？？だらけです。
とっても勉強になりました！
ありがとうございます。
また、じっくり読んでお勉強します。
私もラブサイケデリコ好きです♪
節約
何やら少しはお役に立てたようで、幸いでございます。
節約大切ですよね！(・∀・)/
エコにもなるし。
おぉう、LOVE PSYCHEDELICO仲間（ゆきえ）発見！
はじめまして
ほのぼのとしたデザインで優しい色使いですね。しかもかなり細かくわかりやすくまとめられているので参考になりました。
ひとつご質問なのですが、カテゴリをクリックすると記事の上にインデックス表示（日付、タイトル、次へ）されますが、とても便利です。うちのブログでも導入したいのですが、どうやって実現されているのでしょうか。
カテゴリ表示のときに記事の上にインデックスを表示する方法
コメントありがとうございます。
すみません、こちらのコメントの設定の都合で、
コメント内にコードをがっつり載せるのがきついみたいです。
やっすぃぃぃーさんのブログのメール機能を使って、
ソースコードを送付いたしました。
メールをご確認くださいませ。
よろしくお願いいたします。
KumaCrowさん
早速カスタマイズしてみてうまくいきました。ありがとうございます。
記事をまとめたのでトラバさせていただきました。また、うちのブログにリンクも入れさせていただきました。
これからもがんばってください～
FC2ブログのカスタマイズ
コメントありがとうございます。
お、さすがぁ！
ブログを見た感じ、お詳しそうでしたので、
解説少なめで送っちゃいました。(´Д｀;)へへへ
うまいこといって、何よりです。
良かった、良かった。(´▽`)♪
トラバ承認させていただきました。
はてブさせていただきました。
→http://b.hatena.ne.jp/KumaCrow/
ややこしい
コメントありがとうございます。
あー、うまくいかなかったですかぁ。
ややこしいですものね。
しかし、HTMLとFC2ブログの変数タグを覚えてみてくださいとしか、
私には申し上げられないですからねー。
あるいは、具体的に、このタグを、こうしたんだけど、
こうなってしまったというようなお話をいただければ、
それは、こういうことなんです。
というようなご説明はできますけれども。(´ー｀)
テンプレート（HTMLの方）のコード
コメントありがとうございます。
どのような状況かまったく分からないので、
失敗したテンプレート（HTMLの方）のコードを、
お問い合わせから送っていただけますか。
よろしくお願いいたします。
テンプレート
コメントありがとうございます。お久しプリンです。
そうですかー。
それでは、お時間のあるときにでも、また試してみて、
うまくいかなかった場合に、
そのテンプレートを送ってくださーい。ヽ(´ー｀)ノ
教えてもらっても大丈夫ですか？
このテンプレートとここで見本として使われてるテンプレートとでは作りが違ってよくわからなくて困ってます・・・
もしよろしければこのテンプレートで教えてもらえませんか？？
「grey_3column」にトップページを作成する方法
コメントありがとうございます。
（1）テンプレートのバックアップ
まずはじめに、
テンプレートのバックアップをとっておいてください。
※：失敗したときに戻せます。
（2）探す。
テンプレート「grey_3column」の中に、
次のような箇所があると思います。探してみてください。
+----+----+----+----+----+----+----+----+----+----+
<div id="primary">
<div id="main">
<!--not_titlelist_area-->
+----+----+----+----+----+----+----+----+----+----+
（3）変更その1
前述（2）にて見つけた箇所を、次のように変更します。
+----+----+----+----+----+----+----+----+----+----+
<div id="primary">
<div id="main">
<!--index_area-->
<div class="content">
<h2 class="entry_header">トップページ</h2>
<div class="entry_body">
<p>こんにちは！こんにちは！</p>
</div>
</div>
<!--/index_area-->
<!--not_index_area-->
<!--not_titlelist_area-->
+----+----+----+----+----+----+----+----+----+----+
（4）また探す。
テンプレート「grey_3column」の中に、
次のような箇所があると思います。探してみてください。
+----+----+----+----+----+----+----+----+----+----+
<!--/plugin-->
</div><!-- /main -->
</div><!-- /primary -->
+----+----+----+----+----+----+----+----+----+----+
（5）変更その2
前述（4）にて見つけた箇所を、次のように変更します。
+----+----+----+----+----+----+----+----+----+----+
<!--/plugin-->
<!--/not_index_area-->
</div><!-- /main -->
</div><!-- /primary -->
+----+----+----+----+----+----+----+----+----+----+
（6）テンプレートの更新
テンプレートを更新してみてください。
（プレビューでもいいですけれども）
うまいこと表示されたでしょうか？
（7）好きなように文章を変更する
うまいこといったなら、
あとは、次の「トップページ」とか、
「こんにちは！こんにちは！」の部分を
お好きなように変更してみてください。
+----+----+----+----+----+----+----+----+----+----+
<!--index_area-->
<div class="content">
<h2 class="entry_header">トップページ</h2>
<div class="entry_body">
<p>こんにちは！こんにちは！</p>
</div>
</div>
<!--/index_area-->
+----+----+----+----+----+----+----+----+----+----+
以上、うまくいかなかった場合やご不明な点があれば、
お手数ですが改めてコメントしてください。
深夜のドラマは見逃してしまいましたよ・・・・
記事を参考に早速テンプレートで試してみました！
これなら思ったようなサイトに出来そうです！！！
サイトが仕上がったらお知らせしますね＾＾
仕上がるまで当分こちらにお邪魔すると思いますが(^0^;
とても参考になりました！ありがとうございました＾＾