FC2ブログのトップページだけ別の表示にする方法

ブログが作りたい!FC2ブログのカスタマイズ > FC2ブログのトップページだけ別の表示にする方法

FC2ブログのトップページだけ別の表示にする方法

FC2ブログのトップページだけ別の表示にする方法

FC2ブログのカスタマイズ(11)

FC2ブログをやっていると、トップページに常に表示される「ご案内」のようなページを設けたい場合などがあるはずです。

あるいは「ご挨拶」とか・・・どちらかと言うと「ホームページ」と呼ばれる形式に近い構成ですね。

そこで今回は、そのトップページだけ別の表示をするカスタマイズ方法をご紹介いたします。


「トップページだけ別の表示にする」とは?

「FC2ブログのトップページだけ別の表示にするカスタマイズ方法」なんて言われても、すぐにピーンとくる人ばかりではないはずです。

まず、どういうことなのか?お話いたします。

1:「トップページだけ別の表示にする」とは?

(01)

例えば、次のようなブログがあるとします。

一般的なブログの形式(テンプレート)であれば、ブログのトップページを表示すると、各記事が並んで表示されるはずです。

一般的なブログの形式(テンプレート)

対して、FC2ブログのテンプレートをカスタマイズして「トップページだけ別の表示」にすれば、トップページだけ記事を非表示にして、好きなことを書いておくことができます。

「<!--index_area-->」というFC2変数タグを使用することによって、トップページだけ別な表示をさせることが可能です。

FC2ブログのトップページだけ別の表示

「トップページだけ別の表示」を入れて、各記事も表示するということもできます。

2:分かりやすくするために試してみる

(02)

さらによく理解できるように、実際に試してみましょう。

今回は、テンプレート「alice」を使います。共有テンプレート追加からダウンロードして、適用してください。

テンプレート「air」

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(記事1)が表示される

ただ、トップページをすっからかんにすると、何もないブログと勘違いされる可能性があるため、検索エンジンからあまり好まれません。

また、閲覧者は、無駄に1回多くクリックしなければいけないので、ユーザビリティが悪いとも言えます。

特別な理由がない限りは、あまりこのようなスタイルにしない方が良いと思います。


FC2ブログのトップページだけ別の表示にする方法

それでは本編です。今度は、ヘッダやサイドは常時表示した状態で、記事の領域だけが違う形にしてみます。

1:テンプレート「alice」

(01)

テンプレート「alice」を使います。適用した状態にない場合は、試しに共有テンプレート追加からダウンロードして、適用してみてください。

テンプレート「air」

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関係のことを書く予定です。

これからは、単発でイロイロなことを取り上げていこうと思っています。今後も、ご愛顧くださいますよう宜しくお願い申し上げます。カブトムシ。


関連記事

カスタマイズに関連する記事を、ご紹介します。

作成日:2008/06/08 更新日:2010/01/30

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

トップページだけ別の表示をする!

KumaCrowさんこんにちは!
深夜のドラマは見逃してしまいましたよ・・・・

記事を参考に早速テンプレートで試してみました!
これなら思ったようなサイトに出来そうです!!!

サイトが仕上がったらお知らせしますね^^
仕上がるまで当分こちらにお邪魔すると思いますが(^0^;
とても参考になりました!ありがとうございました^^

携帯対応

ichimarugo-いちまるごさん、こんにちは。

考えてみると、リアルタイムで見る人なんて、
私くらいのものかもしれませんね。作業のついでとは言え。

それにしても、あんな深い時間にやらなくても良さそうなものですが、
んー人気ないのかしら。

ヨン様は、相変わらずの人気みたいですけどね。

テンプレートうまいこと行ったみたいで何よりです。
サイトの完成を楽しみにしています。(・∀・)/

ん、あ、そう言えば、先日ひろこさんとお話ししたときに、

居酒屋とかなら、
「携帯サイトとしても考えないといけないんじゃないかしら」
とか何とか。

少なくとも、場所地図、電子クーポン券などに使えるので、
携帯でも見られるようなコードにしておいた方が良いよねと。

その辺も考慮した作りにしていらっしゃるのかしら?

よく知らないのですが、
使えないコードとかあるんですよね?

なるほど!

こんばんは。
なるほど、こういう仕組みだったんですね。知りませんでした。
色々使えそうですし、そのうち試してみたいです。

index_area

Tytoさん、こんばんは。
コメントありがとうございます。

index_areaは、使い勝手の良い変数ですね。
ブログっぽさが、無くなって可能性が広がります。

携帯サイト!

KumaCrowさんこんばんは!
携帯サイトいいですね~^^
田舎の方は意外と携帯の方がアクセス多いかもです!
けど、私も携帯サイトはコードとかよくわかりません。
でもでも、今回ちょっと挑戦してみますね^^
クーポン券ですか!参考になります!
アドバイスありがとうございます!!!

ケータイを携帯する

ichimarugo-いちまるごさん、こんにちは。
コメントありが闘莉王!

はい。うちのド田舎でも、
PCより、携帯でネットを利用する人のほうが多いです。

携帯サイトまで作れるなんてことになると、
さらに忙しくなってしまいますねぇ。

楽しみにしています。(o゚ω゚o)

おはようございます

KumaCrowさん、おはようございます!
トップページだけ別の表示、おもしろいですね。
個人サイトさんでも、入り口ページを設けられているのを見かけますね。


<!--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/

No title

こんばんわ。
すみません-><;
基礎知識がなさすぎて
途中からブログが表示されなくなりました。
トップページを作成するところからです。
本当すみません(_)

ややこしい

刹葵さん、こんにちは!( ・∀・)ノHappy Sunday
コメントありがとうございます。

あー、うまくいかなかったですかぁ。
ややこしいですものね。

しかし、HTMLとFC2ブログの変数タグを覚えてみてくださいとしか、
私には申し上げられないですからねー。

あるいは、具体的に、このタグを、こうしたんだけど、
こうなってしまったというようなお話をいただければ、

それは、こういうことなんです。
というようなご説明はできますけれども。(´ー`)

No title

05まではできました。
しかし、06からうまくできません(´ω`;)

とっぷの入力場所もいまいち分かりません。

すみません、お願いしますmn

テンプレート(HTMLの方)のコード

せぇ。さん、こんにちは!( ・∀・)ノへろー
コメントありがとうございます。

どのような状況かまったく分からないので、
失敗したテンプレート(HTMLの方)のコードを、

お問い合わせから送っていただけますか。
よろしくお願いいたします。

No title

お久しぶりです。(?)

なんかうまくいかなかったので
消してしまいましたああぁあ-・・・(゜Д゜;)
すみません。
本当、どうしようもなくて・・・

テンプレート

せぇさん、こんにちは!( ・∀・)ノHappy Sunday
コメントありがとうございます。お久しプリンです。

そうですかー。
それでは、お時間のあるときにでも、また試してみて、

うまくいかなかった場合に、
そのテンプレートを送ってくださーい。ヽ(´ー`)ノ

教えてもらっても大丈夫ですか?

grey_3columnというテンプレートを使ってトップページだけ変えたいのですが
このテンプレートとここで見本として使われてるテンプレートとでは作りが違ってよくわからなくて困ってます・・・

もしよろしければこのテンプレートで教えてもらえませんか??

「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-->
+----+----+----+----+----+----+----+----+----+----+



以上、うまくいかなかった場合やご不明な点があれば、
お手数ですが改めてコメントしてください。

承認待ちコメント

このコメントは管理者の承認待ちです

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/352-ba3adf49

カテゴリ表示の際に記事上部にインデックスを表示させる

探し物をしていてネットサーフィンしていた際、とても役立つブログデザインのサイトがありましたので、皆さんにご紹介します。 『ブログが...
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて