はてなブログのデザイン「Minimalism」で見出しデザインを変更する方法

はてなブログの「Minimalism」で見出しデザインを変更する方法

ブログ開始3ヶ月目に、はてなブログのデザインを「Minimalism」に変更して、カスタマイズしてみたシリーズ。

今回は、そのステップ6：

記事内の見出しデザインの変更

についてご紹介します。

f:id:kayoko_cafe:20200402154907j:plain

見出しデザインとは

「見出しデザイン」は、はてなブログの記事を書くときの画面にある「見出し」です。

私は、大見出し・中見出し・小見出しの3種類を使っているので、この3種類のデザインを変更しました。

見出しデザインの参考資料

見出しのデザインの変更は、以下からコードを使わせて頂きました：

✳︎　変更したデザインテーマ「Minimalism」の「使い方・注意事項」ページに載っている、「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」にあるもの

✳︎　アフィリエイトで夢を叶えた元OLブロガーが教える　本気で稼げるアフィリエイトブログ　収益・集客が1.5倍UPするプロの技79【電子書籍】[ 亀山ルカ ]

✳︎　「コピペOK！シンプルHTMLでCSS見出しデザイン10選！」

見出しデザインのhtmlタグ

今回変更した見出しのデザインは、以下のようにしたんですが：

大見出し

中見出し

小見出し

このような色とデザインにするのに、上記の参考サイトや本にあったコードを少しカスタマイズする必要があったので、それを記載しておきます。

まず、はてなブログでの3つの見出しのhtmlタグは：

大見出し＝h3

中見出し＝h4

小見出し＝h5

であることを知っておいて。

見出しデザインで使う色

そして、使いたいカラーのコードを、web色見本サイトの「原色大辞典」というサイトで選んでおきます。

ちなみに、このブログの見出しに使っている色は、「wheat」という名前の、カラーコード「#f5deb3」です。

見出しデザインの変更方法

大見出しのデザイン変更方法

「CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選」の、1．シンプル系にある「単純な背景色をつける」にある「コードを表示」をクリック

　↓

表示されたCSSのコードをまるっとコピー

h1 {
  /*線の種類（実線） 太さ 色*/
  border-bottom: solid 3px black;
}

↓

はてなブログの管理画面→デザイン→工具アイコン→｛｝デザインCSS→入力欄をクリックして、一番最後に貼り付け

　↓

・一番最初の「h1」を「h3」に変更する

・一番最後の文字「black」を自分が選んだ色の名称またはコードに変更する

　↓

「変更を保存する」をクリックして完了です！

中見出しのデザイン変更方法

「アフィリエイトで夢を叶えた元OLブロガーが教える　本気で稼げるアフィリエイトブログ　収益・集客が1.5倍UPするプロの技79【電子書籍】[ 亀山ルカ ] 」の、技49にある

「見出しの下線の左側にワンポイントを入れた例」で紹介されていたコードをコピーしてメモ帳にまるっと貼り付ける

.entry-content h3{
color: #333333;
padding: 10px 10px;
border-left: 10px solid #ea618e;
border-bottom: 3px solid #ea618e;
}

　↓

・一行目の「h3」を「h4」に変更する

・3カ所ある、＃から始まるカラーコード（6桁の英数字）を、自分が選んだ色のコードの英数字に全て変更する

・変更が終わったものを、再びまるっとコピー

↓

はてなブログの管理画面→デザイン→工具アイコン→｛｝デザインCSS→入力欄をクリックして、一番最後に貼り付け

　↓

「変更を保存する」をクリックして完了です！

小見出しのデザイン変更方法

この超シンプルな小見出しの設定がなぜか大変でした。(^^;)

では、行きます！

「コピペOK！シンプルHTMLでCSS見出しデザイン10選！」の、「丸アイコンの見出しデザイン」にある以下のCSSコードをまるっとコピーしてメモ帳に貼り付ける

 h2.circle {
    position: relative;
    display: block;
    padding: 0.2em 0 0.2em 1.2em;
}

h2.circle::before {
    position: absolute;
    top: 0.5em;
    left: 0;
    display: block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 50%;
    background: #35bdcc;
    content: "";
}

　↓

・1行目と7行目にある「h2」は「h5」に変更し、その後にある「.circle」はどちらも削除する

・下から3行目にある「background:」の後にある、＃から始まるカラーコード（6桁の英数字）を、自分が選んだ色のコードの英数字に全て変更する

・上から4行目の「padding:」の後の数値を、「0.2em 0 0.2em 1.5em;」に変更する

・9行目の「top:」の後の数値を「0.2em;」に変更する

・そのさらに下3・4行目にある「width」と「height」の数値を、ともに「1.2em;」にする

・変更が終わったものを、再びまるっとコピー

↓

はてなブログの管理画面→デザイン→工具アイコン→｛｝デザインCSS→入力欄をクリックして、一番最後に貼り付け

　↓

「変更を保存する」をクリックして完了です！

これで、3種類の見出しのデザインを変更できました。ヽ(´▽｀)/