テーブルの作り方/無料ブログ作成マニュアル

無料ブログ作成マニュアル

Google
 

◆スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

◆テーブルの作り方

タグでテーブルを作るのはとても難しいです。
しかしFC2ではWYSIWYG編集機能がついていますので、画像の横に文章を書くくらいの簡単なテーブルならこれで作れます。

◆簡単なテーブルの作り方

記事編集画面の本文のところに、WYSIWYGテキストエディター機能を使用するという項目があります。
それをクリックすると、こんな画面に切り替わります。

WYSIWYGエディタ
赤丸のボタンがテーブルを作るボタンです。
クリックするとこんなダイアログが開きます。

テーブルのダイアログ

このままOKを押すと、こんな表が出来ます。
テーブル

行は、縦方向の枠の数。
列は、横方向の枠の数。
ボーダーサイズは、枠線の太さ。
キャプションの整列はテーブルの左寄せ、中央寄せ、右寄せ。
テーブル幅は、ピクセルでの固定幅、パーセントでの相対幅を指定。数を消すと指定なしになります。
テーブルの高さは、改行すれば変わっていくのであんまり使いません。
セル内余白は、内側の枠線と文章などの距離。
セル内間隔は、外枠と内枠の距離。
キャプション、テーブル目的の構造は記入なしでOK。

左に画像をおいてその横に文字を書きたい場合は、1行2列のテーブルを作ればいいので、最初にテーブルを作る時に行を1、列を2に設定します。
枠線は好みによりますが、大体表示されてませんよね。
ボーダーを0にして、画像に文字をくっつけたくないのでセル内余白をお好みの大きさに設定。
幅の数は消してしまっていいです。

設定をしてOKを押すと……
あれ、何にも表示されない。
しかし慌てなくてもいいです。枠線を消しているので見えないだけで、テーブルはちゃんとあります。

このままWYSIWYG編集でもいいんですが、実はこれいわゆる「ホームページ作成ソフト」と呼ばれる既存のソフトに比べるとどうも機能が充実してないんです。
とりあえずここではWYSIWYG編集機能をオフにして、元の記事編集画面に戻ります。

編集画面に戻ると、こんな表記が書かれています。

<table cellspacing="5" cellpadding="0" summary="" border="0">
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

赤の &nbsp; が編集する箇所です。ちなみに&nbsp;は半角スペースを表す文字。
3行2列などの場合はこれが6個あるんですが、上から順に

という順になっています。
ここを消して画像のURLをコピー&ペーストしたり、文章を表記してください。

※注意点
インデックスエリア③のところで説明した様に、「自動改行+HTMLタグでの編集」になっている場合はテーブルタグの改行も反映されて、プレビューで見てみるとテーブルは下の方に表示されてしまいます。
改行を消してつなげて表記するか、編集方法を「HTMLタグのみ」にして、文章などは<br>で改行するかのどちらかで記入してください。

■もっと複雑なテーブルを作りたい場合
枠線を表示してタイトルを中央寄せで書き、その下に画像を置いて、その右側に書く文章は左寄せして……といった複雑なタイプのテーブルを作りたい場合ですが、これは手っ取り早いのはWYSIWYG編集のホームページ作成ソフトをテーブル作成ソフトとして使ってしまうことです。
テーブルを作って、それを記事などにコピー&ペースト。
一番簡単なのは作成ソフトで文章なんかも書いてしまって、<body>~</body>の間をコピー&ペーストしてしまい、「HTMLタグのみ」で記事を書く方法です。
画像を使う際は画像のURLは気をつけてください。
FC2ブログにもその機能があるのは上でも紹介しましたが、基本的なものは作れますが前章のテーブルみたいな複雑な形を作る事は出来ません。
入手や扱い方などについては姉妹サイトの無料ホームページ作成マニュアルで解説してますので(ソフトを手に入れよう!レイアウトを決めよう!HP作成ソフト等)そちらを参考にしてください。
ちなみにテーブルを作るのみであったら、クロのおすすめはFrontPageExpress。
シェアウェアのホームページ・ビルダーを持っているならこれも簡単です。


役に立ったと思っていただけたらポチッと応援お願いします。
FC2 Blog Ranking

トラックバック
この記事のトラックバックURL
http://hpmanual.blog81.fc2.com/tb.php/35-02d3690f
この記事へのトラックバック

Copyright 無料ブログ作成マニュアル 簡単FC2入門 All rights reserved.
Template by 無料ホームページ作成講座ブログ
アクセスアップは相互リンクで 相互リンクドクター!アクセスアップ ホームページ登録(サーチエンジン登録) ホームページ作成 ランキング ページビューランキング 幸福の羅針盤ランキングに参加してね
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。