雪ん子’s report

スマホの使い方(初級編)と日々のことをお伝えします。

雪ん子’s report

スマホだけでブログに挑戦!

見出しをカスタマイズ




こんばんは。雪ん子です。

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

 

おさらい

 
これまで画像の余白や線、背景などについて紹介しました。
 
画像の大きさ・上下の余白を変更
 
border(枠線)の例
 
なぜなら、これを組み合わせて見出しを作るからです。
 
更に、デザインCSSやスマホの記事下(以下、CSS)に設定することもオススメしました。
 

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

 
「見出し」を例にすると…
 
「見出し」も線などを色々組み合わせて作るのですが、毎回「borderがいくつでー」と書くことが面倒だから。
 
でも、
「定型文に登録しておいて、張り付けれるだけでしょ?」
と思う方もいるかもしれませんが、他にも理由があります。
 
「見出しの色や太さを変えたいなー」
と思った時に、各ページの文中で設定していた場合、全てのページを編集しなければいけなくなります。
 
でも、CSSにパターンを設置している場合は、その設定を変更するだけで、全てのページの見出しの色が一気に変わるのです。
 
後々のことを考えて、できるだけCSSに設定することをオススメします。
 

どうやるの?

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


f:id:snow0303:20170202121641j:plainf:id:snow0303:20170202121720j:plain
 
この「○見出し」の前後の<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:plainf:id:snow0303:20170322173541j:plain
f:id:snow0303:20170322173559j:plain
 
追記ここまで
 
 
<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>
 
をつけるのを忘れずに。
 
 
詳しくはこちらの記事で紹介しています。
文字サイズと行の高さを変更
 
 
ちなみに、この変更をしていると、あっという間に時間がたっていました。
予定が立て込んでいる日には向きません(笑)
 
 
以上で今回の改装についての報告終了。
 
あ。でも…
もうひとつやりたいことが。
ここまでやったら、追加でやっておこう。
 
次回でお伝えします。