改装内容の続きです。
前回の記事
文字サイズと行の高さを変更
画像の上下の余白を説明しますが、その前に…
はてなブログの画像サイズ変更
最後にサイズをいれるだけ。
「:w○○○」
[f:id○○○j:plain]（そのまま変更ナシの場合）
[f:id○○○j:plain:w155]
私はスマホのみで書いていて、スマホでの見え方を重視しているため、幅155を多用しています。
※画像を横並びで挿入できるようになりました。詳しくはこちらの記事を。
→スマホでチャレンジ！ はてなブログで画像を横並びにする
画像の上下の余白
余白の仕組み
実は余白にも種類があります。
文字の周りの水色：padding
水色と黄色の境目の青い線：border
黄色の部分：margin
例を見てみよう
本文はこのように入力してみます。
(真ん中の行は、スマホで横で撮影した写真を幅250で挿入)
borderのみ
.entry-content img {
border : 5px solid blue;
}
5pxは線の太さ。
solid blueは実線で青色ってことです。
borderとpadding
.entry-content img {
border : 5px solid blue;
padding: 20px 20px 20px 20px;
}
paddingを入れたことで、写真と線の間に隙間ができました。
borderとmargin
.entry-content img {
border : 5px solid blue;
margin: 20px 20px 20px 20px;
}
marginを入れたので、線と文字の間に隙間ができています。
borderとpadding、margin
.entry-content img {
border : 5px solid blue;
padding: 20px 20px 20px 20px;
margin: 20px 20px 20px 20px;
}
上の例ではpaddingやmarginの値を、あえて４つ20pxで入れていますが、全て同じ場合は実は４つ入れなくて大丈夫です。
padding: 20px 20px 20px 20px;
↓↓↓
padding: 20px;
なぜ４つあるかと言うと、paddingやmarginの横の数字は、時計回りに上、右 下、左の値です。
.entry-content img {
border : 5px solid blue;
padding: 40px 30px 20px 10px;
margin: 40px 30px 20px 10px;
}
－(マイナス)の数字も設定可能
border:solid red 5px;
padding: 8px 8px 8px 8px;
margin: 20px 20px 20px 20px;
あかさたなはまやらわ
マイナスを入れてみると……
border:solid red 5px;
padding: 8px 8px 8px 8px;
margin: 20px 20px 20px -20px;
あかさたなはまやらわ
スマホでは画面からはみ出て切れていることでしょう。
レスポンシブデザインなら大丈夫なのかな？
応用
更に、borderの太さや種類を変更することができます。
また、padding部分(文字の場合は文字の背景も含めて)も色をつけることができます。
.entry-content img {
border : solid blue;
border-width:2px 1px 1px 4px;
padding: 40px 30px 20px 10px;
margin: 40px 30px 20px 10px;
background-color: yellow;
}
.entry-content img {
border : double blue;
border-width:8px 4px 4px 19px;
padding: 40px 30px 20px 10px;
margin: 40px 30px 20px 10px;
background-color: yellow;
}
私の設定（現在は変わっています）
スクリーンショットを多く挿入するため、真っ白な部分があっても、境目が分かりやすい様に影などを入れていました。
また、画像の上に説明を入れるので、上のmarginを少なく、下は多め。
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
margin: 3px 0 20px 0;
}
「box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;」が影をつける呪文です。
影をつける設定はこちらでお世話になりました。ありがとうございます。
yossense.com
挿入場所
前回の記事で紹介した、文字の大きさ等を入力した場所と一緒です。
PC用の見え方
ダッシュボード→該当ブログ→デザイン→画面下の「PC版」→スパナマーク🔧→デザインCSS
スマホ用の見え方
ダッシュボード→該当ブログ→デザイン→画面下の「PC版」→スマホマーク📱→記事→記事下等
追記
記事下でなくても、このエリアなら大丈夫です。
（もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…）
スマホ用に入力する際は、
<style type="text/css"></style>
で挟んで下さい。
【例】
<style type="text/css">
.entry-content img {
border : 1px solid #DADADA ;
border-bottom : 1px solid #757575 ;
box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
margin: 3px 0 20px 0;
}
.entry-content {
font-size:16px;
line-height:1.6em;
}
</style>
挿入場所の詳しい説明はこちらをご覧下さい。
文字サイズと行の高さを変更
次の記事では、線の種類や色について紹介します。
