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

~人生のびのび前向きで~ 失敗してもそこから学んでいけばいい…

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

f:id:posiblo:20200614125935p:plain

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

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

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

スポンサーリンク

 

  

 

「見出し」を付けることのメリット

メリット

「見出し」を付ける事によって、読者が記事を読みやすくなります。

また、SEO対策にも優位になりますので、まだ、「見出し」をあまり使っていない方は是非この機会に活用してみてください。

「見出し」をきちんと付けると 、Googleなどの検索エンジンがサイトを見つけたとき、どんな内容が書かれているか理解しやすくなる効果があります。

スポンサーリンク

 

 

目指す「見出し」はこれ!

f:id:posiblo:20200614125935p:plain

上の画像の様に、設定したいと思います。

細かい理論や意味は、他のブロガーさんが素晴らしい記事を書いていらっしゃるので、ここでは省略します。

今回ご紹介する見出しだけではなく、いろいろな見出しがあります。

www.notitle-weblog.com

この記事では、とにかく、「簡単に!」を目指しています!

また、今回、ご紹介する「見出し」は、私が参考にした上記サイトさんのCSSを少し変えたものです。

もし、きちんとしたCSSがいいという事であれば、ご紹介したサイトさんのCSSをコピペして下さい。

スポンサーリンク

 

 

見出しの設定方法

設定方法

それでは、早速、設定方法をご紹介したいと思います。

PC画面の設定方法

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

f:id:posiblo:20200507140536p:plain

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

f:id:posiblo:20200507141443p:plain 

「{ }デザインCSS」画面に下記をコピペする。

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

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

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

【大見出し】のコード 

h3 {
padding: 4px 10px; color: #111; background-color: #f0f0f0; border-left: 8px solid #2d70a4;border-bottom: 1px solid #2d70a4;
}

【中見出し】のコード

h4{
position: relative;
font-size: 1.143em;
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.5em;
border-top:1px solid #2d70a4;
border-bottom:1px solid #2d70a4 !important;
}

h4:before{
content: "□";
font-size: 150%;
position: absolute;
color:#ff6b6e;
top: -0.2em;
left: 0.3em;
height: 12px;
width: 12px;
}

h4:after{
content: "□";
font-size: 150%;
position: absolute;
color: #B92A2C;
top: 0.1em;
left: 0;
height: 12px;
width: 12px;
}

【小見出し】のコード

h5{
position: relative;
color: #111;
font-size: ; 1.0em
font-weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.5em;
}

h5:before{
content: "";
position: absolute;
background: #d48789;
top: 0.5;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

h5:after{
content: "";
position: absolute;
background:#d26466;
top: 1.25em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}

 

これで出来上がりです。

ただ、コードに統一感ないかもしれません。

これは、私がいろいろなところから、引用したりして、コードを変えているからです。

「きちんとしたコードじゃなきゃやだ!」と言う方は、上でご紹介した、すばらしいサイトさんでコードを入手して下さい。

慣れてきたら、「色」を変えたり、「文字の大きさ」を変えたり、「線の太さ」を変えたりするとオリジナルの見出しになります。

スポンサーリンク

 

スマホ画面の設定方法

スマホ画面にも反映させる方法

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

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

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

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

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

f:id:posiblo:20200614160036p:plain

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

ちなみに私は、あえてチェックを入れていません。(レスポンシブデザインにしていません)

なぜか?

設定をいろいろといじり過ぎて、PCと同じデザインにすると、画面が崩れてしまいます。

本来は、スマホに適した画面になるので、きれいに反映されると思うのですが、私はうまくいかないので、あきらめました。

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

さて、本題です。

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

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

 

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

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が反映されたり、されなかったりするので、ここでは記載を避けますが、「はてなブログ・見出しテーマ・反映されない」などで検索するといろいろな方がCSSを教えてくれています。

スポンサーリンク

 

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

この場合は、

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

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

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

これもいろいろと対処できます。

例としては、「!important;」を挿入したり、デザインCSSの前の方に持って行ったりすることで解決できますが、良し悪しがあるので、こちらもGoogle検索で調べて、自己責任で対応してみてくださいね。

 

🌷応援よろしくお願い致します🌷