 最近、続けざまに若い女子から質問を受けました。
『背景Ｗｉｋｉで文字を左寄せにしたいんだけど、もう少し文字を内側に出来ませんか？』 というものです。 右寄せなら何とか微妙な位置に文字を配置する事が出来ていたものの、どうしても 左寄せの場合の方法が解らず・・・。 考えた挙句、昨日、ようやく閃きましたので記事にさせて頂きます！ 右寄せ
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_47250574_51?1237243821);background-repeat:no-repeat;width:550px;height:470px;text-align:right;color:#FFFFFF;word-spacing:530px;line-height:12pt'``ココに文字。 文字は右寄せになります。 文章は全て繋げて書き、 改行したい場所に 「全角スペース」を挿入して下さい。 文字の大きさは変えていません。 [http://blogs.yahoo.co.jp/xxxaoiaxxx/ リンク]も貼れます。|| 左寄せ
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_47250574_51?1237243821);background-repeat:no-repeat;width:550px;height:470px;text-align:left;color:#FFFFFF;word-spacing:530px;line-height:12pt'``ココに文字。 文字は左寄せになります。 文章は全て繋げて書き、 改行したい場所に 「全角スペース」を挿入して下さい。 文字の大きさは変えていません。 [http://blogs.yahoo.co.jp/xxxaoiaxxx/ リンク]も貼れます。|| コレを微妙な位置（少し内側）に配置したい場合には『padding:●●px』を付加します。
（ココでは50pxとします。） すると、文字が50px分内側に寄ります。 ココからがポイント！！ 上の作業だけでは右側と下側にそれぞれ50px分の余白が出来てしまいます。 paddingによって押しやられた土台（||<#FFFFFF'style)がその分はみ出してしまうためです。 そこで、画像の幅(width)と高さ(height)を調整する必要が出てきます。 paddingの数値×2倍(ココでは100px)をwidthとheightの数値から差し引いて下さい。 こちらの例の場合ですと、画像の横幅(width)が550px、縦幅(height)が470pxですので、 width:450px;height:370pxという風に文法を書き換えます。 この時、『word-spacing』の数値もwidthと同じ数値に書き換えて下さい。 word-spacing:450px 以上を実行すると、以下のような位置に文字が配置されます。 右寄せ
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_47250574_51?1237243821);background-repeat:no-repeat;width:450px;height:370px;text-align:right;padding:50px;color:#FFFFFF;word-spacing:450px;line-height:12pt'``ココに文字。 文字は右寄せになります。 文章は全て繋げて書き、 改行したい場所に 「全角スペース」を挿入して下さい。 文字の大きさは変えていません。 [http://blogs.yahoo.co.jp/xxxaoiaxxx/ リンク]も貼れます。|| 左寄せ
||<#FFFFFF'style='background-image:url(http://img2.blogs.yahoo.co.jp/ybi/1/65/89/xxxaoiaxxx/folder/1553976/img_1553976_47250574_51?1237243821);background-repeat:no-repeat;width:450px;height:370px;text-align:left;padding:50px;color:#FFFFFF;word-spacing:450px;line-height:12pt'``ココに文字。 文字は左寄せになります。 文章は全て繋げて書き、 改行したい場所に 「全角スペース」を挿入して下さい。 文字の大きさは変えていません。 [http://blogs.yahoo.co.jp/xxxaoiaxxx/ リンク]も貼れます。||  |
>
- コンピュータとインターネット
>
- インターネット
>
- ネットサービス
[〉これの文字をもうすこし上にできませんか？
2009/8/18(火) 午後 9:13
こんにちは！
いつも勉強になります。
転載させてください！
ポチ
2009/9/11(金) 午前 10:45
はじめましてｗ
この記事転載させてください(^O^)／
ポチっと
[ verriki ]
2009/10/1(木) 午後 5:36
転載
[ - ]
2009/10/7(水) 午後 8:07
転送ｗ
2009/10/8(木) 午前 9:19
転載させてくださいね♪
凸ポチッ♪
2009/10/18(日) 午後 7:02
試してみます！！！転載です・。＋
[ よみぃ ]
2009/10/25(日) 午後 7:26
はじめまして！！
すごいですね！！こういう微妙にするのに苦労してたんです(>_<)
これでできます！
ありがとうございました★
傑作 ファンポチ
[ みなち ]
2009/11/18(水) 午後 3:43
転載＠
2010/1/3(日) 午後 9:49
はじめまして^^
すごく分かりやすかったです!!ありがとうございます＞＜
でも、左寄せは少し難しいですね．．．
もう少し慣れてから挑戦しよーと思います!!
傑作
[ ひゆね ]
2010/1/5(火) 午後 4:07
この文法 スゴイですね♪
ぜひ使わせて下さいね＾−＾
いつも ありがとうございます m(_ _)m
凸 ポッちん☆
2010/1/16(土) 午後 6:16
初めまして<(_ _)>
とても分かりやすくて凄いです
ファン凹します
あの、ぃま加工画像をやってみたいと思ってるんですが
やり方が分からないんですが分かりますか？
[ ※ごめんなさい ]
2010/1/22(金) 午後 10:26
転載します！！
2010/2/6(土) 午後 9:06
分かりやすい説明です。勉強になります。
使わせてください。
ブログが楽しくなりました。
2010/2/18(木) 午後 1:19
すごいです!!
勉強になりました^^
ありがとうございました!
[ - ]
2010/2/22(月) 午後 2:58
すごいです！！
転載させていただきます
！
[ 優夜 ]
2010/2/27(土) 午後 7:39
転職＆けさくですっ
[ 閉鎖 ]
2010/5/23(日) 午後 0:08
待ってました･･(((すみませんいきなり
勉強になりました。転載していきます。
傑作＠
2010/9/13(月) 午後 6:04
転載させてください、ポチ☆
[ - ]
2010/9/14(火) 午後 0:37
転載します
[ - ]
2010/11/1(月) 午後 0:13