ちゃ〜さんのひとりごと。

【Ｗｉｋｉ】テーブル内で改行

昨日、実験だけして終わった改行の説明を少々

改行ができるようになるのは『word-spacing:○○px;』という命令を入れたときです。
改行させたい場所に『半角スペース』をいれます。
『全角スペース』でも改行できますが、自分のブラウザだと改行しないので
できれば、半角スペース使ってもらえると助かります(；・∀・)

あいうえお KAKIKUKEKO さしすせそ

あいうえお KAKIKUKEKO さしすせそ

||<#CCCCCC' style=' word-spacing:560px;' ``あいうえお KAKIKUKEKO さしすせそ||

||<#CCCCCC' style=' word-spacing:250px;' ``あいうえお KAKIKUKEKO さしすせそ||

おおー今試して気づいた！半分ぐらいだと間が空くだけだ！

というわけで、これを直すには『width:○○px;』でサイズ指定
この場合『word-spacing:560px;』のままで数値変更しなくてもＯＫです。（一番下参照）

あいうえお KAKIKUKEKO さしすせそ

あいうえお KAKIKUKEKO さしすせそ

あいうえお KAKIKUKEKO さしすせそ

||<#CCCCCC' style=' word-spacing:170px;' ``あいうえお KAKIKUKEKO さしすせそ||

||<#CCCCCC' style=' width:170px; word-spacing:170px;' ``あいうえお KAKIKUKEKO さしすせそ||

||<#CCCCCC' style=' width:170px; word-spacing:560px;' ``あいうえお KAKIKUKEKO さしすせそ||

では、最後に画像と並べて表示してみましょう。

最初は、幅の指定なしにしてみました。これでも大丈夫みたい。
ただ、引用2,3に引っ張られて広がってますね。
文字は、左寄りで高さ方向は中央になります。

次のは、文字位置センター・高さ方向を上にしています。

最後は、枠線をつけて、文字位置右・高さ方向下にしています。
引用２や引用３のときのように左側は改行されないということはありません。
当然、[[attached(番号)]]でもＯＫですよね。

	あいうえお KAKIKUKEKO さしすせそ

	あいうえお KAKIKUKEKO さしすせそ

あいうえお KAKIKUKEKO さしすせそ

||<#FFFFFF' ` `||
||<#FFFFFF' style=' padding:0px; width:279px; text-align:center;' ``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_1?20051208094005,279, )]]
||<#CCCCCC' style=' padding:0px; word-spacing:560px;' ``あいうえお KAKIKUKEKO さしすせそ

||<#FFFFFF' ` `||
||<#FFFFFF' style=' padding:0px ;width:279px; text-align:center;' ``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_1?20051208094005,279, )]]
||<#CCCCCC' style=' padding:0px; width:279px; word-spacing:560px; text-align:center; vertical-align:top;' ``あいうえお KAKIKUKEKO さしすせそ

||<#FFFFFF' ` `||
||<#CCCCCC' style=' border:solid 10px #000000; padding:0px; width:259px; word-spacing:280px; text-align:right; vertical-align:bottom;' ``あいうえお KAKIKUKEKO さしすせそ
||<#FFFFFF' style=' padding:0px; width:279px; text-align:center;' ``[[attached(番号)]]

実験

あいうえお KAKIKUKEKO SASISUSERO

あいうえお KAKIKUKEKO SASISUSERO

あいうえお KAKIKUKEKO SASISUSERO

	あいうえお KAKIKUKEKO SASISUSERO

	あいうえお KAKIKUKEKO SASISUSERO

	あいうえお KAKIKUKEKO SASISUSERO

あいうえお KAKIKUKEKO SASISUSERO

テーブル内で改行できましたー♪すげー簡単な方法だった(；・∀・)

デカ文字

ご要望があったのでご紹介。

||<#ffffff' style='font:bold 300pt;color:red;' ``デカイ文字||

えーっと、適当に300にしてますが、270ぐらいだと２つになっちゃうのかな？
上は540ぐらいなんだろか？？？
『color:』の後ろ変えればいろんな色になりますよ！

追記
フォントの関係か２列になるとこととならないところがあったりしましたが
実験の結果、下が250で上が425ぐらいでしたー。

あまり大きくないときは『text-align:center;』を色の後に足すと
センタリングされるので見栄えがよくなるかもなー

ちなみに、今オレが使ってるブラウザだと色しか変わらん(；・∀・)
なので大きくしたときはＩＥ起動じゃ！

と、そんなことより早よ仕事せねば・・・

デカイ文字

さて、今日はここまで。
明日は、幼稚園で餅つきで、嫁が当番で行かなきゃいけないんで
その間、ちゃ〜すけの子守り（9：00〜13：00）のためお休みですー。

これから明日の分仕事しなきゃなんで21時ぐらいまではいますよー。
あんまりちょっかいださないでねー♡

【画像】文字の回りこみ

昨日、途中になっちゃった続きです。
改行が効かないのでテーブル組んで改行させます

	ちゃ〜娘。生後２日。
	あまり赤ちゃんを病室へは移動しませんでした。
	産まれた日は雪がいっぱい降ってました。
ちゃ〜すけ生後１日。
こっちの病院はすぐに病室に移動。
ほとんど母親と一緒にいたようです。
梅雨の中休みでいい天気でした♪

||<#FFFFFF' ` `||
||<#FFFFFF' rowspan=5 style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_0?20051208094005,280, )]]
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``ちゃ〜娘。生後２日。
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``あまり赤ちゃんを病室へは移動しませんでした。
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``産まれた日は雪がいっぱい降ってました。
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;vertical-align:top;``ちゃ〜すけ生後１日。
||<#FFFFFF' rowspan=9 style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_1?20051208094005,280, )]]
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;vertical-align:top;``こっちの病院はすぐに病室に移動。
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;vertical-align:top;``ほとんど母親と一緒にいたようです。
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;vertical-align:top;height:100px;``梅雨の中休みでいい天気でした♪

背景色をつけると改行の部分が白く残るので背景なしの方がいいと思います

『rowspan=』で縦方向の結合をしてます。説明は⇒こちら
間の改行の分も結合しなきゃらならないので２行の場合は『３』です。
その先１行増えるごとに『２』づつ足してください。

上の例はセルの高さを指定してないので横の画像の高さに対して
３行均等の高さが割り当てられます。

下の例は最後の行に残ってる分の高さを与えてあげて、上の方に詰めてます。
【今回は数値適当に100にしてます(；・∀・)】

やっぱ、なんか面倒だなーと思ってたらSUZUTAさんのトコで
引用２や引用３が使えることがわかりました

	ちゃ〜娘。生後２日。 あまり病室へは移動しませんでした。 産まれた日は雪がいっぱい降ってました。

	ちゃ〜すけ生後１日。 こっちの病院はすぐに病室に移動。 ほとんど母親と一緒にいたようです。 梅雨の中休みでいい天気に産まれました♪

||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_0?20051208094005,280, )]]
||{{{
ちゃ〜娘。生後２日。
あまり病室へは移動しませんでした。
産まれた日は雪がいっぱい降ってました。
}}｝（←最後のも半角にしてください）
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_1?20051208094005,280, )]]
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;vertical-align:top;``{{{:
ちゃ〜すけ生後１日。
こっちの病院はすぐに病室に移動。
ほとんど母親と一緒にいたようです。
梅雨の中休みでいい天気に産まれました♪
}}｝（←最後のも半角にしてください）

幅は広がりましたが、高さは指定出来ませんでした。
左側に説明を書くのはできませんでした。

画像を並べて表示（img使用）

今まで説明してきた方法ではなく、画像のサイズ指定で説明した方法で。。。

ちゃ〜娘。生後２日	ちゃ〜すけ生後１日
どっちも同じ顔だし(笑)全然見分けつきません(；・∀・)

||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_0?20051208094005,250, )]]
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_1?20051208094005,250, )]]
||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``ちゃ〜娘。生後２日
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``ちゃ〜すけ生後１日
||<#FFFFFF' ` `||
||||<#FFFFFF' style=padding:0px;text-align:center;``どっちも同じ顔だし(笑)全然見分けつきません(；・∀・)

[[attached(番号)]]だったのを[[img(URL,幅,高さ)]]に変えただけです(笑)
最後の行は、セルの結合をしてます「||」が２つ多いでしょ？

こんなこともできますよ。

	ちゃ〜娘。生後２日。この病院はあまり赤ちゃんを病室へは移動しませんでした。
ちゃ〜すけ生後１日。こっちの病院はすぐに病室に移動。ほとんど母親と一緒にいたようです。
どっちも同じ顔だし(笑)全然見分けつきません(；・∀・)

||<#FFFFFF' ` `||
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_0?20051208094005,280, )]]
||<#FF9999' style=padding:0px;width:280px;text-align:center;``ちゃ〜娘。生後２日。この病院はあまり赤ちゃんを病室へは移動しませんでした。
||<#FFFFFF' ` `||
||<#33FF99' style=padding:0px;width:280px;text-align:center;vertical-align:top;``ちゃ〜すけ生後１日。こっちの病院はすぐに病室に移動。ほとんど母親と一緒にいたようです。
||<#FFFFFF' style=padding:0px;width:280px;text-align:center;``[[img(http://img.blogs.yahoo.co.jp/ybi/1/81/3f/charge_72/folder/136019/img_136019_18868702_1?20051208094005,280, )]]
||<#FFFFFF' ` `||
||||<#FFFF66' style=padding:0px;text-align:center;``どっちも同じ顔だし(笑)全然見分けつきません(；・∀・)

文字のバックに背景色を指定。【最初の６桁の英数字です】
画像の横に文字を書く場合は自動的に高さ方向の真ん中に表示されます。
ので、２段目は【vertical-align:top】で上に行くように指定。
下にしたい場合は『bottom』ですね。
改行はできないのでどうしてもという場合はスペースで調整して下さい

スペースで調整なんてしないで改行したい場合は。。。
セルの縦結合を使います。。。

って説明書いてたらケツが切れちゃったから続きは、また明日にします
ご要望があればね！