大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

記事中の見出しをわかりやすくカスタマイズ【はてなブログ活用法】

(✿✪‿✪。)ノコンチャ♡

前回までの作業が完了したら、

ほぼ『あなた好みのブログ』になったと思います。

今回は、

記事の執筆で重要になる『見出し』について、

読み手にわかりやすくするためにカスタマイズしていきます。

「学ぶ・覚える」というよりは、

気に入ったものを「真似る」ための記事です。

そこからは、

あなたの工夫でいかようにでもなります。

f:id:success-life:20210928022009p:plain

見出しのカスタマイズ

 

はてなブログでは、

  • <h3></h3> 大見出し
  • <h4></h4> 中見出し

この見出し部分を CSS を使って装飾していきます。

 

見出しの CSS を探す

☑ブログを開く

☑右クリックして【検証】をクリックする

☑ HTML・CSS 検証画面の左上の矢印ボタンをクリックする

☑『大見出し』にカーソルを移動します。

 

f:id:success-life:20210928185416p:plain

見出し①

 

ハイライトされている範囲が、

「見出しの設定」でされているということです。

 

☑クリックする

 

『 .entry-content h3 』で記述されていることは分かりましたよね。

 

f:id:success-life:20210928185638p:plain

見出し②

 

頭を抱える程の設定がされていますが、

あきらめずやっていきましょう(笑)。

 

  font-size: 数値 ;

 

フォントサイズですから「文字の大きさ」ですね。

通常の文字の大きさに対して、

140%の大きさということです。

 

  margin: 数値 数値 数値 数値 ;

 

CSS の右側の図と照らし合わせてみると理解しやすいです。

 

カーソルを見出しに移動させた時に、

ハイライトされた「色」と一致しています。

また4つの数値は、

前回お話しした通り「上・右・下・左」の順序です。

 

つまり、

対象要素「見出し」の周りの隙間部分と考えていいです。

数値が違うのは「単位」が違うからです。

  (この「単位」については、また後で解説していきます)

 

  text-align:center;

 

これも前回お話しした「真ん中に位置決めする」ことです。

 

  line-height: 数値 ;

 

「行の高さ」の指定です。

 

後の細かい解読は後々学びましょう。

更に下までスクロールします。

 

f:id:success-life:20210928192459p:plain

見出し③

 

『 .entry-content h3:after 』というものが出てきました。

 

『 before 』『 after 』については、

後ほど解説します。

 

見出しに線を引く

  border-top: 2px dashed #3b3b3b;

  border-bottom: 2px dashed #3b3b3b;

 

『 border-top 』で「上」

『 border-bottom 』で「下」に線を表示します。

 

では早速試してみましょう。

カスタマイズCSS にコピペして追加記述しましょう。

 

f:id:success-life:20210929003445p:plain

見出し④

 

変更を保存して確認しましょう。

 

f:id:success-life:20210929003557p:plain

見出し⑤

 

大見出しの上下に「破線」が表示されました。

何か窮屈に見えませんか?

 

  padding: 15px 0;

 

を追加してみましょう。

 

f:id:success-life:20210929003948p:plain

見出し⑥

 

また同様に変更を保存して確認してみましょう。

 

f:id:success-life:20210929004055p:plain

見出し⑦

 

大見出しらしく貫禄が感じられるようになりました。

 

ここでは『 dashed 』を使って「破線」を表示しました。

  • 実線 『 solid 』
  • 点線 『 dotted 』

の指定もできます。

もちろんですが、

線の太さ・色も変えることができます。

 

もう一つやってみましょう。

アンダーラインを引いてみましょう。

 

  width: 136px;

  left: 110px;

  border-top:3px solid #6bf

 

これを記述してみましょう。

 

 

簡単な見出しデザイン

次に、

中見出しを簡単な見出しデザインで装飾してみましょう。

 

  background:#eae2cf;

  border-left:15px solid #6bf;

  padding-left:18px

 

中見出し行の背景色を指定して、

左に幅 15px の色を付けています。

また、

見出しと色付けした線が重ならないようにしています。

 

それでは、

これを追加記述してみましょう。

 

f:id:success-life:20210929183658p:plain

見出し⑧


では確認してみましょう。

 

f:id:success-life:20210929183854p:plain

見出し⑨

 

いかがですか?

私自身このタイプは好きです。

 

2トンカラーのボーダーをデザイン

前項で少し触れましたが『擬似要素』を使って、

少し凝った見出しにしてみましょう。

 

指定したセレクタの前「 before 」後「 after 」に、

内容を挿入することができるようになるのです。

 

これを使って、

色の重なったボーダーを表示してみます。

 

  .entry-content h3 {

     font-size:140%;

     position:relativ;

     border-bottom:6px solid #eae2cf;

     padding-bottom:3px;

  }

 

大見出しのボックスに下線を表示します。

padding-bottom はテキスト下の余白設定です。

 

  .entry-content h3:after {

     content:' ';

     position:absolute;

     background-color:#26979f;

     left:0;

     bottom:-6px

     width:30%;

     hight;6px

  }

 

border-bottom 』『 hightの数値は同じにします。

また、

bottomがにはマイナスを付けた同じ数値です。

これらが一致していることで、

重ねて表示することができます。

 

f:id:success-life:20210929210652p:plain

見出し⑩

 

確認してみましょう。

 

f:id:success-life:20210929210741p:plain

見出し⑪

 

こんな感じに表示されました。

 

相対位置と絶対位置

今回初めて出てきてビックリしませんでしたか?

  • 『 relative 』   :相対位置
  • 『 absolute 』 :絶対位置

 

何の指定もない場合は、

基本的には画面左上が起点としています。

 

今回の場合は、

大見出しが親ボックスとなり「 relative 」の position です。

後から「 absolute 」の position を持った要素は、

position 指定されている親ボックスが起点になるのです。

 

面倒ですが、

この position 指定をすることで、

前に話したように同じ数値の設定で表示させることができるのです。

 

さいごに

ちょっと難しくなってきましたが大丈夫ですか?

はじめにも言っていたように、

「真似る」ための例題です。

 

全部理解するには相当勉強しなければなりません。

 

 

まずは、

自分のブログを「自分好み」にカスタマイズできるようにしましょう。

きっと、

ブログ活動のモチベーションが向上することでしょう。

 

今回の内容は、

サイドバーの見出しにも利用できますので、

やってみてください。

 

次回は、

『ブログの幅』についてお話します。

お楽しみに待っていてください。

 

www.newinfo.press

 

ではまたお会いしましょう。