記事書いていたらどうも見出しのデザインが今一歩なので変えたいな、と。
はてなブログってすごいカッコいいデザインの人が沢山いて羨ましくて、私もやりたい!って思うんだけど、なんでだろう、数多くのデザインカスタマイズ紹介サイト、コピペで簡単!なんてのがあるのに、あと一歩かゆいところに手が届かない・・・;;
なんでだろう、なんでだろう、なんでだろう・・・(心の声)
なかなか簡単にはいかないからまたメモだ。
あとテスト確認の為に、見出しのサンプル設定を。
大見出し
中見出し
小見出し
※デザインの最終更新 2018年10月10日 現在。
※これって、PC のみの反映らしいです。スマホ用は、レスポンシブルデザインではないので駄目みたい。
↓ ↓ ↓ 参考メモはここから ↓ ↓ ↓
ちょっと面白い参考があったのでそこは引用にさせてもらいました。
はてなブログの大見出しは「h2タグ」ではない!? - つなろっく さんから引用。
h2 見出しの設定がない、という説明が画像付でわかりやすかったです。
カスタムCSSにおしゃれな見出しコードを追加して、ブログを表示させてみたのですが、h2見出しが表示されないのです。
~ 中略 ~
HTMLで見出しコードを設定して表示させてみるとこのようになります。
こちらは、はてなブログの見出しタグを設定したものです。
見出しタグはこのように設定されているようです。
「大見出し」=「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年現在未解決。
参考サイト:
- 【カスタマイズ】コピペで簡単!タイトルのフォント&見出しを変更する方法 - まほろば暮らし
- CSSのtext-shadowで文字に影をつける方法 | 侍エンジニア塾ブログ(Samurai Blog) - プログラミング入門者向けサイト
- padding-スタイルシートリファレンス
過去記事