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

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

MENU

SEO対策にもなる「見出し」をおしゃれに【超簡単】設定!(はてなブログ)コピペOK

f:id:posiblo:20200614125935p:plain

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

この記事は、ブログを始めたばかりで、見出しのデザインの設定をどの様にしたらいいか悩んでいる人必見です!

PCでは設定できたのに、スマホには反映されなくて悩んでいる人のお悩みも解決します!

この記事は、「はてなブログ」の「見たまま編集」を使っている人向けですが、CSSは他のブログでも使えると思います。

 

 

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

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

という事は、読者も増える!(多分…)

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

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

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

f:id:posiblo:20200614125935p:plain

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

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

そのとてもすばらしい記事はこちらです。今回ご紹介する見出しだけではなく、いろいろな見出しがあります(*^^*)

www.notitle-weblog.com

 

http://ideahacker.net/2015/05/26/10208/

 

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

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

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

設定方法

編集画面での「見出し」の付け方

「そんな事わかっているよ!」との突っ込みが入りそうですが、念の為…。

f:id:posiblo:20200507135231p:plain

を押すと、「大見出し」「中見出し」「小見出し」「標準」が出てきます。

これで見出しの部分を選択します。
この状態で、「プレビュー」を見ると、当たり前ですが、ただの太字(>_<)です。
それでは、次項で設定してみましょう!

PC画面の設定方法

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

f:id:posiblo:20200507140536p:plain

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

f:id:posiblo:20200507141443p:plain 

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

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

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

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

【大見出し】のコード 

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

まとめ

お疲れ様でした!
どうでしょうか、簡単に設定できたのではないでしょうか?

ちなみに私はこの方法を見つけるまで、丸1日費やしました(>_<)
設定は大の苦手なのでしょうがないです…。

また、PC画面には反映されるけど、スマホ画面には反映されないというデメリットを活かして、例えば、「PCには青を基調に」、「スマホではピンクを基調に」とイメージを変える事もできると思います。

「ピンチをチャンスに変える」という発想をすれば、いくらでもカスタマイズができると実感しますよね。(私は無理ですが…)

他にも色々とデザイン設定があるようですので、楽しんでみてみるのもいいかもしれません。

 

7/14追記

この記事作成後、現在は、「見出しデザイン」を変えています。

参考にしたのは、下記サイトさんです。

とてもすてなデザインが豊富です。

https://0edition.net/archives/1448