2013年7月1日月曜日

Blogger 表を使おう (1) 利用の基本

Blogger の投稿に表を使って、見た目を綺麗で分り易くしましょう。
標準状態でサポートされていない表ですが、使い方は割と簡単です。
投稿作成時には、作成画面だけでなく、HTML 画面も使って実現します。


早速、表を出します。

列 1 列 2 列 3 列 4
Text 1-1 Text 1-2 Text 1-3 あいう Text 1-4
Text 2-1 Text 2-2 Text 2-3 えおか Text 2-4
Text 3-1 Text 3-2 Text 3-3  きくけ ... ん Text 3-4

これが HTML の基本的な表です。  縦・横の出だしが揃ったもの です。
一般的な表形式で表示するには、スタイルを指定します。
そう、よく聞く CSS って奴ですね。
その前に、上の表はこのような HTML の記述になっています。
<table class="table-z900">
<tbody>
<tr>
<th width="10%">列 1</th>
<th width="20%">列 2</th>
<th width="55%">列 3</th>
<th width="15%">列 4</th>
</tr>
<tr>
<td>Text 1-1</td>
<td>Text 1-2</td>
<td>Text 1-3 あいう</td>
<td>Text 1-4</td>
</tr>
<tr>
<td>Text 2-1</td>
<td>Text 2-2</td>
<td>Text 2-3 えおか</td>
<td>Text 2-4</td>
</tr>
<tr>
<td>Text 3-1</td>
<td>Text 3-2</td>
<td>Text 3-3  きくけ ... ん</td>
<td>Text 3-4</td>
</tr>
</tbody>
</table>
th タグが見出し文字 tr タグがデータ1行分 td タグが各文字 です。
赤い字は適当な値に変えて下さい。 青い字は変更も可能です。注釈参照。 以下同様。

CSSで定義していない表を使うと、最初の表のような罫線のない形式での表示となります。
さて、枠線のスタイルを指定しましょう。
CSS の定義で Blog 内の表形式を固定するのがお勧めです。
    テンプレート > カスタマイズ > 上級者向け > スクロールバーで最後へ > CSSを追加 > 入力 > ブログに適応
    なお、各投稿のページ内で独自のスタイル(別名称の Class 定義)を指定することも可能です。
CSS の内容はこのようなものです。
.table-z901 {
 border-collapse: collapse; /*  枠線 collapse:1本 separate:2本分離 */
}
.table-z901 th {
 border: solid 1px #c1c1c1; /* 線種 solid:実線 dashed:破線 ... 線幅 線色 HTML16 進数 */
 padding: 0.3em; /* 余白 単位 em:文字 px:ピクセル */
}
.table-z901 td {
 border: solid 1px #cccccc;  /* 線種 solid:実線 dashed:破線 ... 線幅 線色 HTML16 進数 */
 padding: 0.3em; /* 余白  単位 em:文字 px:ピクセル */
}
スタイルを指定するとこうなります。     HTML で最初の一行を table class="table-z901" に変えて下さい。


列 1 列 2 列 3 列 4
Text 1-1 Text 1-2 Text 1-3 あいう Text 1-4
Text 2-1 Text 2-2 Text 2-3 えおか Text 2-4
Text 3-1 Text 3-2 Text 3-3  きくけ ... ん Text 3-4

さて、使い方ですが。

投稿文では HTML に切り替えて、最上段の記述を表の位置に挿入します。
     メモ帳や下書き投稿にこの HTML を貼り付けておいて、そこから、コピーペーストが便利です。
列の横幅の割り振りは%単位で指定し、合計値が 100 になるように。
もし、横幅を越える行がある場合、対象行は改行文字がなくても自動的に改行されます。

データ(新規行)の追加・列の追加削除は HTML モードで、追加後の文字の修正・加工は 作成  モードで行えます。
編集時点でテーブル構造が壊れる恐れもありますので、HTML モードからメモ帳などに貼り付けてから作業される事をお勧めします。
作成 モードから、文字としてリンクを埋め込む事も可能ですが、表ですので簡略な表記でどうぞ。

投稿画面の表示は、CSSでスタイルを指定していても、一番上の表のように、罫線なしです。 
プレビューや公開後はCSSに基づいた罫線付きとなります。


では 幅を指定は、  
HTML モードで最初の一行を table class="table-z901" から table class="table-z901" style="width: 300px;" と書き換えます。
この方法は、HTML 全般の書き方では非推奨のようなのですが、2013/06 現在 IE10 で動作確認済みです。
う~ん、CSSで直接指定したのを幾つか用意するのが普通ですけど ... 。
おまかせベースを table-a 、小を table-a300 、大をtable-a700 とし、CSS上に width の値を変えた 3 個を定義するのが一般的かな。


文字の編集と幅を縮めた表がこれです。

列 1 列 2 列 3 列 4
Text 1-1 Text 1-2 Text 1-3 あいう 外部リンク例:MTT#0032 Text 1-4
Text 2-1 Text 2-2 Text 2-3 えおか(直し Text 2-4
Text 3-1 Text 3-2 Text 3-3  きくけ ... んText 3-4


どうでしたでしょうか?
次回は表形式の色々をご紹介します。  こちらの投稿 Blogger 表を使おう (2) 色々なCSS をご覧下さい。



[2013/07/01] CSS / HTML 関連では この Blog の次の投稿もご覧下さい。   Blogger の引用をそれらしく 
[2013/07/05] 次回の投稿リンクを追加
[2013/07/27] 語句訂正 ブロックをタグに 要素や element の方が良かったのかな

0 件のコメント:

コメントを投稿