omitsublog

自分がいいと思ったもの、チャレンジしたこと、試したものなどを紹介してくブログ。いろんな分野のハンドメイドに挑戦中。クズ男ガチャの引きなら誰にも負けない自信あり

ど素人のブログカスタム [見出し編]

こんにんちは。おみつです。

前回は目次カスタムを紹介しましたが、

 

 

www.omitsu.work

 

 

見出しも可愛くカスタマイズしましたのでご紹介します。

 

 

 

 

記事に見出しをつける

ハンドメイドの事や、ブログカスタムの記事を書く時はいつも見出しを付けていましたが、そっちの方が見やすいかも~ってくらいでなんとな~くでつけていたんですよね。

見出しを全く付けずにごちゃこちゃしてる記事も多数…。

大見出し?中見出し?いいやてきとうで!!って感じで。今もですが中見出しを多用していますし、見出しのタイトルも深く考えずにつけていました。いらない空白や関係ない改行が巻き込まれていて、スッキリ綺麗に収まっていなかったり…。

でも、見出しデザインをおしゃれに可愛くしたからにはちゃんとやらなきゃ!!という意識が芽生えて、過去記事の見出しをつけていたところは編集し直しました。

 

 

 

CSSコード 

まずは自分好みのデザインにするために、CSSコードを探してコピーさせてもらいます。私は今回こちらのサイト様を参考にさせていただきました。

 

 

saruwakakun.com

 

ありがとうございます。

この中から大見出しをステッチ風に、中見出しをタグ風にしました。

 

 

 

ステッチ風

h1{
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}

 

引用元:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

 

タグ風 

h1{
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 1.3;/*行高*/
background: #dbebf8;/*背景色*/
vertical-align: middle;/*上下中央*/
border-radius: 25px 0px 0px 25px;/*左側の角を丸く*/
}

h1:before {
content: '●';
color: white;
margin-right: 8px;
}

 

引用元:CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

 

 

 

ブログにコードを貼る

コピーさせていただいたコードをブログに貼り付けます。

はてなブログ>デザイン>スパナマーク>デザインCSSに貼り付け。

コード内に書かれている日本語の説明を消します。/ から / まで。

(おまじないってなんだろ…?)

 

 

 

 

アレンジ編集 

大見出しはh3、中見出しはh4

 はてなブログでは大見出しはh3で中見出しはh4になります。なので、コード内のh1をh3だったりh4に変更して、見出しに反映させます。

 

 

 

・カラーの変更

大見出しのステッチ風デザインはコードの上から2行目と3行目を#DEB887に変更。

中見出しのタグ風デザインはコードの6行目の背景色を#ffe4e1に変更しました。


f:id:omitsublog:20181212151019j:image

 

 

 

タグ風見出しは短いタイトルで

アレンジ編集というより、記事を書く際の注意点なんですが…。

タグ風見出しに長いタイトルをつけると、タイトルが2行になってします。それがすっごく微妙な見た目になってしまいますので、タグ風見出しは短めタイトルにした方がいいと思います。特に私は中見出しにタグ風デザインを採用しましたので、一言くらいのタイトルがいいなと思いまして、過去記事の見出しも全部直しました。その方がスッキリするのでオススメです。

 

 

 

 

最後に  

最終的にコードは以下のようになりました↓

 

[大見出し]
f:id:omitsublog:20181212151103j:image

 

[中見出し]
f:id:omitsublog:20181212151111j:image

 

 

 

ブログデザインがおしゃれになればなるほどやる気が芽生えますね。

次はどこをいじろうかなぁ??

 

 

おみつ。