世の中そんなもの

日々の生活のどーでも良さそうなことに悩みが尽きない人の備忘録。ただの日記だよ。

はてなブログの見出しのデザインを変更したい

 

記事書いていたらどうも見出しのデザインが今一歩なので変えたいな、と。

 

はてなブログってすごいカッコいいデザインの人が沢山いて羨ましくて、私もやりたい!って思うんだけど、なんでだろう、数多くのデザインカスタマイズ紹介サイト、コピペで簡単!なんてのがあるのに、あと一歩かゆいところに手が届かない・・・;;

 

なんでだろう、なんでだろう、なんでだろう・・・(心の声)

 

なかなか簡単にはいかないからまたメモだ。

 

あとテスト確認の為に、見出しのサンプル設定を。

 

 

 

大見出し

中見出し

小見出し

※デザインの最終更新 2018年10月10日 現在。

※これって、PC のみの反映らしいです。スマホ用は、レスポンシブルデザインではないので駄目みたい。

 

 

 ↓ ↓ ↓ 参考メモはここから ↓ ↓ ↓

ちょっと面白い参考があったのでそこは引用にさせてもらいました。

 

はてなブログの大見出しは「h2タグ」ではない!? - つなろっく さんから引用。

h2 見出しの設定がない、という説明が画像付でわかりやすかったです。

カスタムCSSにおしゃれな見出しコードを追加して、ブログを表示させてみたのですが、h2見出しが表示されないのです。

  ~ 中略 ~

HTMLで見出しコードを設定して表示させてみるとこのようになります。

f:id:pea-nut:20180501174807p:plain

 こちらは、はてなブログの見出しタグを設定したものです。

f:id:pea-nut:20180501175522p:plain

見出しタグはこのように設定されているようです。

「大見出し」=「h3タグ」

「中見出し」=「h4タグ」

小見出し」=「h5タグ」

 

内容追加

Web アイコンを使うとかなり可愛いと知りました。

でも、使うのにちょっと大変。。サイト設定のコツ?がいるようです。

  ←こんな風に埋め込む時はHTMLベースで。

見出しデザイン見本
https://saruwakakun.com/html-css/reference/h-design


web アイコンについて
https://saruwakakun.com/memo/hatena-font-awesome


使い方
https://saruwakakun.com/html-css/basic/font-awesome


はてなで使用する場合
https://saruwakakun.com/memo/hatena-font-awesome


色見本
https://www.color-sample.com/colors/2889/

 

その他の参考 

 

 

ブログタイトルのCSS 

/*### タイトル ###*/
#title{ text-shadow:1px 1px 2px #ffffff,-1px -1px 2px #ffffff,1px 1px 20px #ffffff;
}

で、ブログタイトルに影付けられます。
ただ・・なぜか?フォントの色は変えられませんでした。
下記の参考サイトでも、ブログタイトルのカスタマイズについて書いてあるけど、色だけはなぜか変わりませんでした。Pro じゃないからなのか、他の要素が邪魔しているのか2019年現在未解決。

 

参考サイト:

  

  過去記事