wiki文法、センタリングや右寄せに挑戦！ ( ホームページ ) - 自由工房－ Freedom Craft －

文章のレイアウトを工夫してみることにしましょう。

　好きな位置に文章を配置することができたら、ページの表現にもう一味を加えてやることができますね。たとえば、「詩」などの短い文章を載せたいとき、文章を右寄せで表現できれば「やさしい感じ」や「趣のある感じ」の表現ができるような気がするのです。自分だけかもしれませんが(笑)

実際にやってみる前に、ヤフー！ブログでのレイアウトを決める際の基本情報を紹介します。

　ヤフー！ブログでは、記事の領域について横幅の最大値が設定されています。その最大値を超える部分については、テキスト（文字列）は自動的に次の行へ。そして画像については縮小表示され、画像をクリックするとオリジナルサイズで閲覧できるようになります。

ヤフー！ブログの記事の横幅：560px

　HTMLならば<div align=☆>～</div>などの構文を使いますが、wiki文法ではテーブルを使用します。HTMLのテーブルと基本的な概念は同じですが、やり方がちょっとややこしいです。

スタイルシート・CSSの導入をしてみましょう。

　って、また…。スタイルシートってなに？
　なぁんて悲観しないでください。スタイルシートとは簡単に言うと、文章の体裁などの要素を加えてやるためのキーワードです。wiki文法ではテーブル内に対してといったように、使用範囲は限定されますが、スタイルシートを理解してくると、表現の幅がググッと拡がります！

スタイルシートの基本構文。

||<#ffffff' style='要素' ``文字列||
　　上記の構文にある「　style='要素'　」部分が今回覚えることです。
　　要素の部分に色々な文章の体裁を決定する命令を指定することで、
　　表現豊かな文章を作ることができます。

行揃えの要素。

text-align:☆
　　☆：センタリング…　center
　　　　右揃え　　　…　right

　使って表現すると、こんな感じです。

右寄せです。

||<#ffffff' style='text-align:right' ``右寄せです。||

　ところがこれでは、左寄せになってしまいます。なぜでしょう。
　それは、テーブルのセル位置が左にあることと、セル幅がテキストの幅と同じだからです。上の構文でテキストの右寄せは有効ですが、セル幅が無いために実際には左寄せに見えてしまいます。セルに色を付けてみるとわかり易いので、薄緑にしてみましょう。


右寄せです。	←　セル幅がこれでは右寄せも左寄せもありませんね(笑)

それでは、セル幅を拡げてみましょう。

　先ほどの構文に、セルの幅などの属性を示す構文を加えてみましょう。とりあえずはセルを記事の横幅いっぱいにするために以下の構文を加えてやります。

width:560px
　　これを加えるとセルの幅が560ピクセル。つまり記事の横幅いっぱいになります。
　　以下に例をしるしてみます。わかりやすくするために、色つきのセルにしました。

右寄せです。

　これで、右寄せの文章表現が可能になりました。
　しかし、wiki文法のテーブルはセル内で改行すると、構文が壊れてテーブルとしての機能がなくなってしまいます。←現在勉強中です。ですから、短い文章にしか向きません。ですので、続けて書く場合にはセルを上下に続けて記述しましょう。

実際にやってみます。

　　||<#ffffff' ``||
　　||<#ffffff' style='width:560px;text-align:right' ``右寄せの１行目です。
　　||<#ffffff' ``||
　　||<#ffffff' style='width:560px;text-align:right' ``右寄せの２行目です。
　　||<#ffffff' ``||
　　||<#ffffff' style='width:560px;text-align:center' ``センタリングで３行目です。
　　||<#ffffff' ``||

右寄せの１行目です。

右寄せの２行目です。

センタリングで３行目です。

　いかがですか？
　この記述方法で右寄せ・センタリング表現が可能になります。
　ちょっと行間が開きすぎているかなぁと思う方に、次回はこの行間隔などの要素をご紹介します☆