deCo..boCo..

でこぼこな人生。もっと楽しく…。

個性が大事?コピペで使える見出しデザイン19選!【はてなブログ】

見出しデザインを変えてみたいけど「どうしたら良いか分からない。」という方も多いと思います。

実はブログを始めた当初の私もそう思っていました。

『見出しデザイン』の変更は、自分のブログに個性を出す方法の1つだと思います。

今回は『はてなブログ』を運営している方々が、コピペするだけで使えるおススメの見出しデザインを幾つかご紹介していきます。

なるべくコピペするだけで使えるように、PC版・スマホ版それぞれのコードをのせておきますので、良かったら参考にしてみて下さい。

f:id:nishi244455666:20170804234556p:plain

はしがき

コードの挿入場所でつまづいてしまった方は下のボタンを押してください。

PC版とスマホ版のコード挿入場所をそれぞれご説明していますが、コピペ場所を把握している方は飛ばして下さい。

 コードの挿入場所はこちら!

①はてなブログダッシュボード画面を開きます。
②左側のタブの『デザイン』をクリックします。

③PC版の見出しを変更したい場合はスパナマークをクリックします。一番下にある『デザインCSS』の欄にコピペをしていきます。

④スマホ版の見出しを変更したい場合は右の端末風なアイコンをクリックします。中段付近の“記事"の中にある『記事上』もしくは『記事下』にコードをコピぺします。

また今回ご紹介するコードは全てはてなブログの大見出しである『h3』で掲載しています。

ですので、中見出しで使いたいという方はコードの『h3→h4』に、小見出しで使いたい方は『h3→h5』に各自で書き換えてから、コピペを行ってください。

それではご自分のブログテーマ、ジャンルに最適な見出しデザイン探しの旅へ行ってらっしゃいませ! 

 

シンプルなデザイン

 まずは基本的かつシンプルなデザインをご紹介していきます。

下線

見出しに下線を引いたものです。主張し過ぎず、使う場所を選ばないデザインですね。

『border(ボーダー)』という箇所の『px』の値を増やすと線が太くなり、減らすと線が細くなります。また『#』の後の数字では色を指定しています。

 スマホのコードはこちら!

<style>
h3{
border-bottom: solid 3px black;
}
</style>

 

上下線

上のデザインに線を1本足しただけのデザインですが、雰囲気はグッとオシャレに見えますね。こちらも主張し過ぎないシンプルなデザインです。

 スマホのコードはこちら!

<style>
h3{
 color: #1a1a1a;/*文字の色*/
 padding: 0.5em 0;
 border-top: solid 3px #1a1a1a;/*上のライン*/
 border-bottom: solid 3px #1a1a1a;/*下のライン*/
}
</style>

 

破線

あまり目立たないデザインですので、大見出し(h3)よりも中見出し(h4)の方が活躍してくれそうですね。

ちなみにコードの『dashed』を『dotted』に書き換えてあげると点線になります。

 スマホのコードはこちら!

<style>
h3{
border-bottom: dashed 3px #000000; /*線の色の変更*/
}
</style>

 

線で囲む

見出しを囲むことで視認性が上がり、より伝えたいことが明確になるのではないでしょうか?

サンプルは黒なので圧迫感がありますが、カラーコードを『パステルカラー』などに変更すると可愛い感じになりそうですね。

 スマホのコードはこちら!

<style>
h3{
color: #1a1a1a;/*文字の色*/
padding: 0.5em;
border: solid 3px #1a1a1a;/*線の色*/
}
</style>

 

左にワンポイント

こちらはブログでよく見かけるデザインの1つですね。サンプルはピンク系で可愛さをイメージしてみましたが、青系などに変更するとオシャレ系になりそうですね。

汎用性の高いワンポイントのデザインはおススメです!

 スマホのコードはこちら!

<style>
h3{
padding: 0.25em 0.5em;
color: #1a1a1a;/*文字の色*/
background: transparent;
border-left: solid 5px #ff8e8e;/*左のワンポイント*/
}
</style>

 

背景色のみ

こちらもブログで人気のデザインです。非常にシンプルなデザインですが、これまでのデザインに比べると圧倒的に目立っていますね。

女性の日記やブログなどの大見出しにおススメです!

 スマホのコードはこちら!

<style>
h3{
background: #ffc1c1;/*背景の色*/
padding: 0.5em;
border-radius:0.5em;/*角を丸く*/
}
</style>

 

背景色+下線

背景色のみだと味気ない…。

と、感じている方はアンダーラインのアクセント付けたこちらがおススメです!

カスタマイズについてですが、アンダーラインの色は同系色であり背景より濃い色を選ぶと全体的にまとまった色合いになります。

 スマホ用のコードはこちら!

<style>
h3{
background: #ffc1c1;/*背景の色*/
padding: 0.5em;
border-bottom:solid 5px #ff7f7f;/*アンダーラインの色*/
}
</style>

 

スタイリッシュなデザイン

ここまではシンプルなデザインをご紹介してきましたが、ここからは少し凝ったデザインの見出しをご紹介していきます。

あなたのブログの個性を引き出せるようなデザインと出会えますように…。

斜めストライプ下線

ただのアンダーラインでは物足りない…とお考えのあなたにおススメ!

斜めにストライプ模様が入ったアンダーラインはとても個性的だと思います。

かといって主張しすぎているわけでもないので、様々な場面で活躍してくれることでしょう。

色を青系に変えるとかっこ良いイメージの見出しになりそうですし、赤と黒を織り交ぜてもオシャレで良いかもしれませんね。色々カスタマイズに挑戦してみてください!

 スマホ用のコードはこちら!

<style>
h3{
color: #1a1a1a;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #ffd6d6, #ffd6d6 3px, #fff9f9 3px, #fff9f9 6px);
}
</style>

 

左端折り返し

こちらは背景色の応用デザインですね。見出しの左端を折り返したようなデザインに加え、見出しの下端に影を付けることで立体感があるデザインの見出しとなっています。

使いどころは難しいかもしれませんが、とにかく目立ちますね!

 スマホ用のコードはこちら!

<style>
h3{
color: #ffffff;
line-height: 20px;
position: relative;
padding: 10px;
background: #000000;
box-shadow: 10px 0 0 0 #000000, -10px 0 0 0 #000000, 0 3px 3px 0 #696969;
}
h3:before {
content: " ";
position: absolute;
top: 100%;
left: -10px;
width: 0;
height: 0;
border-width: 0 10px 10px 0;
border-style: solid;
border-color: transparent;
border-right-color: #333333;
}
</style>

 

左角の折り返し

今度は端ではなく、角を折ってみた見出しデザインです。色合いを変えれば手紙のような可愛らしい見出しになるかもしれませんね。

 スマホ用のコードはこちら!

<style>
h3{
position: relative;
background: #ffd8b2;
box-shadow: 0px 0px 0px 5px #ffd8b2;
padding: 0.2em 0.5em;
color: #1a1a1a;
border:solid 1px #ffd8b2;
}
h3:after {
position: absolute;
content: '';
left: -7px;
top: -7px;
border-width: 0 0 15px 15px;
border-style: solid;
border-color: #fff #fff #ffbf7f;
box-shadow: 1px 1px 1px #696969;
}
</style>

 

左右に二重線

見出しを左右から挟み込むような感じの二重線が特徴的なデザインです。

ブログではあまり見かけませんが、個性を出すには最適なデザインの1つだと思います。

 スマホ用のコードはこちら!

<style>
h3{
position: relative;
display: inline-block;
padding: 0 55px;
}
h3:before, h3:after{
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 45px;
height: 2px;
border-top: solid 1px black;
border-bottom: solid 1px black;
}
h3:before {left:0;}
h3:after {right: 0;}
</style>

 

最初の文字を大きく表示

当ブログの大見出しにも使用しているデザインです。

見出しの最初の文字だけを大きく表示するようになっています。

但し見出しが2行になるとデザイン的にかっこ悪くなってしまうので、長い文章の見出しが多い方は避けた方が良いでしょう。

 スマホ用のコードはこちら!

<style>
h3:first-letter {
font-size: 2em;
color: #1a1a1a;
}
h3{
border-bottom:solid 2px #1a1a1a;
}
</style>

 

 ←矢印の下線

シンプルな下線と思いきや、←矢印のようなデザインになっておりとても個性的なデザインです。

目立つので大見出しや中見出しでの運用がおススメ!

当ブログでは先程の文字を大きく表示するデザインと組み合わせて、大見出しで使用しています。

 スマホ用のコードはこちら!

<style>
h3{
position: relative;
padding-left: 25px;
}
h3::before{
position: absolute;
content: '';
bottom: -3px;
left: 0;
width: 0%;
height: 0;
border: none;
border-left: solid 15px transparent;
border-bottom: solid 15px #1a1a1a;
}
h3:after {
position: absolute;
content: '';
bottom: -3px;
left: 10px;
width: 96%;
border-bottom: solid 3px #1a1a1a;
}
</style>

 

かわいい系のデザイン

最後に可愛い系のデザインをご紹介します。コスメやネイルなどの美容ブログやペット系のブログに合いそうな見出しデザインをご紹介します!

斜めストライプ背景

背景をストライプにすることで、単色の背景と比べると更に視認性が増すと思います。サンプルではパステルカラーのピンク系の配色で可愛いイメージにしてみました。

 スマホ用のコードはこちら!

<style>
h3{
line-height: 20px;
padding: 10px;
position: relative;
}
h3:after {
content: " ";
width: 100%;
height: 5px;
bottom: 0;
left: 0;
position: absolute;
background: repeating-linear-gradient(45deg, #ff7f7f, #ff7f7f 3px, #ffd6d6 3px, #ffd6d6 6px);
}
</style>

 

吹き出し風

こちらもブログで良く見かけるデザインですね。

吹き出し風のデザインになることで一気に親近感が湧く感じがします。

まるで書き手と読み手が対話しているかのような吹き出し風のデザインは日記などを書いている方にもおススメです!

 スマホ用のコードはこちら!

<style>
h3{position: relative;
padding: 0.6em;
background: #ffbf7f;/*吹き出しの色*/
border-radius:0.5em;
}
h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #ffbf7f;/*吹き出しの色*/
width: 0;
height: 0;
}
</style>

 

ラインマーカー風

学生時代にお世話になった方も多い?蛍光ラインマーカーをイメージした見出しデザインです。

マーカーのように目立ちますが、シンプルなデザインなので色々な使い方が出来そうですね。色をブルー(#8ec6ff)ピンク(#ff8e8e)オレンジ(#ffc68e)などに変えても面白いかもしれませんね。

 スマホ用のコードはこちら!

<style>
h3{
background: linear-gradient(transparent 65%, #ffff8e 65%);
}
</style>

 

ステッチ風

見出しの背景色を刺繍で装飾したようなデザイン。

女性のブログで見かけることが多いですね。インパクトがとても大きいので、大見出しでの運用がおススメです!

 スマホ用のコードはこちら!

<style>
h3{
color: #ffffff;/*文字の色*/
border: 2px dashed #ffecef;
background: #F9B8CD;/* 背景の色 */
border-radius: 8px;
box-shadow: 0 0 3px 3px #F9B8CD;
margin: 0 0 1.5em;
padding: 0.5em 0.8em;
}
</style>

 

グラデーション下線

下線の左端から右端にかけて色がグラデーションしているデザインです。

サンプルはトロピカルジュースをイメージして『黄色からピンク』へと少しずつ色を変化させています。

色を変えるとガラリと印象が変わるかもしれませんね。

 スマホ用のコードはこちら!

<style>
h3{
position: relative;
padding: 0.25em 0;
}
h3:after {
content: "";
display: block;
height: 4px;
background: -moz-linear-gradient(to right,#ffff89, #ff8989);
background: -webkit-linear-gradient(to right,#ffff89, #ff8989);
background: linear-gradient(to right,#ffff89, #ff8989);
}
</style>

 

背景色+上下線

ありそうでなさそうな個性的なデザインの見出しです。控え目な配色ですが、かなり目立つので大見出しでの運用がベストでしょうか。

 スマホ用のコードはこちら!

<style>
h3{
color: #ffbf7f;
text-align: center;
padding: 0.25em;
border-top: solid 2px #ffbf7f;
border-bottom: solid 2px #ffbf7f;
background-color:#fff7ef;
}
</style>

 

おわりに。

今回は『はてなブロガーがコピペですぐに見出しデザインを変更できる』を目標に19種類のコードをご紹介していきました。

この記事でお伝えしたのは星の数ほど種類がありそうなデザインのほんの一部だと思います。ある程度の知識がある方はカラーや線の種類を変えてみて自分なりにアレンジしてもいいかもしれませんね。

見出しデザインの変更は、ブログの個性をアピールする要素の1つです…。