雪ん子’s report

スマホ1つでブログは書けるか⁉ スマホの使い方(初級編)と日々のことをお伝えします。

見出しをカスタマイズ



今回は、改装した最後の項目の「見出し」についてです。


目次

おさらい

これまで画像の余白や線、背景などについて紹介しました。

画像の大きさ・上下の余白を変更 - 雪ん子’s report


border(枠線)の例 - 雪ん子’s report


なぜなら、これを組み合わせて見出しを作るからです。

更に、デザインCSSやスマホの記事下(以下、CSS)に設定することもオススメしました。

どうして本文ではないところに設置するの?

「見出し」を例にすると…

「見出し」も線などを色々組み合わせて作るのですが、毎回「borderがいくつでー」と書くことが面倒だから。

でも、
「定型文に登録しておいて、張り付けれるだけでしょ?」
と思う方もいるかもしれませんが、他にも理由があります。

「見出しの色や太さを変えたいなー」
と思った時に、各ページの文中で設定していた場合、全てのページを編集しなければいけなくなります。

でも、CSSにパターンを設置している場合は、その設定を変更するだけで、全てのページの見出しの色が一気に変わるのです。

後々のことを考えて、できるだけCSSに設定することをオススメします。

どうやるの?

では、自分が思ったものをどのようにCSSに入れれば良いのか。

普段はアプリ等で「見出しボタン」を利用してしまっているため、気にも留めていなかったのですが、PCモードに切り替えてHTML編集を見てみました。

f:id:snow0303:20170202121641j:plain:w300
f:id:snow0303:20170202121720j:plain:w300

この「○見出し」の前後の<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版」→スマホマーク📱→記事→記事下等
に以下をコピペ

追記
記事下でなくても、このエリアなら大丈夫です。
(もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…)

↓↓↓

f:id:snow0303:20170322173339j:plain:w155f:id:snow0303:20170322173541j:plain:w155f:id:snow0303:20170322173559j:plain:w155
追記ここまで


<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>

をつけるのを忘れずに。


詳しくはこちらの記事で紹介しています。
www.snow0303.com


ちなみに、この変更をしていると、あっという間に時間がたっていました。
予定が立て込んでいる日には向きません(笑)


以上で今回の改装についての報告終了。

あ。でも…
もうひとつやりたいことが。
ここまでやったら、追加でやっておこう。

次回でお伝えします。



最後まで読んでいただき、ありがとうございます!!!

読者登録&フォローしていただけると励みになります。
お気軽にどうぞ♪