TOPページの記事の上にバナーを貼ってみよう！ ＋ぷちカスタマイズ日記＋

ファンブログ　カスタマイズ　シンプル系スキン限定

---

今回はプロフィールのページにバナーを貼ってみよう！と同じ要領で、TOPページの記事の上にバナーを貼ってみましょう。

記事の上にバナーを貼れる場所は２つあって、ヘッダーの真下と記事の真上です。？（・ω・）？ それって同じじゃんって言われそうですが、ヘッダーの真下のスペースはヘッダーと同じ幅で、記事の真上のスペースは記事と同じ幅になりますんで、それぞれ貼る場所も違うんです。

ヘッダーと同じ幅のスペースにバナーを貼るには場所が広すぎるため、いろいろなテクニックが必要になりますので、場所だけ説明します。今回はレイアウトがカンタンな記事と同じ幅のスペースにバナーを貼ることから初めてみましょう。

---

ＴＯＰページにバナーを貼りますので、「メイン」のHTMLファイルの、どの記述が「ヘッダー」や「記事欄」なのか。「記事欄」のどこから「記事」が始まるのかがわかれば、自分の好きな場所にバナーを貼ることができます。

記述が多いので難しそうに感じるかもしれませんが、前回のプロフィールのページにバナーを貼ってみよう！でバナーが貼れた方は、場所さえわかれば問題なくできると思います。だけど、この「メイン」のHTMLはとても大切なタグが記述されていますので、記述されたタグを消さないよう充分注意して行ってくださいね。

---

今回の作業は「メイン」のHTMLファイルにバナーのタグを追記します。作業をする前に「メイン」のHTMLファイルのバックアップを必ずとっておいてくださいね。

CSSやHTMLファイルのバックアップの方法

---

▼　この説明は「シンプル系スキン」限定です。他のスキンの場合はタグの記述が異なります。 ▼

---

「メイン」のHTMLを開いたら、<BlogEntries> という記述を探してください。比較的上の方に記述されていますので、少し下にスクロールすればすぐ見つかると思いますが、説明には付近のタグも記述してありますので、見つからない方はそちらをご覧になってから探してくみてださい。

---

今回は <BlogEntries> の真上にバナータグを貼るのですが、そのまま貼ると記述してあるタグとバナータグが繋がってしまう恐れがありますので、バナータグを貼る前に <div id="entries"> と <BlogEntries> の間にカーソルを置き、３〜４回改行して間を広げてください。

改行して間を広げた真中あたりの行頭にカーソルを置いてバナータグを貼れば上下に空きができますので、貼ったタグと元から記述されていたタグの区別がつきますから安全に作業が行えます。
プロフィールのHTML編集と同じように範囲内であれば、文章も入力することができます。

---

<div id="blogDesc">{$BlogDescription$}</div> </div><!-- /header --> この場所がヘッダーと同じの幅のスペース <div id="main" class="clr"> <div id="content"> <div id="entries"> 記事と同じ幅のスペース　今回はココに貼ろう！ <BlogEntries> <div class="entry">

◄　ここから下に貼ってください。 　 ◄　ここから上に貼ってください。 ◄　ここから下に貼ってください。 　 ◄　ここから上に貼ってください。

※<BlogEntries>より下に貼りますと１記事ごとにバナーが貼られてしまいますので、注意してくださいね。

---

HTMLの編集では「プレビュー(P)」がありますので、「保存(S)」さえしなければ、何度でも見ながらやり直すことができまし、「保存されている内容に戻す」を押せば、元に戻すこともできますので、サイドバーより編集しやすいと思います。レイアウトに納得できたら、「保存(S)」を押して終了です。

いかがでしたか？プレビューできないサイドバーよりカンタンだったのではないでしょうか。
見栄えを良くするために、文字を装飾したり、中央揃えにするのもイイと思います。ただし、使用した開始タグは必ず終了タグで命令を止めてください。HTMLはつながっているので、終了タグを入れないと、隣のサイドバーまでひたすら命令が実行されますので注意してくださいね。

---

※Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。

---

この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪ 押していただけると励みになります