このサイトでは、TCDのWordPressテンプレートChillをほとんどカスタマイズせずに利用しています。Chillというテーマ、最初からデフォルトで入っているCSSの気の利き方が半端ないので、一部紹介したいと思います。
カスタマイズ不要!デフォルトCSSでできること
見出しのスタイルを選ぶだけできるデザイン10種
テーマ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 - 見出しのスタイル ---------------------------------------------------------------------- */ .posth3,.posth4,.posth5,.posth6{line-height:1.6;} /* h3 */ .post.style3a{margin:3em01.5em;padding:1.1em.2em1em;font-size:22px;font-weight:400;border-top:1pxsolid#ccc; border-bottom:1px solid #ccc; } .post.style3b{margin:3em01.5em;padding:1.1em.9em1em;font-size:22px;font-weight:400;border-top:2pxsolid#444; border-bottom:1px solid #ddd; background:#fafafa; box-shadow:0px 1px 2px #f7f7f7; } /* h4 */ .post.style4a{margin:2.5em2px1.2em;padding:.3em0.3em.8em;font-size:20px;font-weight:400;border-bottom:none;border-left:2pxsolid#444; } .post.style4b{margin:2.5em01.2em;padding:.9em0.8em;font-size:20px;font-weight:400;border-bottom:1pxdotted#aaa; } /* h5 */ .post.style5a{margin:2em01em;padding:.5em.8em.3em1em;font-weight:700;font-size:18px;color:#444; background:#f5f5f5; box-shadow:0px 2px 0px 0px #f2f2f2; } .post.style5b{margin:2em01em;padding:.5em.8em.4em1em;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:2em01em;padding:.5em.8em.8em1.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:80px025px0;padding:.5em;border-left:8pxsolid#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:1pxdotted#ddd; } .post.news_headline2{margin:40px020px0;padding:0.5em;border-left:6pxsolid#545454; line-height:26px; font-size:1.1em;} .post.balloon{clear:both;display:block;position:relative;margin:50px022px;padding:.5em18px.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:10px10px010px;border-color:#666 transparent transparent transparent; } |
他にも
- 囲み枠
- CSSボタン
- テーブル
- カードリンク
- フォントサイズ
- フォントカラー
- 背景色
- 配置
- 回り込み
- 画像リンクマウスオーバー時の不透明度
- テキストスタイル
- 余白
など、CSSを定義しなおす必要がないくらい様々なCSSスタイルがテーマに組み込まれています。
次は囲み枠について紹介します。
コメント