h2やh3の見出しデザインを可愛くしたい！見出しに点線を入れるのに必要な呪文と初心者向けの注意点。

photo credit: Klara Kim via photopin cc

未だにCSSが苦手な凛(@rin_wan)です。

先日WPtouchを使ったスマホサイトのカスタマイズを行った記事を書きました。

第2弾！スマホ用表示変換プラグインWPtouchをカスタマイズしてみた。 | りんろぐ。

そこで、本当は見出しデザインに点線を出したかったけど失敗した話を書きました。

そんな私に週末救世主が現れたという素敵な続編です。

見出しデザインって？

見出しというのはh1、h2、h3といった段落の頭になる部分のタグの事です。

WordPressを使っていると自動的にタイトルがh1になるので、その後はh2からを使うようになります。

何も飾らないと大きな太い文字が見出しになるのがデフォルトのようです。Wordにもある段落見出しってやつです。でもそれじゃ可愛くないからもっと可愛くしたいなーというのが乙女心。

デザインに優れたBlogでは可愛い画像をつかって見出しをカスタマイズしたり、何やら凄い感じになってたり。

こんなサイトを見るとへー！これ見出しだったのね！！と驚くほど。

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

でもまずは何も難しい事せずに可愛く出来たらいいなーと思うのがメンドクサガリの習性。ということで基本的なCSSをつかって見出しを飾る事をやってみる事にしました。

参考にしたのは毎度お世話になっておりますこちらのサイト。

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

理想のデザインと躓き

私がやりたかったのはこんな感じ。

h2：左端は細いストライプ2本。下は点線。
h3：左端は少し太めの1本。こっちも下は点線。

そして出来あがったのがこれ。

点線どこだｗｗ点線を出す為の呪文も書いたはずなのに出てこない。謎。

あ、ちなみに点線を出す為の呪文はこれ。

見出しを箱だと考えた時の底辺に点々をこの色で出してあげるよーっていう素敵呪文。これだけで可愛い点線出るなんてお手軽ｖ(*´∀｀*)ｖ

救世主の登場！！！

悩んでいた事もすっかり忘れさっていた先日の事。

いつも遊んで下さるティカさん（@thikasa）からこんなご指摘が。

@rin_wan りんさん、rinwan.com/archives/1862この border-bottom の件ですが、前に全角スペース入ってませんか？

— ティカさん (@thikasa) 2013年4月7日

え？スペース？もう一度自分の記事見直してみる。

あれｗズレてるｗそう、思い起こせばそんな事した記憶がよみがえる。

元々CSSのタグなんて手打ちしたくないメンドクサガリ。

↓

点線を出す呪文をコピーしてCSSファイルにぺたりと貼る。

↓

なんか貼りつけたものだけ頭が出てる。

↓

えいやっとスペースキーで1行ずらす。

↓

頭が揃ったヾ(o´∀｀o)ﾉ

↓

CSS上書きっと！

↓

点線出ずorz

( ●´艸`)ｳﾌﾌﾌﾌ。さーて何がまずかったんでしょうか！

多分この記事を目にしたベテランさん達は驚きのあまり目が二重になると思われます。そう、CSSを弄る時にひらがな入力だめぇ！！！頭を揃えるのにスペースキーなんて使っちゃだめぇ！！！

Tabキー使いましょー！（でいいんですよね？）これぞ素人(＠´,,・ω・,,｀＠)いやーティカさんのご指摘に感謝感謝です！！

成功例

と言う事でテーマのCSSファイルを開いてスペースを消します。CSSファイルを開いてまた発覚した事実。スペースキー使った所が全部「?????」表示になっていた事。

いやーいい勉強になりましたよ！！と言う事で正しい魔法の呪文はこちら。

h2のCSSはこちら。

h3のCSSはこちら。

これを上書きしてやると…

ちゃんと点線でたーヾ(*´∀｀*)ﾉ

まとめ

・CSSを弄る時は英語入力で！
・頭を揃える時はスペースキーじゃなくてTabキー！！
・反映しない時はCSSファイルを再確認！！！

基礎がないグラグラした薄い板の上になりたっております、当Blogりんろぐ。デザイン。

こんな私にCSS教えてやりたくて倒れそうなベテランの方、いらっしゃいましたら凛(@rin_wan)までご連絡下さいｗ

次の記事もお楽しみに～(*｀･ω･)ゞ