はてなブログ初心者、見出しに挑戦!

昨日スタートしたこのブログ。まだまだわからないことが多く、勉強のつもりで他の方々のブログを見ていたのですが、そこで新たな発見をしました。それは先輩方のブログと自分のブログを比較してみると...

 

ださい!ださすぎる!


そうなのです。
他のブログは華やかなのに対して、自分のブログはただの字の集まり...。このままではまずい。ただでさえ三日坊主なのに、ここで戦意を失ってしまっては二日坊主になってしまう...。自分もあんな華やかなブログにしたい...。


そこで色々と調べた結果....

 

見出しのカスタムに成功!

 

そこで、今日は鳥頭の自分への備忘録も兼ねて、同じくはてなブログを始めた人の役に少しでもたてるよう自分のやったことを書いていこうと思います。

 

まずはじめに見出しとはなにかですが、上記でやったように文字を強調して、ここからはこんな話だよ~と、わかりやすくすることです。...よね?

 

その他にも、検索にかかりやすくなったりの効果もあるらしいのですが、詳しく調べてないのでよくわかっていません。とにかく、ブログを美しくしたい!という一心で調べていたので、すみません。

 

 

話は本題に戻りまして、この見出しをつけるにはCSSというものをいじるのですが、CSS?なにそれ美味しいの?という方もいらっしゃると思います。大丈夫です。自分も全然わかっていません!コピペという作業ができれば簡単にできるので安心してください。

 

検索するとたくさん出てきますし、丁寧に説明してくれているブログもたくさんあります。自分も調べて「コピペするだけでできるのか!」と、思いやってみたのですが、少し手こずったので、気をつけることだけ書いていこうと思います。

 

まずは、ダッシュボード→デザイン→カスタマイズ→デザインCSS とクリックしていきます。すると、英数字が並んだ訳のわからないページが開くと思います。大丈夫です。自分も(以下略)そこの英数字の一番下につけたい見出しのコードをコピペすればいいだけです。やったのに変わらないって人は(自分もそうでした)

 

 h1

 

と、最初の文字がなっていませんか?
もし、なっていた場合はこの赤字部分を、

 

.entry-content h3

 

と、直して見てください。自分もこれに気づかずに「コピペしたのに変わらないじゃないか!」と、悪戦苦闘しました。

 

 

それでも変わらないという人は、

 

 

f:id:NOWEATHER:20170905070809p:plain

 

 

上記のように編集のままになっていませんか?これを「プレビュー」に変更すると反映されるはずです。(自分はこれに気付かず数時間無駄にしました。)

 

 

 

h3→大見出し

h4→中見出し

h5→小見出し

 

 

という感じなので、これで成功したらあとは、上でやったh3部分を変更して自分のしたい見出しを設定していくだけです。

 

 

 

最後におさらいすると、

 

 

 

先頭に.entry-content をつける

確認は編集画面ではなくプレビュー画面

 

 

 

 

こんな感じで自分は見出しのカスタムに成功することができました。本当にたくさんの方のブログを参考にさせていただきました。本当ですと、参考にさせていただいた方のブログを貼ったりしたいのですが、まだやり方がわかっていないのと、勝手に貼っていいものなのかどうかわかっていないので申し訳ございませんがこの場でお礼を言わせてください。

 

 

もし、これでもうまくいかなかった人は力になれなくてすみません。でも諦めないでください。検索してみると本当にたくさんの方がわかりやすく記事を書いてくれているので必ずうまくいくと思います。自分もまだまだやってみたいことがたくさんあるので、みなさんの記事を参考に、色々試していきたいと思います。それでは、よきはてブロ生活を!