左揃え、右揃え、中央揃え、両端揃え
テキストブロックに横の配置を適用するには次のことを使ってください。
| [[<]] … [[/<]] |
左寄せ |
| [[>]] … [[/>]] |
右寄せ |
| [[=]] … [[/=]] |
中央寄せ |
| [[==]] … [[/==]] |
両端寄せ |
例：
[[=]]
あのイーハトーヴォのすきとおった風、\
夏でも底に冷たさをもつ青いそら、\
うつくしい森で飾られたモリーオ市、\
郊外のぎらぎらひかる草の波。
そして私たちはまっ黒な林を通りぬけて、さっきの[[span class="ruby"]]柏[[span class="rt"]]かしわ[[/span]][[/span]]の[[span class="ruby"]]疎林[[span class="rt"]]そりん[[/span]][[/span]]を通り古いポラーノの広場につきました。
[[/=]]あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
そして私たちはまっ黒な林を通りぬけて、さっきの柏かしわの疎林そりんを通り古いポラーノの広場につきました。1
単一のラインを中央寄せするには始まりに=を使ってください。2
= 中央揃えされたライン中央揃えされたライン
ノート:ブロックフォーマットタグは独自的に個別のラインを持つ必要があります。例えば、[[=]]と[[/=]]はすぐ後にリターン文字(改行)が付いて行かなければなりません。
カスタムdivブロック
レイアウトを改善するには、[[div]] ... [[/div]]エレメントを使うことができます。これはhtmlで <div> ... </div> に変換されます。
許容される属性はid、class、style、data-だけですが、これだけでも欲しいレイアウトを作るには十分です。SPANエレメントもclass、style、data-の属性が許容されております。
[[div]]ブロックは入れ子にすることができます。 [[div]]と[[/div]]タグを一つのラインに叩き込むとパーサーが変換しておりません。
次はdivブロックを使って2列のレイアウトを作る例です。
[[div style="float:left; width: 45%; padding: 0 2%"]]
左列左列左列左列左列左列左列左列左列左列
左列左列左列左列左列左列左列左列左列左列
[[/div]]
[[div style="float:left; width: 45%; padding: 0 2%"]]
右列右列右列右列右列右列右列右列右列右列
右列右列右列右列右列右列右列右列右列右列
[[/div]]
~~~~左列左列左列左列左列左列左列左列左列左列
左列左列左列左列左列左列左列左列左列左列
右列右列右列右列右列右列右列右列右列右列
右列右列右列右列右列右列右列右列右列右列
~~~~エレメントはfloat設定のブロックをクリアすることに使われ、<div style="clear:both"></div>に変換されます。
カスタム[[div]]ブロックはかなり上級のページレイアウトを作るに使うことができます。
[[div_ ]]のようにdivエレメントにアンダースコアを追加することで自動改行を防ぎ、ランダムな新しいラインと段落を作ることを防ぐことができます。これによってブートストラップコンポーネントのように複雑なHTML構文を簡単に作成する事ができます。
カスタムDIVではブートストラップを使うサイトを作るのに特に便利なユーザー定義のID引数を使うことができます。ユーザー定義のIDはセキュリティ上の理由でHTMLで出力されるときに"u-"の接頭辞が追加されます。
ソースを読みやすくする為に"u-"の接頭辞を自分で付けることができます。例えば、この二つのWiki構文は同じHTMLで出力されます。
ページが保存されるときに自動的にmyCarouselに"u-"に接頭辞が追加されます
[[div id="myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]"u-"の接頭辞がすでに存在するときには追加されません
[[div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"]]両方の例で出力されるHTMLです
<div id="u-myCarousel" class="carousel slide" data-interval="3000" data-ride="carousel">