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

◆インデックスエリア③

インデックスエリアを置く位置の理解が出来たら、実際にインデックスエリアを作ってみましょう。

◆インデックスエリアの書き方

ここを編集します

をの上に表記してプレビューで確認してみてください。

位置に間違いが無ければ「ここを編集します」という文字が記事の上に記されている筈です。
しかし他のテンプレートに見られるような枠線の囲みなどは表示されてませんね。
そのまま文章を書いたり画像を貼り付けるだけならいいんですが、枠線を表記したい場合はテーブルタグというものを使います。

■テーブルタグ
<table align="center" bordercolor="#000000" bgcolor="#ffffff" cellspacing="1" cellpadding="1" border="1" width="100%">
<tr>
<td align="left">
ここを編集します
</td>
</tr>
</table>

基本はもっと簡単なんですが、使いやすくするため色々加えてます。
これを表示させると、

ここを編集します

この様に表示されます。
上のテーブルタグをコピーしてインデックスエリア内にペーストし、「ここを編集します」のところを編集してください。

テーブル自体の編集は、<table align…>と<td align…>となっているところで変更します。

align="center"	left、center、right　への変更で左寄せ、中央寄せ、右寄せを変更できます。 tableの方はテーブル全体の位置、tdの方は中に書く文章などの位置。
bgcolor="#ffffff"	テーブル内の背景色。カラーコードは文字の色を参考にしてください。 bgcolor="#ffffff"自体を消すと、背景は透明になります。 background="画像のURL"　に変更すると背景に画像も使えます。
bordercolor="#000000"	枠線の色を変更できます。
cellspacing="1"	枠線の外側と内側の余白の大きさ。０にすると枠線は外側１本の表示になります。
cellpadding="1"	枠線の内側から文章などへの余白の大きさ。０にすると枠線が文字などにぴったりとくっつきます。
border="1"	外側の枠線の太さ。
width="100%"	テーブルの横幅。px単位でも設定可。

枠線をちょっと変えたい時は下のテーブルタグをコピー＆ペーストし、編集して使ってください。
上下の位置を変えて記事等との間を空けたい時は、<br>で変更すればいいです。

■点線

<table style="BORDER-LEFT-COLOR: #008080; BORDER-BOTTOM-COLOR: #008080; BORDER-TOP-STYLE: dotted; BORDER-TOP-COLOR: #008080; BORDER-RIGHT-STYLE: dotted; BORDER-LEFT-STYLE: dotted; BORDER-RIGHT-COLOR: #008080; BORDER-BOTTOM-STYLE: dotted" width="100%" align="center" bgcolor="#ffffff">
<tr>
<td align="left">
ここを編集
</td>
</tr>
</table>

■破線

<table style="BORDER-LEFT-COLOR: #008080; BORDER-BOTTOM-COLOR: #008080; BORDER-TOP-STYLE: dashed; BORDER-TOP-COLOR: #008080; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; BORDER-RIGHT-COLOR: #008080; BORDER-BOTTOM-STYLE: dashed" width="100%" align="center" bgcolor="#ffffff">
<tr>
<td align="left">
ここを編集
</td>
</tr>
</table>

こういった飾りテーブルをフリー素材として配布しているサイトさんもあります。
シンプレストさんや無料ホームページテンプレートの素材屋さんなどに色々ありますのでチェックしてみてください。
※注意点
テンプレートによっては画像と同じで、テーブルの幅によってメニュー部分が下に落ちてしまう場合もあります。
また、スタイルシートの設定によって文字の大きさが変わることもあるので注意してください。

■記事にテーブルを使いたい場合
テーブルはインデックスエリアのみではなく、記事にも表記できます。
中に文章を書くだけではなく、文章の区切りに使ったりなど、使い方は様々です。
ただしカスタマイズの時はいいんですが、記事に上のテーブルをペーストすると、間が開いて下の方に表示されてしまいます。
記事は「自動改行＋HTMLタグでの編集」になっているので、テーブルタグにある改行も反映されてしまうんですね。
この場合は、

<table align="center" bordercolor="#000000" bgcolor="#ffffff" cellspacing="1" cellpadding="1" border="1" width="100%"><tr><td align="left">ここを編集します</td></tr></table>

の様につなげて表記するか、編集方法を「HTMLタグのみ」にして、文章は<br>で改行するかのどちらかで記入してください。

最後に記事タイプのトップページを作りたい場合なんですが……
これは未来記事を作って日付を消したほうが簡単。
テンプレートごとに記事部分の表記法が違うので、 ～ の間を見て、その記事の表記方を理解しなければなりません。
要するに記事部分をコピーしてインデックスエリアに貼り付けて、骨組みだけ残す様に余計な部分を削除するというやり方。
これはかなりめんどくさいやり方です。
HTMLとスタイルシートを理解したうえで、FC2ブログで使えるブロック変数（編集画面の上部にテンプレート中で使える変数一覧とあります）を知れば、おのずと判ります。
これは上級者向け。
実は

もあんまりよく判ってません。
もっと簡単なやり方があるかもしれませんが、これは解説できませんのでご了承ください……