記事本文を飾り付けてみよう「（その２５）Wiki超入門１５」

前回はテーブルの色やサイズの変更をしましたが、今回はそのテーブル内での文字の位置を変えてみたいと思います。
テーブルの中で改行ができないので、あまり使い勝手は良くありませんが、工夫次第でもしかしたら凄いレイアウトが出来るかもしれません。是非試してみてくださいね。

※Wikiを使用する場合は、記事本文を記入する欄の右上にある「Wiki文法使用」をチェックしておいてください。

基本的なルールとしては

||||
||<#色の値' width=横幅 height=高さ align=横の揃え方 valign=縦の揃え方 ``表の文

[align属性]
左揃え => left
中央揃え => center
右揃え => right

[valign属性]
上寄せ => top
中央揃え => middle
下寄せ => bottom

です。

・"|"は縦棒です（何て言うのか判りません）。私のキーボードでは右上の"\"キーをShiftと一緒に押すと出てきます。
・色の値の次にあるのは['](シングルクォーテーション)です。私のキーボードでは"7"キーをShiftと一緒に押すと出てきます。
・表の文の前にあるのは[`](何て言うのか判りません)。私のキーボードでは右側の"@"とshiftを一緒に押すと出てきます。

基本の位置は、横＝左揃え・縦＝中央揃えになっています。それ以外に変更したい時は以下の様に設定してください。

■テーブルの文字の横の位置を変える（align属性）

文法）
||||
||<#ccffff' width=100 height=100 align=left ``左揃え
||<#ccffff' width=100 height=100 align=center ``中央揃え
||<#ccffff' width=100 height=100 align=right ``右揃え

結果）

左揃え	中央揃え	右揃え

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの文字の縦の位置を変える（valign属性）

文法）
||||
||<#ccffff' width=100 height=100 valign=top ``上寄せ
||<#ccffff' width=100 height=100 valign=middle ``中央揃え
||<#ccffff' width=100 height=100 valign=bottom ``下寄せ

結果）

上寄せ	中央揃え	下寄せ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

■テーブルの文字の位置を変える（いろいろ組み合わせてみる）

文法）
||||
||<#ccffff' width=100 height=100 align=left valign=top ``左・上揃え
||<#ccffff' width=100 height=100 align=left valign=middle ``左・中央揃え
||<#ccffff' width=100 height=100 align=left valign=bottom ``左・下揃え
||||
||<#ccffff' width=100 height=100 align=center valign=top ``中央・上揃え
||<#ccffff' width=100 height=100 align=center valign=middle ``中央・中央揃え
||<#ccffff' width=100 height=100 align=center valign=bottom ``中央・下揃え
||||
||<#ccffff' width=100 height=100 align=right valign=top ``右・上揃え
||<#ccffff' width=100 height=100 align=right valign=middle ``右・中央揃え
||<#ccffff' width=100 height=100 align=right valign=bottom ``右・下揃え

結果）

左・上揃え	左・中央揃え	左・下揃え
中央・上揃え	中央・中央揃え	中央・下揃え
右・上揃え	右・中央揃え	右・下揃え

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如何でしょうか？
ますます細かい設定が出てきてしまいましたが、少しずつやっていけばそんなに難しいことではありません。一つ一つやってみてくださいね。

※ここでは、例として色や大きさを設定していますが、ご利用の際にはお好きな色と大きさを指定してください。

参考
色見本はこちらをご覧ください。
色見本１
色見本２

また、Yahoo!blogの場合、記事の部分の横幅は560pxに設定されているようです。
テーブルの大きさを設定する時は、横幅の合計をそれ以下にしておいた方が良いでしょう。

[感謝]
この記事は「きろくぶろぐ」さんの記事を参考にさせていただきました。
もしも、参考になりましたら「きろくぶろぐ」さんのページにて、ボタンをお願いします。
「きろくぶろぐ」さんの研究の成果に感謝！！

[☆歓迎☆]
コメント・トラックバック大歓迎！
転載をご希望の方は右下のを押してください。