休日ぶらぶら散歩ブログ

休日ぶらぶら散歩ブログ

探検、散歩、購入した物などをツラツラ書いていきます。

【初心者向け見出しの変え方】はてなブログで見出しデザインを変更して見やすくしよう。【デザインカスタム】

f:id:cb125250zzr250:20190721235407p:image

はてなブログを書き始めて半年程度になりましたが、改めて記事編集についてまとめていきます。

ブログを編集したり、今後増やす時に分かりやすいように自分用の記事でもあります。

ブログを始めたばかりの人向け記事です。僕も初心者です。一緒に振り返っていきましょう。

プログラミングのようで避けている人も多いかもしれませんが、コピー&ペーストで簡単にできます。

今回の参考ブログはこちら。非常に豊富なタイトルがまとめてあり、迷ってしまいますね。

 

 

 

 やり方

今回取り扱う見出しは上下二重線。

f:id:cb125250zzr250:20190721154910p:plain

 シンプルなものを採用しました。色が多いと目が疲れるためです。

一例なのでぜひ上記ブログからご自身のお気に入りを見つけてみてください。

下記にも私のおすすめデザインをリンクさせています。

 

 

まずは希望デザインのデザインCSSをコピーしましょう

範囲を選択して右クリックしてコピーをするか、範囲選択後にCtrl+Cボタンでコピーしましょう。

  1.  /*H4タイトルデザイン*/
  2. .entry-content h4{
  3. padding: 10px;
  4. border: 0;
  5. border-top: 3px solid black;
  6. border-bottom: 3px solid black;
  7. }

 

上記の1~8までをコピーします。(数字の1~8は含みません)

1に関しては/*  */で囲い込んだ部分でなんのプログラムか示しています。

/*〇〇〇〇*/

※〇の中は任意。この形式を無視するとCSSが無効になることがあります。

CSSに慣れた人なら問題ないのですが、久しぶりに見ると、なんのためのコマンドかわからなくなり、消すこともできず結果として無駄なコマンドが増えてくためです。

今回ははてなブログ中見出しのデザインを変えるので、中見出しのCSSに対応したH4タイトルデザインとでもしておきます。ここは各個人自由に変えて大丈夫です。

 

2に関しては今回h4と入っていますが、この数字を変えることで任意の見出しデザインを変えることができますよ。

f:id:cb125250zzr250:20190721160810p:plain

デザインを変えたい見出しのタグを変えることでどの見出しもデザインを変更できます。はてなブログにはなぜかh2タグがないのですが、それはまたの機会に…

 

 デザインCSSに貼り付けよう

f:id:cb125250zzr250:20190721163740p:plain

画像はパソコンからの画像です。

はてなブログの設定画面の左メニュー【デザインを押しましょう。

f:id:cb125250zzr250:20190721164242p:plain

その後真ん中の【工具マークを押しましょう。】

下にデザインCSSが見えましたね。

そこをクリックしてください。

f:id:cb125250zzr250:20190721164244p:plain

さらに押して大画面にしておきましょう。

f:id:cb125250zzr250:20190721164347p:plain

一番下のわかりやすいところに先ほどのコードを貼り付けましょう。

右クリックして貼り付けを押すか、Ctrl+Vで貼り付けられます。

私のでいうところの169行目から175行目までが今回の記事の内容です。

 

先ほど/*〇〇〇〇*/で囲って何のプログラムかわかるようにしとこうと推奨したのはこのためです。

こまめにタイトルを付けておかないとあとから振り返った時広大な文字列におぼれ、見失います。

f:id:cb125250zzr250:20190721164353p:plain

最後に保存をしておしまいです。お疲れさまでした。

 

こちらの方のブログは非常に美しく綺麗なデザインが多いです。今回引用させていただいています。

現在の当ブログの中見出しはこちらのサイトの下記を使用しています。CSS中の水色【h1】を希望の見出し番号に変更し、上記手順を踏めば適応されます。

h1 {
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
h1:before, h1:after {
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: black;
}
h1:before {
  left: 7px;
}
h1:after {
  right: 7px;
}

 

にほんブログ村 にほんブログ村へ
にほんブログ村

おわり