賢威7 - カスタマイズ

【コピペOK】賢威7で使える見出しを8つデザインしてみた!

賢威7
おおかみくん
おおかみくん
賢威7の見出しってもう少しアレンジできたりもするの?
ひつじくん
ひつじくん
うん、それはできるよ〜!一緒にカスタマイズしてみようか!

賢威7の見出しはほとんど完成されているのでカスタマイズしなくても使うことができます。しかし、少しでも個性を出したいならカスタマイズをしたほうが良いかもしれませんね。

そこで今回はコピペでで使える賢威7の見出しカスタマイズを7つ用意してみましたよ!

なお、この見出しはクール版以外では手直しが必要になってくる場合がございます。あらかじめご了承の上ご利用ください。

h2見出しのCSSカスタマイズ

賢威7

シンプルなh2デザイン

これは僕の使っている見出しですね。少し枠を広くして、尖っていた角を丸く削っています。

見出しはある程度シンプルなほうが読者としては見やすいと僕は思っているので、このようなデザインを採用するようにしています。

h2デザイン

CSSの追記方法

このCSSをスタイルシート(base.css)の最下部にコピペするようにしてください。そうすれば見出しのデザインを変更することができますよ!なお、見出しの色は#181944になっていますが、これはカラーコードを参考にしてお好みに変更をするようにしてくださいね!

スタイルシートに追加する

シンプルな影付きh2デザイン

少し影をつけてみました。見出しに立体感を出してみたい人はこちらを採用してみてください!

h2影付き

吹き出し風の見出し

吹き出しの見出し

点線付きの見出し

点線付きの見出し

ライン入りの見出し

ライン入りのh2見出し

h3見出しのCSSカスタマイズ

シンプル見出し

シンプルなh3見出し

ごくごくシンプルな見出しです。僕のようにシンプルに攻めるサイトならこれで十分かと思います。

CSSの追記方法

CSSの追記方法は先ほどと同様なのですがもう一度アナウンスしておきましょう。

上記のCSSをスタイルシート(base.css)の最下部にコピペするようにしてください。そうすれば見出しのデザインを変更することができます!なお、見出しの色は#181944になっていますが、これはカラーコードを参考にしてお好みに変更をするようにしてくださいね!

スタイルシートに追加する

シンプル見出し

シンプルなh3見出し

こちらもかなりシンプルな見出し。これもよく見かけますのでh3の小見出しだと読者が認知しやすいのがいいところですね。

破線の見出し

破線見出し

破線にしてみると少し遊び感が出てきますね。ポップな雰囲気のサイトにはこういった見出しも良いかもしれません。破線の太さなどは2pxの部分をいじってもらえれば変わります。

破線との組み合わせ

見出し

組み合わせデザインです。こんなのもカジュアルなサイトには特に合いそうですね!

まとめ

賢威7

賢威7で実装したい見出し8選でした!

少しシンプル目なのが多かったですが、ご期待に添えるものは見つかりましたでしょうか?シンプルなほうが読者にとって大見出し/小見出しの判別がつきやすいので僕は好きなんですよね。だからシンプル目なチョイスとなっています。

なお。クール版じゃないとデザインが少し変わってしまうかもしれませんのでその点だけはご了承ください。ご要望が多ければクール版以外の見出しも専用カスタマイズしますので、僕のTwitter宛に「おい、手抜くな!ちゃんと作れ!」って罵ってください(笑)

この記事が気に入ったら
いいね ! しよう

Twitter で