見出しのデザイン 〜WordPress Lightning（無料版） 私が見出しに使っているCSS備忘録〜

この記事は約 6 分で読めます。

〝備忘録〟とか掲げている割に、自分の中では〝忘備録〟とか言ってることもあったり､､､|•ω•｡)"…ﾅｲｼｮﾀﾞﾖ

正しくは、厳密には〝備忘録〟であっているそうなのですが、こうやって間違い言葉が流行ってしまうと、それも〝普通〟となってしまうものですよね(ﾟｪﾟ(｡_｡(ﾟｪﾟ(｡_｡*)ｺｸｺｸ

まぁそんなわけで今回は、私がこのかぢゅまるぷれいすで使っている見出しのCSS（カスタマイズ）について、それを備忘録としてこのページに書き残していきたいと思います。

思いの外、とっても有難いことにWordPressのLightning（無料版）について書いたことがけっこう好評だったりして、それは私にとっても物凄く嬉しいことなので、こうしてちょいちょい〝WordPress Lightning（無料版）〇〇〟と掲げて味を占める次第なわけです(*´艸`*)

ではサクッといきます。（備忘録なんで）

私の使っている見出しの見た目

ちなみに私はH2とH3だけカスタマイズしています。

こんな感じでそこまで特別なことはしてないのですが、例えこんな僅かなことであってもWordPressに付随している見出しのブロックからではこのようにはなりません。

本当にこんなちょこっとくらいのことなんですが、私は微妙な角っこの丸みだったり、そこでも自分のサイトで使っているメインカラーにしたり、また本当に「なんとなく」の世界だとは思うのですが、パソコン、スマホで見た時の見た目及びバランスなど、私なりにでも試行錯誤しました逸品です(๑•̀ㅂ•́)و✧

いろんなサイトを見て参考にしてやってみたのですが、意外とそのままコピペでは思い通りにならなくてですね､､､

なんとか自分で見ながら「こうかな、ああかな」とやってみた結果、なんとなく見た目だけには「よし！！」となれたのですが、もしかしたらCSSの記述の方法などはもしかたら正しくはないかも知れませんので、その辺はご了承ください(｡-人-｡)

また「なぜH4とかH5にはカスタマイズしなかったの？」という疑問が湧くと思うのですが、それには１つだけですが大きな理由があります。

それは、このサイトに設置しているサイドバーの話になるのですが、

確かH4だったかな､､､

ごめんなさい、ちょっともううる覚えで申し訳ないのですが、それにもしかしたら全員に起こることじゃないかも知れないので、個人的にはまずは「やってみよう」と思ったことをやってみてくださいと支持＆応援する派なんですが､､､

確かH4のデザインがサイドバーにある各々のウジェットの部分に反映されてしまったのです。（例えば私のサイトでなら〝最近の投稿〟とか〝カテゴリー〟とかそういった部分のところ）

本当はH4もはじめはそれまでの見出しに合わせたデザインを作っていたのですが、そこに反映されてしまうことに気付いたらなんとなくでも「しつこい」と感じ、そんなわけでH4は「そのままでいいや♪」とすぐに諦めました。

ちなみにこれが既存のH4なのですが､､､↓↓↓

H4（見本）

まぁもともと？

私のような超個人サイトではせいぜい使ってもH3くらいまでかなぁと感じていて、もはや「使わなきゃいいや♪」くらいに思ってしまっています笑

仮にもしH4を使ったところで私の目次には表示させないようにもしてあるので（あんまりうじゃうじゃしているとうざいでしょ？）なので基本的にはH4はいいかなーって感じで落ち着いています(ﾟｪﾟ(｡_｡(ﾟｪﾟ(｡_｡*)ｺｸｺｸ

そんなわけでこんな然程デザイン性のない見た目ではありますが、私的にはかなり黄金比とも言えましょうこのCSSをぜひ共有してみたいと思います^^

以下、本サイトで使用している見出しのCSS↓↓↓

H2（見本）

こちらは、

/* 見出しデザイン */
h2 {
	background: #1a5edd;
	border-radius: 5px;
    padding: 0.5em;
	font-size: 24px;
	color: #fff;
}

CSSとかいじろうとする人ならなんとなくでも見ればなんのことだかわかると思いますが、念の為記載｡｡｡

コピペしても大丈夫だと思いますが、いつも通り〝自己責任〟でよろしくお願いします！！^^

また丸々コピペしても、けっこう私も今までそうだったのですが、いざ貼り付けてみると「あれ？ずれてるやん！？」となることも多くて、なので貼り付けてもダメな場合はちょっと〝WordPress CSS 書き方〟なんて調べてもらえればすぐにそれらしい記事が出てくるのでそれで調整してみてください^^

H3（見本）

こちらは、

/* 見出しデザイン */
h3 :before,
.subSection .subSection-title:before {
	content :"\f1b0";
	font-family: "FontAwesome";
	margin-right:0.4em;
	speak: none;
	line-height: 1;
	color :#1a5edd ;
}
h3 {
	font-size : 20px;
}

H3はこんな感じなのですが、若干こっちの方が複雑かのように見えますがそんなことはありません。

というか、割と他のサイトにある記述をコピペしてもなかなか私のH3には反映されず、これなんとか自力で見つけたWordPress Lightning（無料版）での見出しH3のを指定する単語（用語？クラス？タグ？どれが適切かわからないです）で、こうじゃないとこの見た目にはならなかったのですね(ﾟｪﾟ(｡_｡(ﾟｪﾟ(｡_｡*)ｺｸｺｸ

というわけで一見は「うわっ」とちょっとやたらと長い英語表記に気後れしていまいそうですがそんな必要はありません。

ゆっくりまったりやっていきましょー♪

なんで同じH3のことなのに、〝h3 :before,.subSection .subSection-title:before（CSS書く時は多分改行した方が良いです）〟と〝H3〟と分けて書くのかは謎ですが、とりあえずこれでやると私のH3のようにはなります( *¯ ꒳¯*)♪

正直消してもうんともすんとも言わない部分があるのですが、まぁこれはこのままでいいでしょう笑

「消しちゃえ」と思う方は消してみてしまっても構わないと思いますし、個人的にはこれ１つでブログの何かが劇的に変わる！！なんてことはありえないだろ？と私自身はそう思っていますが、あくまでその辺は自己責任でお願いしますが、私はそんな風に思います。

まとめ

楽しいブログ作りを！！

内容も大事なのはわかっているけど、やっぱり見た目でも楽しみたいよね！！

何がなんだかわからなかった私もゆるゆるとでもこんなことしてたら、ちょっとずつだけどわかるようになってきました。

本当のプロに聞いたら、もしかしたら正解じゃないこともあると思うのですが、まぁ８０点そこらでも良くない？ってことでどなたかの参考になれば幸いです(｡uωu)♡

〝検証〟ってGoogleChrome使ってる人ならわかると思うんですけど、私このブログを始めてから「他のサイトは何のテーマ使ってんのかな？」とか、けっこう大手のサイトとか気になったらサイトの中身を見るのも１つの楽しみになったんですけど、みんなエラーが１つも出てないとかあの三角の中にビックリーマークが咲いてる注意マークっての？

それがついてないサイト、まだ見たことないよ？

ってことはそんな私たちは８０点でも十分だろ！！とか、私は思ってしまうのですね♪天才！！←

ってことで、人生もブログのびのびとね•*¨*•.¸¸♪

おしまいっ！！

良かったらコメントなど励みになるので書いてくれると嬉しいです！！

もし良ければその他にもいろいろと見ていってください^^

• Amazon
• YouTube
• YouTube
• X
• Instagram
• Mail