Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

Palette★カスタマイズ解説(2)見出しの設定(色・サイズ・見出しリセット方法)

はてなテーマストア「Palette(パレット)」のカスタマイズ解説(2)です。

カスタマイズが簡単で色々なデザインができる、はてなブログのテーマ「Palette(パレット)」はこちらからダウンロードできます。
Palette (パレット) - テーマ ストア

 

第2回目の今日は「見出し」について解説します。

 

※コードは赤字の部分を変更することで色やサイズを変えられます!
※変更後のCSSは、デザイン→カスタマイズ(スパナマーク)→{}デザインCSSに挿入します。

 

 

見出し 基本の設定

見出しはh1~h6まであります。
はてなブログの編集画面で使う、通常の見出しは
大見出し→h3
中見出し→h4
小見出し→h5
となっています。

以下は、見出し全体の基本の設定です。

 

基本の文字色

h1, h2, h3, h4, h5, h6 {
    color: #454545;/*h1~h6の文字色*/
    line-height: 1.3;/*行間の高さ*/}

 

 見出しにリンクがある時の文字色

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #454545;/*h1~h6にリンクがある時の色*/
    text-decoration: none;/*下線はなし*/}

 

リンクがある時にマウスオーバーした時の色

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #d3d3d3;/*h1~h6リンクがある時のマウスオーバーの色*/}

 

文字サイズ 

レスポンシブなので、h1~h3は「PCでの表示サイズ」と「タブレットスマホでの表示サイズ」を変えています。
@media(min-width: 992px){ 〜 } で、→ PC表示は992pxより大きい場合の設定をしています。

 

/*=== h1 ===*/
.entry-content h1 {/*タブレットとスマホ表示時*/
    font-size: 1.5rem;/*1.5倍*/}
@media (min-width: 992px) {/*PC表示時*/
.entry-content h1 {font-size: 1.7rem;/*1.7倍*/}}

 

/*=== h2 ===*/
.entry-content h2 {/*タブレットとスマホ表示時*/
    font-size: 1.4rem;}
@media (min-width: 992px) {/*PC表示時*/
.entry-content h2 {font-size: 1.5rem;}}

 

/*=== h3 ===*/
.entry-content h3 {/*タブレットとスマホ表示時*/
    font-size: 1.2rem;}
@media (min-width: 992px) {/*PC表示時*/
.entry-content h3 {font-size: 1.3rem;}}

 

/*=== h4 ===*/
.entry-content h4 {font-size: 1.1rem;}

 

/*=== h5 ===*/
.entry-content h5 {font-size: 1rem;}

 

/*=== h6 ===*/
.entry-content h6 {font-size: .9rem;}

 

デザイン

現在の見出しデザインの解説です。
赤字部分を変更することで色や線を変えられます。

※このデザイン変更とは別に自分で用意した見出しを使う場合は、一旦、テーマの見出しをリセットしてください。リセットの仕方は次の項で解説しています。

 

h1 見出し

 

/*h1 見出し*/
.entry-content h1{
padding: .5em;/*文字の周りの空白*/
background: #f5f5f5;/*背景色*/
border-bottom: 5px solid #000;/*下線*/}

 

h2 見出し

 

/*h2 見出し*/
.entry-content h2{
padding: .5em;
background: #f5f5f5;/*背景色*/
border-left: 5px solid #000;/*左側の線*/}

 

h3 大見出し

 

/*h3 大見出し*/
.entry-content h3{
padding: .5em;
background: #f5f5f5;/*背景色*/
border-top: 2px solid #000;/*上の線*/
border-bottom: 2px solid #000;/*下線*/}

 

h4 中見出し

 

/*h4 中見出し*/
.entry-content h4{
padding: .2em .5em;
border-left: 5px solid #000000;/*左の線*/}

 

h5 小見出し

(h5だけCSSデザインの設定が上記と少し違います。)

/*h5 小見出し ===================================*/
.entry-content h5 {/*ポジションや空白を指定*/
position: relative;line-height: 1.4;
padding:0.25em 1em;display: inline-block;top:0;}

/*h5の前後に8pxの空白''を入れる↓↓*/
.entry-content h5:before,.entry-content h5:after{ 
position: absolute;top: 0;content:'';
width: 8px;
height: 100%; display: inline-block;}

/*空白の左側に"["を付けている↓↓*/
.entry-content h5:before{
border-left: solid 1px #000;/*色*/
border-top: solid 1px #000;/*色*/
border-bottom: solid 1px #000;/*色*/
left: 0;}

/*空白の右側に"]"を付けている↓↓*/
.entry-content h5:after{
  border-top: solid 1px #000;/*色*/
  border-right: solid 1px #000;/*色*/
  border-bottom: solid 1px #000;/*色*/
  right: 0;}
/*h5 小見出し ここまで ============================*/

 

見出しをリセットする方法

/*==============================================
見出しをリセットする方法 
 ・別の見出しに変更する場合、現在の設定をリセットする
 ・下のCSSを挿入し、それよりも後ろに別の見出しのCSSを入れる
  (CSSは後に書いてある方が優先される)
================================================*/

 

素敵な「見出し」は、こちらのサイトが参考になります!
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

 

/*h1 見出し リセット*/
.entry-content h1{
background: #fff;
border-bottom: none;}

 

/*h2 見出し リセット*/
.entry-content h2{
background: #fff;
border-left:none;}

 

/*h3 大見出し リセット*/
.entry-content h3{
background: #fff;
border-top: none;
border-bottom :none;}

  

/*h4 中見出し リセット*/
.entry-content h4{
border-left: none;}

 

/*h5 小見出し リセット*/
.entry-content h5:before,
.entry-content h5:after{ 
display:none}

 

Palette★カスタマイズ解説(1)基本の設定(全体・フォント・背景色)

 

f:id:zuboraca:20180722002249j:plain