スキゾイドな「ウサキさん」の思考

1人が楽なタイプ。 考え方、思うことは、人それぞれ。 「こんな人もいるんだよ」ってだけの話。

「見出しのデザイン」CSSにコピペでOK。はてなブログ初心者のやり方

f:id:Schizoid-personality:20190915113127j:plain

見出しのデザイン

ウサキさんのブログ。見出しのデザインの設定の覚書。CSSにコピペでOK☆

設定の仕方

デザイン→カスタマイズ→デザインCSS→コピーする

 

テーマ「minimalism」

f:id:Schizoid-personality:20190916113733j:plain

f:id:Schizoid-personality:20190916113653j:plain

f:id:Schizoid-personality:20190916113610j:plain
(使用中の設定を変更しました!!)

 

大見出し h3

h3 {
position: relative;
padding: .5em;
border-left: 5px solid #7ED1E6;
}
h3:after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 2px solid #444;
}

中見出し h4

h4 {
padding: .5em;
border-left: 5px solid #7ED1E6;
}

小見出し h5

h5{
position: relative;
padding-left:2em;
}
h5::before{
content: "★";
color: #7ED1E6;
font-size:2em;
position: absolute;
left: 0;
top: -0.2em;
}

↑なんか★星の位置がズレてるんだけど、うまく調整する方法を知っている、心優しい方がいれば教えてください。。 

 仕組

仕組はよくわからんけど、h○←の数字を変えれば、見出しのサイズ(大・中・小)が変更出来る。

色とか太さも、変えれると思うけど、まだ使いこなせない…。

ウサキさんの設定をそのまま使いたいわ。って人がいれば、そのままコピーしてみてね♪

(上手くいかなかったら、ごめんね☆)

 参考にしたCSSコピペ集

見出しデザイン集

saruwakakun.com

www.okuni.me

naruhodo.repop.jp

↑とても助かりました♪

本当に、ありがとうございました☆★

色見本

www.colordic.org

www.netyasun.com

↑ウサキさんは、まだ使いこなせないけど、いつか役に立つ気がする

 [ 見出し デザイン CSS コピペ ]


ブログランキング・にほんブログ村へにほんブログ村