りんろぐ。

女子でも分かるぷちまにあっく話。

Wordpress

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

2013/04/09

kitty friends
photo credit: Klara Kim via photopin cc

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

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

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

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


見出しデザインって?

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

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

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

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

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

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

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

理想のデザインと躓き

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

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

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

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

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

border-bottom:1px dashed #ccc;

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

救世主の登場!!!

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

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


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

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

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

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

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

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

頭が揃ったヾ(o´∀`o)ノ

CSS上書きっと!

点線出ずorz

( ●´艸`)ウフフフフ。さーて何がまずかったんでしょうか!

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

Tabキー使いましょー!(でいいんですよね?)これぞ素人(@´,,・ω・,,`@)いやーティカさんのご指摘に感謝感謝です!!

成功例

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

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

h2のCSSはこちら。

h2 {
font-size: 20px;
line-height: 26px;
margin-bottom: 18px;
border-left:7px double #FFA500;
border-bottom:1px dashed #FFA500;
padding:.6em .8em
}

h3のCSSはこちら。

h3 {
font-size: 18px;
line-height: 26px;
margin-bottom: 18px;
border-left:5px solid #FFA500;
border-bottom:1px dashed #FFA500;
padding:.6em .8em
}

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

ちゃんと点線でたーヾ(*´∀`*)ノ

まとめ

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

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

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

次の記事もお楽しみに~(*`・ω・)ゞ

スポンサードリンク

スポンサードリンク

CATEGORIES & TAGS

Wordpress,

Author:

iPhoneアプリ/語学学習/間取り図/ガジェットが大好きです!手帳と宇宙画像が最近の癒しです。WorkFlowyが好きでスマホから操作ができるアプリHandyFlowyとMemoFlowy絶賛オススメ中♡