ぼく達の飼い主の【ポジティぶろぐ】

お金とペットの悩みを解決するブログ

ぼく達の飼い主の【ポジティぶろぐ】

  あなたにぴったりの税理士の探し方は? 

【超簡単】はてなブログの見出しが反映されない時の対処法|CSSでサクッと解決!

記事タイトル
 URLをコピー

記事タイトルとURLをコピー
当サイトにはプロモーションが含まれています
当サイトは広告を掲載している場合があります。消費者庁が問題としている「誇大な広告や表現」とならないよう配慮してコンテンツを制作しておりますので安心して下さい。万が一、不適切な表現など見つけられましたらお問い合わせフォームからご連絡いただけると幸いです。

【超簡単】はてなブログの見出しが反映されない時の対処法

こんにちは!
2匹のねこ🐈の飼い主です。

この記事は、
  • 見出しのデザインの設定が反映されない
  • PCは設定できたのに、スマホは反映されない
  • 大見出しを変更したら、ブログ名の下にも反映されてしまう

などのお悩みを解決します。

  

もう対策した?2023年10月から、広告を貼っているブログにはステマ規制の対策が必要になりました。詳しくは【CSS・javascript知識不要!】はてなブログのステマ規制対策【コピペOK】で記載しているので、必ず対策しましょう!

 

  

  

見出しを反映させるCSSを入れる場所について

設定方法

まずは、見出しを反映させるCSSを入れる場所をご紹介します。

PC画面の場合

見出しをPC画面で反映させるCSSを入れる場所は次のとおりです。

「ダッシュボード」→「デザイン」を選択
 

f:id:posiblo:20200507140536p:plain

「カスタマイズ」→「{ }デザインCSS」をクリック
 

 

f:id:posiblo:20200507141443p:plain 

注意!
  • この画面に、他のコードが入っていた場合、それらを絶対に消さないでください
  • 他のコードから、念の為、2行以上空けて貼り付けて下さい
  • ここでコードを変えると全ての記事に反映されてしまいます

コード削除及び操作によりかかる損失や損害について一切の責任を負いかねます。

以上の事を、ご理解の上、コードをコピペして下さい。

スマホ画面の場合

スマホ画面については、「え?普通に反映されているんじゃないの?」と思われるかもしれませんが、レスポンシブデザインを設定していないと反映されません

「テーマ」によっては、レスポンシブデザインが設定できない「テーマ」もあります。

また、設定できる「テーマ」でも、レスポンシブ選択欄にチェックを入れていないと反映されません。

設定できるテーマかどうか、確かめる事ができる画面は、

「デザイン」→「スマホ」→「詳細設定」で下記画像のようになっていれば、設定できます。

f:id:posiblo:20200614160036p:plain

ここにチェックを入れると反映されます。

もし、「レスポンシブデザイン」が使える「テーマ」であれば、ここにチェックを入れると、今後、何か設定を変更した場合などは、「楽」なのでおすすめします。

さて、本題です。

スマホに反映されない方、あきらめないで下さい。

下記やり方で、スマホにもキチンと反映されますので、ご安心を!

「ダッシュボード」→「デザイン」を選択
 

 

f:id:posiblo:20200507140536p:plain

「スマホ」→「記事」をクリック
 

 

f:id:posiblo:20200507144955p:plain

「記事上下のカスタマイズ」画面を選択
 

 

f:id:posiblo:20200507145713p:plain

「記事上下のカスタマイズ」欄の「スマートフォン用にHTMLを設定する」を選んでください。
そして、「記事」をクリック。「下」ではないので注意して下さい。

「記事上」画面に下記をコピペ
 

 

<style>

(それぞれの【見出し】のCSS)
</style>

はい! これでスマホも反映されました!

つまりは、CSSのコードの始めの前列に<style>を、最終列の次の列に</style>を追加するだけです。

簡単ですね!

この <style></style> コードは、PC版の設定を変更しても、スマホ版に設定が反映されない時に使えるコードですので、覚えておくといいですよ(^^)/

\ 無料で使えるイラストや写真の素材がすぐ使える! /
無料イラスト素材【イラストAC】 写真素材素材【写真AC】

 

はてなブログの見出しが反映されない時の対処法

ここでは、トラブル対応策をいくつかあげていきます。

ここでご紹介するCSSを、前章で説明した場所に追加すると解決します。

トラブル①
テーマの見出しデザインが残ってしまう

テーマによっては、テーマの見出しデザインが残ってしまうものもあります。

そういった場合は、一旦、テーマの見出しを消す下記CSSを、新しい見出しを設定したCSSの前に設定すると消えます。

/***見出しまとめてリセット***/
.entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5 {
    background: none;
    border: none;
    padding: 0;
}

これで、見出しがリセットできると思いますが、まだ残っていたら、「トラブル③」を試してみて下さい。

\ 無料で使えるイラストや写真の素材がすぐ使える! /
無料イラスト素材【イラストAC】 写真素材素材【写真AC】

トラブル②
h2の見出しデザインを変えると、ブログ名の下にも見出しと同じデザインが現れてしまう。

この場合は、

「h2 {・・・」の部分を「.entry-content h2 {・・・」に変更して下さい。

.entry-content を加えることによって、タイトル下は反映されなくなります。

トラブル③
設定した色やサイズが反映されない

この場合は以下のことを試して下さい。

対応策①「デザインCSS」画面の前の方にCSSコードを移す

他のCSSの影響を受けている可能性があるので、設定したいCSSを前の方に移してみて下さい。

対応策②「!important;」を挿入する

CSSコードの後にこのコードを挿入してみてください。

先程の見出しの例でいうと、赤字の部分です。

/***見出しまとめてリセット***/
.entry-content h2, .entry-content h3, .entry-content h4 {
    background: none !important;
    border: none;
    padding: 0;
}

この !importantは、「このコードを優先してね」という意味です。

ただし、乱用すると「優先」するものが増えてしまい、他のコードが影響されることもあるかもしれませんので、最終手段とするのがおすすめです。

\ 無料で使えるイラストや写真の素材がすぐ使える! /
無料イラスト素材【イラストAC】 写真素材素材【写真AC】

 

まとめ:設定は慎重に!どうしても反映されない場合は他のテーマにする選択肢も考慮しよう

まとめ:設定は慎重に!どうしても反映されない場合は他のテーマにする選択肢も考慮しよう

これらの対策を取れば、ほとんどの場合、反映されます。

ただし、どうしてもテーマのクセがひどく反映されないものもあります。

そういった場合、素人が無理やり反映させると、思わぬところで落とし穴もあります。

また、無理やり設定を変えると、結果、表示スピードが遅くなる恐れもあります。

今回ご紹介した対応をしても、どうしても反映されなければ、あまり無理をせず、そのテーマをあきらめるか、テーマ作成者に問い合わせてみて下さい。

(新しいテーマにする場合は「【悲報】PV下がる?|はてなブログのテーマを選ぶポイント・注意点・おすすめも紹介」を読んでから変更することをおすすめします。)

私はこういった場合や、やりたいカスタマイズがあれば、ココナラにお願いすることもあります。

ココナラでは、「コード」に詳しい方が対応してくれるので、安心してお願いできるばかりではなく、時短にもつながります。

👇こちらの記事で詳しく説明しています。