- 2014-7-21
- Update 2018-5-7
- Web
見出しデザインを変えよう！
みなさんこんにちは！ミュンヘンのWeb担当mak utsunomiya(@munchen_stil)です！このサイトで使っているテーマ「TCD Gorgeous」のデザインをとっても気に入っている私ですが、少なからず不満に感じている部分がないわけではありません。
それが見出しのデザインです。今回は、CSSなんてほとんど触ったことがない私が、デザイン変更を行った果敢とも無謀とも呼べる挑戦記であります。不安もあったのですが、記事が増えれば増えるほど後で修正するのも大変だという事で、思い立ったが吉日で実行に移しました。
今までの見出し
基本的に文字のサイズが違うだけのシンプルな見出しになっています。シンプルがゆえにどのようなデザインのサイトにもマッチするのですが、H3はともかくH4ともなれば、見出しなのか？というくらいわかりにくいです。 見出しタグを使えば使うほど、なんとなく文章の中に見出しが埋もれてしまうような気がします。
ここで区切りたいと思う所が分かりにくかったんですよね。
今回の見出しのデザインは！
このデザインにたどり着くまでにはいろいろ試してみましたが、シンプルな感じでso good！やないですか^^
見出しの中には非常に凝ったデザインのものが多く、ソースコードをサンプルとして提示しているブログも沢山あり、どれにしようか迷いもあったのですが、今回採用したデザインは非常にシンプルなものです。
リボンやメタル風などかっこいいものもありましたが、サイトのデザインと合わなければおかしいですしね。統一感と言うのは大切なんじゃないかと思うわけです。
先頭にちょっとした装飾があるくらいなら、自己主張もほどほどに、それでいて見出しという事は分かるというちょうどいい感じではないかと個人的には思います。
上記のCSSはこんな感じ！
TCD GorgeousにはカスタムCSSがありますので、そちらにコードを追加する事でデザインに反映されます。何処を変更したのかもわかりやすいですね。CSSを触る場合は事前にバックアップをとっておいた方が良いかと思います。
H2見出し
/*カスタムh2*/
h2 {
border-left: 1px solid #353a40;
margin-left: -15px;
padding: 10px 15px;
}
H3見出し
/*カスタムh3*/
h3 {
border-left: 2px solid #353a40;
padding: 3px 15px;
}
H4見出し
/*カスタムh4*/
h4 {
border-left: 2px solid #8dd0d9;
padding: 1px 15px;
}
問題発生！
あ・・・あああ～・・・。
トップページがおかしい・・・。
どうやらこのコードのままでは、他のHタグが使われているところまで装飾が出てしまう。という事で以下のコードに変更しました。先頭に.customを付けただけですがこれで何とかいけそう。customは別の文字に変更しても問題ありません。その場合は、HTMLとCSS両方変更するのを忘れないでくださいね。
投稿ページの見出し部分は普通のHタグではなく、以下のHTMLで見出しを囲ってあげる必要があります。過去記事が多ければ後で変更するのは大変です・・・。
見出し2サンプル
HTML
<h2 class="customh2">見出し2サンプル</h2>
CSS
/*カスタムh2*/
.customh2 {
border-left: 1px solid #353a40;
margin-left: -15px;
padding: 10px 15px;
}
見出し3サンプル
HTML
<h3 class="customh3">見出し3サンプル</h3>
CSS
/*カスタムh3*/
.customh3 {
border-left: 2px solid #353a40;
padding: 3px 15px;
}
見出し4サンプル
HTML
<h4 class="customh4">見出し4サンプル</h4>
CSS
/*カスタムh4*/
.customh4 {
border-left: 2px solid #8dd0d9;
padding: 1px 15px;
}
今回使用したコード
border-left
このコードで、見出しに線を付けます。leftがついてるので、左側に線が来るようになります。手練れになれば、見出し全体を囲む事も出来ます。
solid
上記の線の種類を設定します。solidは1本線、doubleにすると2本線など、様々な設定ができます。
#353a40
線のカラーを設定します。お好みで設定しましょう。
margin-left
見出しの外側の余白の設定です。難しそうですが、pxを変更すると見出しの左右位置を変更できるという感覚で設定してみました。
H2タグにしか設定していませんが、｜の位置をここで設定してあげました。取り合えず、このサイトではH2タグのみメインカラムの端っこにしたくて-15pxにしています。
なにも設定しなければ、H3と同じ位置に表示されます。
padding
見出しから上下左右の余白の設定です。marginと似ていてこんがらがっちゃってますが、paddingで枠線までの余白を設定し、枠線の外側の余白をmarginで設定してあげるといった感じです。
CSSが良く理解できてないので、感覚でやってます。もともと、どんなものでも説明書は後で読む感覚派の私なので、完全には説明できないところがもどかしいですが、参考になれば幸いです。
まとめ
CSSの知識がほとんどないので、夜を徹してネットサーフィンしてしまいました。コードを変更する、プレビュー見る、の繰り返しで本当に疲れた・・・。
これを機にCSSの勉強を始めようかなと本気で思い始めた今回のネタでした。
