シリウスではテーブル作成ツールで自由に「列」「行」などの数を変更させて表示させることができます。またサイト作成画面に落とし込んだ後でも、その状態でツールに戻る事ができます。
しかしテーブルの仕組みを理解して、サイト作成画面上で自由に列や行の変更ができるようにしておく必要があります。このテクニックを理解しておくと、万が一表示崩れの際にも作成画面上で対応することができますし、下記表示のようにセルを結合する事も可能になります。
[テーブル枠] |
セル |
セル |
セル |
セル |
---|---|---|---|---|
3セル分 縦に結合した セル |
セル |
3セル分 横に結合したセル |
||
2セル分 縦に結合した セル |
セル |
セル |
セル |
|
セル |
2セル分 横に結合したセル |
※ 上記テーブルのHTMLソースはこちら [ページ一番下に飛びます]
9-テーブル作成ツールの使い方について [この動画は16分で見れます]
グーグルのホームページの価値を判断するクローラーは整然としたまとまりのある、解りやすい文章や表現を評価します。これはホームページの閲覧者さんがデザイン的にも読みやすい記事であればグーグルもその価値を認めるということです。
テーブル枠やリストでの表現は、単純にダラダラとした長い文章を端的にまとめることがでるので、ホームページ作成者が絶対に必要とする表現です。会社概要や沿革、商品の料金表などあらゆる場面で必要になります。特にテーブル枠の原理は理解しておきましょう。
表現-1
私が好きな果物は青森県産のりんご、愛媛県産のみかん、エクアドル産のバナナ、沖縄県産のパイナップル、山梨県産のぶどうです。
表現-2
私が好きな果物
りんご | みかん | バナナ | パイナップル | ぶどう |
---|---|---|---|---|
青森県産 |
愛媛県産 |
エクアドル産 |
沖縄県産 |
山梨県産 |
上記では明らかにテーブル枠を使って記述された表現の方が閲覧者にとって解りやすいです。リスト表示でも同じことがいえます。これはクローラーがソースを読みやすいということもあり、SEO対策としても有効になります。
普段記事を執筆する場合、常にテーブル枠やリストを使った方が解りやすいかどうか判断していくようにしましょう。私見ですが通常の文章の場合でも閲覧者さんが読みやすくまとまりのある文章はグーグルに評価されていると思います。
テキスト自体が読みやすい文章である事ことはもちろん、段落や句読点など、ユーザビリティを考えながら文章を作成するのはおそらくSEO上有効ではないかと考えています。
下記のソースのようにテーブル枠のセルを縦方向、横方向に複雑に結合させることは非常に手間のかかる作業となります。オンラインで動作する無料ツールタグクリエイターでは縦横の結合を完成形のテーブル枠の表示により、視覚的に確認しながら作業できるので大変便利になっています。
※ このページ一番上のテーブルHTMLソース
<table>
<tbody>
<tr>
<th><p style="text-align:center;">[テーブル枠]</p></th>
<td><p style="text-align:center;"><b>セル</b></p></td>
<th><p style="text-align:center;"><b>セル</b></p></th>
<th><p style="text-align:center;"><b>セル</b></p></th>
<th><p style="text-align:center;"><b>セル</b></p></th>
</tr>
<tr>
<th rowspan="3">
<p style="text-align:center;"><b>3セル分</b></p>
<p style="text-align:center;"><b>縦に結合した</b></p>
<p style="text-align:center;"><b>セル</b></p>
</td>
<td><p style="text-align:center;"><b>セル</b></p></td>
<td colspan="3"><p style="text-align:center;"><b>3セル分 横に結合したセル</b></p></td>
</tr>
<tr>
<th rowspan="2">
<p style="text-align:center;"><b>2セル分</b></p>
<p style="text-align:center;"><b>縦に結合した</b></p>
<p style="text-align:center;"><b>セル</b></p>
</th>
<td><p style="text-align:center;"><b>セル</b></p></td>
<td><p style="text-align:center;"><b>セル</b></p></td>
<td><p style="text-align:center;"><b>セル</b></p></td>
</tr>
<tr>
<td><p style="text-align:center;"><b>セル</b></p></td>
<th colspan="2"><p style="text-align:center;"><b>2セル分 横に結合したセル</b></p></th>
</tr>
</tbody>
</table>