【ワードプレステーマChillに標準装備】便利すぎるCSSと表示サンプル – 見出し編

このサイトでは、TCDのWordPressテンプレートChillをほとんどカスタマイズせずに利用しています。Chillというテーマ、最初からデフォルトで入っているCSSの気の利き方が半端ないので、一部紹介したいと思います。

カスタマイズ不要！デフォルト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が定義されていました。

/* ----------------------------------------------------------------------
 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; }

/* ----------------------------------------------------------------------

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スタイルがテーマに組み込まれています。

次は囲み枠について紹介します。