今回は、改装した最後の項目の「見出し」についてです。
おさらい
これまで画像の余白や線、背景などについて紹介しました。
画像の大きさ・上下の余白を変更
border（枠線）の例
なぜなら、これを組み合わせて見出しを作るからです。
更に、デザインCSSやスマホの記事下(以下、CSS)に設定することもオススメしました。
どうして本文ではないところに設置するの？
「見出し」を例にすると…
「見出し」も線などを色々組み合わせて作るのですが、毎回「borderがいくつでー」と書くことが面倒だから。
でも、
「定型文に登録しておいて、張り付けれるだけでしょ？」
と思う方もいるかもしれませんが、他にも理由があります。
「見出しの色や太さを変えたいなー」
と思った時に、各ページの文中で設定していた場合、全てのページを編集しなければいけなくなります。
でも、CSSにパターンを設置している場合は、その設定を変更するだけで、全てのページの見出しの色が一気に変わるのです。
後々のことを考えて、できるだけCSSに設定することをオススメします。
どうやるの？
では、自分が思ったものをどのようにCSSに入れれば良いのか。
普段はアプリ等で「見出しボタン」を利用してしまっているため、気にも留めていなかったのですが、PCモードに切り替えてHTML編集を見てみました。
この「○見出し」の前後の<h◎></h◎>を入力した際に、色などが変わるように設定してあげれば良い。
ということまではわかりました。
が、それをどう書いたらいいのかわかりません...。
こう言うときはGoogle先生に聞くしかありません。
「はてなブログ 見出し 変更」ポチッ！
すると！
優しい人がたくさんいてCSSを紹介してくれていました。
ですので、紹介してくれているものを利用させてもらって、色や太さを変更することにしました。
利用させていただいたサイトはこちら。
www.yukihy.com
webnonotes.com
いろいろなパターンを紹介してくださっていて、見易いし、わかりやすいし。本当に助かりました。ありがとうございます。
現在は変えてしまいましたが、ブログをはじめた当初、私が選んだのは付箋風のデザインでした。
.entry-content h3{
color: #444444;
background: #f3f3f3;
border-left: 10px solid #e07000;
padding: 10px 15px;
}
そして影
.SampleBox3{
box-shadow:5px 5px 10px;
border:1px solid #000; width:100px;
height:50px;}
上記の赤と青の部分を組み合わせて、色と太さを変更。更に、上下の余白もとりたいのでmarginを加えて作ってみました。
.entry-content h3{
color: #444444;
background: #F6CECE;
border-left: 10px solid #FF0000;
padding: 10px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 0 20px 0;
}
スマホ用は右側が切れちゃうのでmarginを少し変えています。
margin: 50px 5px 20px 0;
使用しているデザインテーマによって変わってきてしまうと思うので、文字サイズ・太字もあわせる方はこちらもプラス
font-size: 1.375rem;
font-weight: bold;
.entry-content h4{
color: #444444;
background: #F6E3CE;
border-left: 10px solid #FF8000;
padding: 8px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 0 20px 0;
}
スマホ用
margin: 50px 5px 20px 0;
文字サイズ・太字もあわせる方はこちらもプラス
font-size: 1.25rem;
font-weight: bold;
.entry-content h5{
color: #444444;
background: #F5F6CE;
border-left: 10px solid #FFFF00;
padding: 6px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 0 20px 0;
}
スマホ用
margin: 50px 5px 20px 0;
文字サイズ・太字もあわせる方はこちらもプラス
font-size: 1.125rem;
font-weight: bold;
挿入場所と記載方法
PC用の見え方
ダッシュボード→該当ブログ→デザイン→画面下の「PC版」→スパナマーク🔧→デザインCSS
に以下をコピペ
.entry-content h3{
color: #444444;
background: #F6CECE;
border-left: 10px solid #FF0000;
padding: 8px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 0 20px 0;
}
.entry-content h4{
color: #444444;
background: #F6E3CE;
border-left: 10px solid #FF8000;
padding: 6px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 0 20px 0;
}
.entry-content h5{
color: #444444;
background: #F5F6CE;
border-left: 10px solid #FFFF00;
padding: 4px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 0 20px 0;
}
スマホ用の見え方
ダッシュボード→該当ブログ→デザイン→画面下の「PC版」→スマホマーク📱→記事→記事下等
に以下をコピペ
追記
記事下でなくても、このエリアなら大丈夫です。
（もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…）
追記ここまで
<style type="text/css">
.entry-content h3{
color: #444444;
background: #F6CECE;
border-left: 10px solid #FF0000;
padding: 8px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 5px 20px 0;
}
.entry-content h4{
color: #444444;
background: #F6E3CE;
border-left: 10px solid #FF8000;
padding: 6px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 5px 20px 0;
}
.entry-content h5{
color: #444444;
background: #F5F6CE;
border-left: 10px solid #FFFF00;
padding: 4px 10px;
box-shadow:5px 5px #A4A4A4;
margin: 50px 5px 20px 0;
}
</style>
スマホ用に入力する際
上のスマホ用の様に、
頭に <style type="text/css">
最後に </style>
をつけるのを忘れずに。
詳しくはこちらの記事で紹介しています。
文字サイズと行の高さを変更
ちなみに、この変更をしていると、あっという間に時間がたっていました。
予定が立て込んでいる日には向きません(笑)
以上で今回の改装についての報告終了。
あ。でも…
もうひとつやりたいことが。
ここまでやったら、追加でやっておこう。
次回でお伝えします。
