このページでは、TCD016 Chillの色んな文字装飾を試してみたいと思います。

Chillって、何にも詳細ページの装飾用の仕組みないんだね。さびしすぎ！

と思ってたら、ちゃんとありました。どこにも解説ないけど。

これはh1です。

これはh2です。

これはh3です。

これはh4です。

これはh5です。

これはh6です。

通常見出しは何もデザインなし。class指定するとデザインが入るという仕組みのようです。それって一般的なこと？

見出しにデザイン付けたい場合はこうやります。

見出し

これは見出しその１

<h3 class="news_headline1">これは見出しその１</h3>

ってやると出せます。

これは見出しその２

こちらは、

<h4 class="news_headline2">これは見出しその２</h4>

フォントの大きさ

text70
text80
text90
:
:
text210
text220

ノーマルフォントの70%サイズから、220%サイズまで。

これが７０％だ
そしてこれがオレの２２０％だッ！

<span class="text70">これが７０％だ</span>
<span class="text220">そしてこれがオレの２２０％だッ！</span>

引用部分を小さくしたいとかの目的で、blockquoteとかdivとかで使うのかな。

ボタン

ボタン１
ボタン２
ボタン３

<a href="#リンク先" class="button">ボタン１</a>
<a href="#リンク先" class="button2">ボタン２</a>
<a href="#リンク先" class="button3">ボタン３</a>

文字色

赤色
青色
緑色
オレンジ色
黄色
ピンク
灰色

<span class="red">赤色</span>
<span class="blue">青色</span>
<span class="green">緑色</span>
<span class="orange">オレンジ色</span>
<span class="pink">ピンク</span>
<span class="gray">灰色</span>

背景色

背景が黄色
背景が青
背景が赤

<span class="bg-yellow">背景が黄色</span>
<span class="bg-blue">背景が青</span>
<span class="bg-red">背景が赤</span>

右寄せ、左寄せ、中央寄せ

align1: 中央寄せ

align2:　右寄せ

align3: 左寄せ

<div class="align1">
TCD016は女性っぽいイメージの
テーマなんですよ。
その美しさたるや、目を疑いますよ。
</div>
<div class="align2">
TCD016は女性っぽいイメージの
テーマなんですよ。
その美しさたるや、目を疑いますよ。
</div>
<div class="align3">
TCD016は女性っぽいイメージの
テーマなんですよ。
その美しさたるや、目を疑いますよ。
</div>

divじゃなくても、class指定に”align1″とか入れればOK。

回り込み

これって、class指定することあるのかな？回りこみ解除は使うかもね。

r-flo: 右に画像の回り込み
l-flo: 左に画像の回り込み
f-clear: 回り込み解除

<div class="f-clear">
右に画像　左に文章回り込み。
<img class="r-flo" src="http://tcd016chill.sukkiris.com/wp-content/uploads/2014/09/007-300x199.jpg" alt="007" width="300" height="199" class="alignnone size-medium wp-image-54" />
そうだ！明日からは、Chillを使ってサイトを作ろう。
明日から。明日から本気だす。
今日は寝ます。
</div>

<div class="f-clear">
左に回り込み。
<img class="l-flo" src="http://tcd016chill.sukkiris.com/wp-content/uploads/2014/09/007-300x199.jpg" alt="007" width="300" height="199" class="alignnone size-medium wp-image-54" />
そうだ！明日からは、Chillを使ってサイトを作ろう。
明日から。明日から本気だす。
今日は寝ます。
</div>
<span class="f-clear"></span>

使い方これでいいのかな。

行間指定

使うのかな、これ。pタグとかのclass指定に使うと、行間が指定した大きさになる。20px～25px。

lh20
lh21
lh22
lh23
lh24
lh25

ノーマル行間

ほら、みてみて、行間がねぇ。
こんなに、
変わるんだよぉ。
わかる？

lh20行間

ほら、みてみて、行間がねぇ。
こんなに、
変わるんだよぉ。
わかる？

lh25行間

ほら、みてみて、行間がねぇ。
こんなに、
変わるんだよぉ。
わかる？

ノーマル行間
<p>
ほら、みてみて、行間がねぇ。
こんなに、
変わるんだよぉ。
わかる？
</p>
lh20行間
<p class="lh20">
ほら、みてみて、行間がねぇ。
こんなに、
変わるんだよぉ。
わかる？
</p>
lh25行間
<p class="lh25">
ほら、みてみて、行間がねぇ。
こんなに、
変わるんだよぉ。
わかる？
</p>

デフォルトはすごい行間大きいね。読みやすさ重視かな。

margin, pading （余白）調整

余白あけたいとか、詰めたいとかいうときに使うみたい。

m0: マージン上下左右０
mt0: マージン上側０
mr0: マージン右側０
mb0: マージン下側０
ml0: マージン左側０

数字の部分は、0～80まで、5刻みで指定可能。（0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80)

p0: パディング上下左右０
pt0: パディング上側０
pr0: パディング右側０
pb0: パディング下側０
pl0: パディング左側０

なんだろ…表の調整とか、ブロック並べるとか、凝ったことやるときに使うのかな。どんな例を書けばいいか思い付かないや。

って感じで。

なんだよ！けっこうイケてるじゃん！
ちゃんと使い方書いといてよ！頼むよ、デザインプラスさん！

よく使うものは、addQuickTagに登録しておきましょう。

取り消し線はこんな感じ。使わないかな？取り消し線なんて。

リンクはこんな感じ。ちょっと目立ちづらいけど、調和してていいのかな？

表はこんな感じ	まあ
こんな	もんかなぁ。
とりあえず、スッキリした印象	飾り気はないね

引用はこんな感じ。一応、デザインされてるんだね。

リスト

• リスト１
• リスト２
• リスト３

順番つきリスト

1. リスト１
2. リスト２
3. リスト３

こんなふうにぐっと、画像を左にして文字を回りこんでみました。この場合って、「右に回り込み」って呼ぶのかな？ それとも「左に画像」？ まあ、「左に画像」のほうがわかりやすいよね。

 

今度は、「右に画像」のケースだよ。

ちゃんと見やすく「回りこんで」いるみたいだね。結構結構。まあ、このへんはできてて当たり前の「基本」っていう感じだね。

そんな感じ。装飾系プラグインを入れて派手派手にするのもいいけど、上のやつだけを使って、調和した感じに仕上げるのがいいかもね。

• tweet
•