このサイトでは、TCDのWordPressテンプレートChillをほとんどカスタマイズせずに利用しています。Chillというテーマ、最初からデフォルトで入っているCSSの気の利き方が半端ないので、一部紹介したいと思います。
カスタマイズ不要！デフォルトCSSでできること
見出しのスタイルを選ぶだけできるデザイン１０種
テーマChill付属のCSSを使うと次のようになります！
表示サンプル
<h3 class=”style3a”>見出しデザイン①</h3>
<h3 class=”style3b”>見出しデザイン②</h3>
<h4 class=”style4a”>見出しデザイン③</h4>
<h4 class=”style4b”>見出しデザイン④</h4>
<h5 class=”style5a”>見出しデザイン⑤</h5>
<h5 class=”style5b”>見出しデザイン⑥</h5>
<h6 class=”style6″>見出しデザイン⑦</h6>
<h6 class=”news_headline1″>見出しデザイン⑧</h6>
<h6 class=”news_headline2″>見出しデザイン⑨</h6>
<h6 class=”balloon”>見出しデザイン⑩</h6>
marginやpaddingもほどよく調整されていて、特にテーマをいじらなくても見やすいデザインに仕上がります。
ワードプレステーマChillのstyle.cssの中身を見ると次のようなCSSが定義されていました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* ---------------------------------------------------------------------- headline - 見出しのスタイル ---------------------------------------------------------------------- */ .post h3, .post h4, .post h5, .post h6 { line-height:1.6; } /* h3 */ .post .style3a { margin:3em 0 1.5em; padding:1.1em .2em 1em; font-size:22px; font-weight:400; border-top:1px solid #ccc; border-bottom:1px solid #ccc; } .post .style3b { margin:3em 0 1.5em; padding:1.1em .9em 1em; font-size:22px; font-weight:400; border-top:2px solid #444; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; } /* h4 */ .post .style4a { margin:2.5em 2px 1.2em; padding:.3em 0 .3em .8em; font-size:20px; font-weight:400; border-bottom:none; border-left:2px solid #444; } .post .style4b { margin:2.5em 0 1.2em; padding:.9em 0 .8em; font-size:20px; font-weight:400; border-bottom:1px dotted #aaa; } /* h5 */ .post .style5a { margin:2em 0 1em; padding:.5em .8em .3em 1em; font-weight:700; font-size:18px; color:#444; background:#f5f5f5; box-shadow:0px 2px 0px 0px #f2f2f2; } .post .style5b { margin:2em 0 1em; padding:.5em .8em .4em 1em; font-weight:400; font-size:18px; color:#fff; background:#aaa; border-radius:4px; box-shadow:0px 1px 0px 0px #f2f2f2; } /* h6 */ .post .style6 { position:relative; margin:2em 0 1em; padding:.5em .8em .8em 1.3em; color:#222; font-weight:bold; font-size:16px; } .post .style6:before { position:absolute; width:12px; height:12px; top:.5em; left:.2em; background:#222; content:""; } .post .news_headline1{ position:relative; margin:80px 0 25px 0; padding:.5em; border-left:8px solid #444; line-height:1.2; font-size:1.2em; } .post .news_headline1:after { content:""; position:absolute; bottom:0px; left:0; height:0; width:100%; border-bottom:1px dotted #ddd; } .post .news_headline2{ margin:40px 0 20px 0; padding:0 .5em; border-left:6px solid #545454; line-height:26px; font-size:1.1em;} .post .balloon { clear:both; display:block; position:relative; margin:50px 0 22px; padding:.5em 18px .5em; width:auto; min-width:115px; color:#fff; text-align:left; font-size:20px; font-weight:400; background:#666; z-index:0; border-bottom:0; } .post .balloon:after { content:""; position:absolute; bottom:-10px; left:30px; margin-left:-10px; display:block; width:0px; height:0px; border-style:solid; border-width:10px 10px 0 10px; border-color:#666 transparent transparent transparent; } |
他にも
- 囲み枠
- CSSボタン
- テーブル
- カードリンク
- フォントサイズ
- フォントカラー
- 背景色
- 配置
- 回り込み
- 画像リンクマウスオーバー時の不透明度
- テキストスタイル
- 余白
など、CSSを定義しなおす必要がないくらい様々なCSSスタイルがテーマに組み込まれています。
次は囲み枠について紹介します。
コメント