mikotohodo-三言ほど-

くだらない雑談と小さな情報を日常に

MENU

見出しに飽きる、見出しをリセットする、記事別に見出しのデザインを変える。

カッコいいレイアウト、自分が納得できるテーマになかなか出合えない方はわりと、いや結構いるのではないでしょうか。

しかし、それと同じかそれ以上に『な~んか違うんだよな~』と悩ませてくれるのが見出しデザインではないか、そんなことを思います。

なんか違うと思う「見出しのデザイン」

見出し1つ1つのデザインを決めてCSSに入れるわけですが実際に使ってみると、良いと思うときもあれば、『ちがう、なんかちがう』と思うときもあります。

忌まわしき<h2></h2><h3></h3><h4></h4>に悩みまくりでもう嫌になっちゃうくらい。


ちょっと大袈裟かな。


見出しのデザインをリセットする

テーマに組み込まれた見出しをリセットするわけです。『あの人が使ってる見出しと同じにならない~ナンデー』なんて方はリセットです。リセットと言ってもリセットボタンがある訳ではなく、設定されているデザインを標準値する。と言ったところなのでしょうか。

.entry-content h2,
.entry-content h2:before,
.entry-content h2:after {
 content: none;
 background: none;
 background-color: none;
 border: none;
 border-radius: 0;
 }
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
 content: none;
 background: none;
 background-color: none;
 border: none;
 border-radius: 0;
 }
.entry-content h4,
.entry-content h4:before,
.entry-content h4:after {
 content: none;
 background: none;
 background-color: none;
 border: none;
 border-radius: 0;
 }


上記のコードをデザインCSSの中に入れると、見出しを使った時に装飾の無い文字が見出しとなり表示される。

そして自分が好きそうな、好みのデザインの見出しを探します。『見出し CSS』等で検索すると沢山出てくると思います。


見出しに飽きる

「この見出しいいじゃん!」なんて思って使う訳ですが、それが不満に変わる日が突然やってくる。


『な~んか違うんだよな~』


なんか違うんだよな病が発動し、悩む、記事を書く度に悩む。欲求不満なんじゃないかってくらいそればかり考える。

そうなると新たな見出しを探してCSSに入れていたモノと入れ替える。

これをやると過去の記事で使っていた見出しのデザインも全て変わってしまう

非常に頭いたいです。


記事別に見出しのデザインを変える

さきほどの見出しリセットのコードを記事本文に<style></style>で挟んで書くとその記事の中で使われる見出しのデザインがリセットされます。

更に『見出しのデザインを変えたい記事の中に使いたい見出しのデザインCSS』を<style></style>で挟んだ見出しリセットのコードの下に入れてあげると記事別に見出しのデザインが変わります。

例えば下のコードを記事の下に入れてあげると、この記事で使われている見出しデザインになります。

<style>
/* 見出しリセット */
.entry-content h2,
.entry-content h2:before,
.entry-content h2:after {
 content: none;
 background: none;
 background-color: none;
 border: none;
 border-radius: 0;
 }
.entry-content h3,
.entry-content h3:before,
.entry-content h3:after {
 content: none;
 background: none;
 background-color: none;
 border: none;
 border-radius: 0;
 }
/* この記事で表示される見出しデザイン */
.entry-content h2 {
 border-bottom: solid 3px black;
 }
.entry-content h3 {
 padding: 0.25em 0.5em;
 color: #494949;
 background: transparent;
 border-left: solid 5px #7db4e6;
 }
</style>


固定したデザインは飽きる

飽きた時にちょっとした気分転換に見出しのデザインを変えてみるのも良いと思います。

僕は頻繁に見出しのデザインを記事別に変えるので、見出しリセットのコードをメモ帳に入れてちゃちゃっとコピペして使ってます。

見出しに飽きる見出しをリセットする記事別に見出しのデザインを変える。でした。