インデックスエリア①/無料ブログ作成マニュアル

◆インデックスエリア①

日付を消さないでトップページを作りたいという場合は、インデックスエリアを活用するという方法があります。
とはいえ何も無い状態からインデックスエリアを作るにはHTMLとスタイルシートの理解が必要なので、ここでは共有テンプレートなどで、すでにインデックスエリアが設置されているテンプレートの活用法を紹介します。

◆インデックスエリア

テンプレートの設定でテンプレートをプレビューしながら探していると、たまに「トップフリーエリアです。ここに好きな内容を…」といった記事があるテンプレートがあります。
これを選択し、編集する事で常にトップページに表示されるエリアを作れます。

編集の仕方はテンプレートの編集画面からインデックスエリアのあるテンプレートの「編集」を選択し、HTMLの編集画面に進みます。

HTMLの編集をスクロールしていくと、

～

で挟まれた部分があります。
※【Ctrl】＋【F】で　　を検索。まれにこの方法ではない表示法もあるので、その場合は書かれていた文章を探してください。

～で挟まれた部分には先ほど見た「トップフリーエリアです。ここに好きな内容を…」といった内容の文章が書かれています。
その文章を消して編集し、画面下の更新ボタンを押せば完了です。
こちらもフリーエリアと同様、改行する際は　<br>　が必要となります。
作業中にプレビューを使えるので、確認しながら作業していきましょう。

※注意点
編集する際は～内は全て消していいという訳ではありません。
例えばこの様な表示があったとします。


<div class="mainEntryBlock">
<div class="mainEntryTitle">トップフリーエリア</div>

<div class="mainEntryBase">
<div class="mainEntryBody">
■<strong>トップフリーエリア</strong><br>
この部分に広告やブログ説明など、ご自由に記入して下さい。
</div>
</div>

</div>


これを当サイトで表示するとこうなります。

これを～内を全て消して文章を書くと、緑のタイトルバーは消えてしまいます。
上の例では編集する箇所は


<div class="mainEntryBlock">
<div class="mainEntryTitle">トップフリーエリア</div>

<div class="mainEntryBase">
<div class="mainEntryBody">
■<strong>トップフリーエリア</strong><br>
この部分に広告やブログ説明など、ご自由に記入して下さい。
</div>
</div>

</div>


この赤い部分です。
<div ～>や<table>、<tr>などといったタグがあった場合は慣れてない時は消さない方が無難です。
編集するのは文章だけか、<strong>や<br>などの記事を書く際によく見かけるの部分のタグにとどめておきましょう。

文章だけではなく、画像やリンクをフリーエリアに使いたい場合は、簡単なのは「新しく記事を書く」の本文のところで作ってみて、それは保存せずに作った部分を～内にコピー＆ペースト。
<br>で改行して調整するといったやり方です。
これなら画像やリンクを入れるのも簡単です。