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

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

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

\ おすすめ記事 /
スクロールできます

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

記事タイトル
 URLをコピー

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

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

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

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

スポンサーリンク

 

  

  

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

設定方法

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

PC画面の場合

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

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

スポンサーリンク

 

 

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

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

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

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

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

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

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

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

スポンサーリンク

 

トラブル②
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は、「このコードを優先してね」という意味です。

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

 

まとめ

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

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

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

これらの対応をしてもどうしても反映されなければ、そのテーマをあきらめるか、テーマ作成者に問い合わせてみて下さい。

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

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