2017.11.21

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

ひつじ

賢威7

おおかみくん

賢威7の見出しってもう少しアレンジできたりもするの？

ひつじくん

うん、それはできるよ〜！一緒にカスタマイズしてみようか！

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

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

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

Contents

h2見出しのCSSカスタマイズ
h3見出しのCSSカスタマイズ
まとめ

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

賢威7

シンプルなh2デザイン

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

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

.main-body h2{
        padding: 15px 18px !important;/*枠を広げる*/
        border-radius: 3px;/*角を丸く*/
        background-color:#181944;/*色を変える*/
}

CSSの追記方法

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

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

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

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

.main-body h2{
        padding: 15px 18px !important;/*枠を広げる*/
        border-radius: 3px;/*角を丸く*/
        background-color:#181944;/*色を変える*/
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);/*影をつける*/
}

吹き出し風の見出し

吹き出しの見出し

.main-body h2{
    position: relative;
    padding: 15px 18px !important;/*枠を広げる*/
    border-radius: 3px;/*角を丸く*/
    background-color:#181944;/*色を変える*/
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);/*影をつける*/
}

.main-body h2:after{
    border-top: 15px solid #181944;/* 出っ張り部分の色 */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    position: absolute;
    bottom: -15px;
    left: 5%;
    z-index: 90;
    content: "";
}

点線付きの見出し


.main-body h2 {
    position: relative;
    border: none;
    padding: 15px 18px !important;
    border-radius: 3px;
    background-color:#181944;/*色を変える*/
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

.main-body h2:before,
.main-body h2:after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    border-top: 1px dashed;
}

.main-body h2:before {
    top: 3px;
    left: 0;
}

.main-body h2:after {
    bottom: 3px;
    left: 0;
}

ライン入りの見出し

ライン入りのh2見出し

.main-body h2 {
    position: relative;
    border: none;
    padding: 15px 18px !important;
    border-radius: 3px;
    background-color:#181944;/*色を変える*/
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
}

.main-body h2:before,
.main-body h2:after {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    border-top: 1px dashed;
}

.main-body h2:before {
    top: 3px;
    left: 0;
}

.main-body h2:after {
    bottom: 3px;
    left: 0;
}

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

シンプル見出し

シンプルなh3見出し

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

.main-body h3{
	padding: 10px 15px;/*枠を広げる*/
	background-color: #fff;/*背景を白く*/
	border-bottom: 3px solid #181944 !important;/*線の色を変えている*/
}

CSSの追記方法

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

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

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

シンプル見出し

シンプルなh3見出し

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

.main-body h3{
	padding: 8px 15px;/*枠を広げる*/
	background-color: #fff;/*背景を白く*/
	border-left: 5px solid #181944;/*左に線をつける*/
	border-bottom: none;/*下の線を無しに*/
}

破線の見出し

破線見出し

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

.main-body h3{
	padding: 10px 15px;/*枠を広げる*/
	background-color: #fff;/*背景を白く*/
	border-bottom:2px dashed #181944;/*破線をひく*/
}

破線との組み合わせ

見出し

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

.main-body h3{
    padding: 8px 15px;/*枠を広げる*/
    background-color: #fff;/*背景を白く*/
    border-left: 5px solid #181944;/*左に線をつける*/
    border-bottom: 1px dashed #181944;/*下の線を無しに*/
}