こんにちはKeiです。
ブログのカスタマイズは、コピペでOK！なんてHTMLやCSSを公開してくれているありがたいサイトのお世話になっています。
でも！やっていてどうも上手くいかない時があるんですよね、何かが間違ってるんだけど、その何かが解かんない！
そんな時の備忘録です！
「お困りごと」はてなブログの見出しが上手く反映しない！
現在利用しているはてなブログテーマ「DUDE」の見出しはデフォルトではこうなっています。
オシャレなんだけど、少し寂しいかな？
なのでカスタマイズしてみたんだけど、思ってるの（コピペしたデザイン）じゃない！
実際は、H3は背景の淡いブルーのみH4は下線のみにハズ！
なんだかよくわかんなかったから、HTML編集で毎回記事最上部に
style type="text/css"!-- ～ --/styleで指定してたんですね、いいのか悪いのかわかんないけど、スマートフォンではいけてたから放置してたんだけど、今回新たにカスタマイズしてて対処法をみつけました。
デザインが反映しない時の対処方法
見出しのデフォルトのデザインが残っているので、先ずは無効にしちゃいます
デフォルトのデザインを無効にするために、ブラウザの検証機能で何が原因なのかをチェックします。
元の見出しが表示されている所を選択して検証を行うと、ページのHTMLやCSSが表示されます
調べたい箇所にカーソル合わせて右クリック！メニューが表示されるので検証を選択！すると下の写真のようなのが出てきます。
このCSSをコピーしてメモ帳などで編集します
初心者は、カスタマイズする前はテストブログで試してからしましょう！
plantessucculentes.hatenablog.com
ちなみにコピーした元のCSSはコレ☟
.entry-content h3 {
font-size: 140%;
padding: 12px 0 12px 13px;
color: #4D517D;
padding-left: 13px;
line-height: 1.6em;
border-left: #4D517D solid 9px;
}
この一番下の「border-left: #4D517D solid 9px;」の「：」と「；」の間の値を「none」に書き換えます
ここでは「border-left: none;」にします。
書き換えたCSSをダッシュボードの「デザイン」→「カスタマイズ」へ進んで
「デザインCSS」に貼り付けします。
因みに「padding: 12px 0 12px 13px;」ってのは！見出しの余白が 上12px 右０px 下12px 左13px って意味なんですって!
色んなプロパティがあるので、覚えておけばもう少しこうならないかなって時に、自分流にカスタマイズできますね
!important で、スタイルの優先順位を最優先にする方法もあるみたいですが、ほぼ全ての優先順位を無視して適応されるみたいなので、初心者は理解してからの方が良いとおもいます。
無事に思ったデザインにできました！
書き換えたCSSの下にカスタマイズしたいCSSを書き込めばきちんと反映しました。
現在はまだテストブログでカスタマイズ中なのでコチラには反映されてませんが、これで一件落着です。
参考にさせて頂いたブログはコチラ
今回参考にさせて頂いたのは「つなろっく」さんのこの記事です。
詳しくわかりやすく説明してくれてます。
記事かいてて言うのもなんなんですが、こちらを見た方がわかりやすいと思います(笑)
カスタマイズしていて、？？？ってなったのでこちらの記事も参考にさせて頂きました。紹介するまでも無いのですが「サルワカ」さんです。
同じく「DUDE」のカスタマイズではお世話になっています。
いつも参考にさせて頂きありがとうございます！
ん～HTMLとかCSSって少しは理解していないとダメですね！
以上！備忘録でした。
