Blogger の「見出し」「小見出し」「準見出し」を、CSSで手軽に見栄えよく設定

2018/1/4 雑記

シェアする

見出しの書式設定

Blogger の 標準エディターに出てくる「見出し」、「小見出し」、「準見出し」を使って、手軽に見栄えよくする方法です。
※「見出し」、「小見出し」、「準見出し」は、HTMLタグの<H2>、<H3>、<H4>として扱われているので、CSSを使って書式を変更します。（SEO的にはよろしくないようですが、趣味のブログなので、お手軽さ優先でいきたいと思います）

設定の流れ

Blogger の 設定画面に行きます
左側のメニュー から「テンプレート」を選びます
「ブログで使用中」の下にある「カスタマイズ」をクリックします
「テンプレートデザイナー」が開くので

「上級者向け」→「CSSを追加」を選択します

「カスタムCSSを追加」 の 欄へ、以下のコピペします

 

/*------------------------------------------------------
見出し
------------------------------------------------------*/
.post-body h2 {
margin:0 0 30px 0;
padding:6px 4px;
border-left:5px solid #C1D37C;
background: #F4FFCC;
font-size:25px;
color:#1C1E12;
}
 
/*------------------------------------------------------
小見出し
------------------------------------------------------*/
.post-body h3 {
border-left: 5px solid #C1D37C;
margin: 30px 0 30px;
padding:4px 2px;
padding-left: 10px;
background: #EFF0E2;
font-size:18px;
font-weight: bold;
color:#1C1E12;
}
 
/*------------------------------------------------------
準見出し
------------------------------------------------------*/
.post-body h4 {
    position: relative;
    color: #1C1E12;
    background: #F4FFCC;
    font-size: 11pt ;
    border: 2px solid #464C2D;
    margin: 10px 10px 22px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
    box-shadow:2px 1px 5px 0px  #939ba7 ;
}
.post-body h4:after, .post-body h4:before {
    content: ``;
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.post-body h4:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #F4FFCC;
}
.post-body h4:before {
    left: 38px;
    border: 12px solid transparent;
    border-top: 12px solid #464C2D;
}