多分もうみんなやってるんだろうなぁ。と思うけど、ちょっと自分なりのまとめ。
続きを読む
まず事の発端は「日記がデコメで投稿できました!」ってmixiの通達から
俺「デコメ使えるんだったら文字のレイアウトも変更できるようになったんじゃね?」
ということで試してみたら、上手く行った……!
いやぁ仕様さえ分かってしまえばこちらのもんです。
これからレイアウトバリバリ変更しちゃいますよ。多分。
技術的な話は続きから。
とりあえず出来ると分かったこと
文字のレイアウトはインライン要素で変更する。
ただしサイズ変更と色変更を同時にしたい時はspanタグを別にしなければならない。
コレは多分、文字を大きくするときだけdecoLargeクラスを使うような仕様になっているからだと考える。
さて、こうなっただろうか。
例えば以下の内容を日記に書き込んだとする。
<hr>
<div>当たり前だけどこの中はブロック要素になっている。</div>
文字のレイアウトは<span style="color:#FF0000">インライン要素で変更する。</span>
ただし<span class="decoLarge" style="font-size:20px">サイズ変更と色変更を同時にしたい時はspanタグを別にしなければならない。</span>
コレは多分、<span class="decoLarge" style="font-size:25px"><span style="color:#FF0000">文字を大きくするときだけdecoLargeクラスを使うような仕様になっているから</span></span>だと考える。
<hr>
以上の文をmixiの日記にそのままコピペしたら以下のようになるはずだ。
当たり前だけどこの中はブロック要素になっている。
文字のレイアウトはインライン要素で変更する。
ただしサイズ変更と色変更を同時にしたい時はspanタグを別にしなければならない。
コレは多分、文字を大きくするときだけdecoLargeクラスを使うような仕様になっているからだと考える。
さて、こうなっただろうか。
とりあえず今回わかったところはここまで。またちょっとずつ調べていってみようと思う。
今のところ分かった文字のレイアウト変更方法まとめ
<div class="inner" style="background-color:#000000;"></div>
→innerクラスを挿入することで携帯の画面幅になる。
→background-colorを指定することで背景色を設定できる。<div class="centerElement" style="text-align:center;"></div>
→文字を中央揃えにする
<div class="rightElement" style="text-align:right;"></div>
→文字を右揃えにする。
<decomail_img src="9524507">
デコメを表示する……らしいけどこの数字の羅列がよく分からん
<span style="color:#000000"></span>
→文字色の変更。#以下の6桁の数字を変更すると色が変わる
<span class="decoLarge" style="font-size:xx-large"></span>
→文字サイズを大きくする。ピクセル指定も出来る。
<span class="decoSmall" style="font-size:xx-small"></span>
→文字サイズを小さくする。
<hr>
→区切り線。そのままで行ける。