2009年09月06日
ポータルのページに表（table）のレイアウト・エリアを設置してみよう！
ファンブログ カスタマイズ
シンプル系スキン限定
今回は、前回の シンプル系スキンの表（table）の自動装飾機能を上手に利用する方法 で説明しました、ポータルのページに設置する表（table）のレイアウト・エリアの「タグ」の公開と設置や使用方法を説明します。
表（ｔａｂｌｅ）のレイアウトをしたい方は、HTML に直接記述することが普通に行えるレベルの方だということを前提に説明していきます。初心者の方にはお勧めできませんので、ご注意くださいませ。
貼るだけで、記事と同じように表示されます表（table）のレイアウトエリアのタグを公開します。フェイクの記事タイトルバーとフッター（インフォメーションリンク）付きなので、レイアウトする目安にもなると思います。
カンタンに設置できるよう、タグをご用意しましたのでお試しくださいませ。
▼ 今日のおみやげ ▼
お持ち帰りの際は「コメント」などを残していただけますと励みになります。
元気のミナモト！≫ FC2 Blog Ranking ≪ 応援お願いします。
上の ボックス内にマウスを置くだけ でボックス内のタグが 全て選択 されますので、 右ボタン⇒コピー でお持ち帰りください。
今回は「ポータル」の HTML にお持ち帰りいただいた「タグ」を貼り付けます。バックアップを取ってから作業を始めてくださいね。
ポータルのHTMLを開いたら、 {$ContentsBody$} という記述を探してください。単純な構造なので、少し下にスクロールすればすぐ見つかります。
表示されています「プロフィールと最新記事の表」の下に表示させたいので、 {$ContentsBody$} の下に「タグ」を貼り付けてください。
<div id="content">
{$ContentsBody$}
表の下に表示されるようココに貼り付けてください！
</div><!-- /content -->
? プロフィール＆最新記事の表
? ここから上に貼ってください。
「タグ」を貼り付けましたら、「プレビュー(P)」で確認していただくのですが、今回は裏作業的なエリアになりますので、最新記事の表から 1000px 下に設置するようにしてあります。スクロールバーで1番下までスクロールしてご確認ください。ページの最後に「table layout area」というタイトルバーが表示されていましたら「保存(S)」を押して設置は完了です。
レイアウトしやすいようにフェイクの「記事タイトルバー」と「フッター（インフォメーションリンク）」を表示させています。表（table）が表示される記事欄は、フォントサイズや行間設定を変更している方でも同じ表示になるよう、
記事と同じ "entryBody clr" を指定しています。
また、フェイクの記事タイトルにはリンクを貼らないと文字色が黒く表示されてしまいますので、スキンの文字色で表示されるように、弊サイトのリンクを貼らせていただいております。
設置位置は、デフォルトでは最新記事の表から 1000px 下に表示するようにしてあります。位置を変更したい場合は、上から2行目の <h2 class="entryTitle" style="margin: 1000 px 0 0;"> の 1000 px の数字で調整します。
設置位置が決まりましたら、あとは、 <!-- 入力初め --> から <!-- 入力終り --> の間に表（table）を記述して、「プレビュー(P)」で確認しながらレイアウトしていきます。表（table）が完成しましたら、記述をコピーして記事に貼り付けてください。
※ わかりやすいようサンプルの表を入れてありますので、不要な方は削除してお使いくださいませ。
表を多用する方は、いくつかのパターンの表をここに「保存(S)」しておきますと便利かもしれません。
また、記事幅で表示されますので、表（table）でなく、画像のレイアウトなんかにも利用できると思います。
いかがでしたでしょうか？非常に面倒なようですが、ファンブログではこのような方法でしか正しく表示される表を見ながら編集することができませんので、こだわり派の方は、ぜひお試しくださいませ。(´・ω・`)b
※ 上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
この情報が、お役にたちましたら ≫ FC2 Blog Ranking ≪
押していただけると励みになります
カンタンに設置できるよう、タグをご用意しましたのでお試しくださいませ。
▼ 今日のおみやげ ▼
元気のミナモト！≫ FC2 Blog Ranking ≪ 応援お願いします。
上の ボックス内にマウスを置くだけ でボックス内のタグが 全て選択 されますので、 右ボタン⇒コピー でお持ち帰りください。
今回は「ポータル」の HTML にお持ち帰りいただいた「タグ」を貼り付けます。バックアップを取ってから作業を始めてくださいね。
CSSやHTMLファイルのバックアップの方法
▼ それでは設定方法の説明です ▼
ポータルのHTMLを開いたら、 {$ContentsBody$} という記述を探してください。単純な構造なので、少し下にスクロールすればすぐ見つかります。
表示されています「プロフィールと最新記事の表」の下に表示させたいので、 {$ContentsBody$} の下に「タグ」を貼り付けてください。
<div id="content">
{$ContentsBody$}
表の下に表示されるようココに貼り付けてください！
</div><!-- /content -->
? プロフィール＆最新記事の表
? ここから上に貼ってください。
「タグ」を貼り付けましたら、「プレビュー(P)」で確認していただくのですが、今回は裏作業的なエリアになりますので、最新記事の表から 1000px 下に設置するようにしてあります。スクロールバーで1番下までスクロールしてご確認ください。ページの最後に「table layout area」というタイトルバーが表示されていましたら「保存(S)」を押して設置は完了です。
▼ 続いて「table layout area」の使用方法の説明です ▼
レイアウトしやすいようにフェイクの「記事タイトルバー」と「フッター（インフォメーションリンク）」を表示させています。表（table）が表示される記事欄は、フォントサイズや行間設定を変更している方でも同じ表示になるよう、
記事と同じ "entryBody clr" を指定しています。
また、フェイクの記事タイトルにはリンクを貼らないと文字色が黒く表示されてしまいますので、スキンの文字色で表示されるように、弊サイトのリンクを貼らせていただいております。
設置位置は、デフォルトでは最新記事の表から 1000px 下に表示するようにしてあります。位置を変更したい場合は、上から2行目の <h2 class="entryTitle" style="margin: 1000 px 0 0;"> の 1000 px の数字で調整します。
設置位置が決まりましたら、あとは、 <!-- 入力初め --> から <!-- 入力終り --> の間に表（table）を記述して、「プレビュー(P)」で確認しながらレイアウトしていきます。表（table）が完成しましたら、記述をコピーして記事に貼り付けてください。
※ わかりやすいようサンプルの表を入れてありますので、不要な方は削除してお使いくださいませ。
表を多用する方は、いくつかのパターンの表をここに「保存(S)」しておきますと便利かもしれません。
また、記事幅で表示されますので、表（table）でなく、画像のレイアウトなんかにも利用できると思います。
いかがでしたでしょうか？非常に面倒なようですが、ファンブログではこのような方法でしか正しく表示される表を見ながら編集することができませんので、こだわり派の方は、ぜひお試しくださいませ。(´・ω・`)b
※ 上記Htmlタグはコピー＆ペーストでそのままご利用になれます。
※ Htmlタグのご使用、カスタマイズにつきましては、利用者の自己責任にてお願いします。
【表（table）の豆知識の最新記事】
この記事へのコメント