雪ん子’s report

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

雪ん子’s report

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

画像の大きさ・上下の余白を変更




こんにちは。雪ん子です。

改装内容の続きです。
 
前回の記事
文字サイズと行の高さを変更
 

 
画像の上下の余白を説明しますが、その前に…
 

はてなブログの画像サイズ変更

 
最後にサイズをいれるだけ。
 
:w○○○
 
[f:id○○○j:plain](そのまま変更ナシの場合)
f:id:snow0303:20170128120625j:plain
 
[f:id○○○j:plain:w155]
f:id:snow0303:20170128120625j:plain:w155
 
私はスマホのみで書いていて、スマホでの見え方を重視しているため、幅155を多用しています。
 
※画像を横並びで挿入できるようになりました。詳しくはこちらの記事を。
スマホでチャレンジ! はてなブログで画像を横並びにする
 

画像の上下の余白

 

余白の仕組み

 
実は余白にも種類があります。
 

 
文字の周りの水色:padding
 
水色と黄色の境目の青い線:border
 
黄色の部分:margin
 

例を見てみよう

 
本文はこのように入力してみます。
(真ん中の行は、スマホで横で撮影した写真を幅250で挿入)

f:id:snow0303:20170129214920j:plain
 

borderのみ

.entry-content img {
border : 5px solid blue;
}
 
5pxは線の太さ。
solid blueは実線で青色ってことです。

f:id:snow0303:20170130004629j:plain
写真が縁取られました。
 

borderとpadding

 
.entry-content img {
border : 5px solid blue;
padding: 20px 20px 20px 20px;
}

f:id:snow0303:20170130001556j:plain
 
paddingを入れたことで、写真と線の間に隙間ができました。
 

borderとmargin

 
.entry-content img {
border : 5px solid blue;
margin: 20px 20px 20px 20px;
}

f:id:snow0303:20170130001541j:plain
 
marginを入れたので、線と文字の間に隙間ができています。
 

borderとpadding、margin

 
.entry-content img {
border : 5px solid blue;
padding: 20px 20px 20px 20px;
margin: 20px 20px 20px 20px;
}

f:id:snow0303:20170130001640j:plain
paddingを入れたので写真と線、marginも入れたので線と文字、両方に隙間ができました。
 

上の例ではpaddingやmarginの値を、あえて4つ20pxで入れていますが、全て同じ場合は実は4つ入れなくて大丈夫です。
 
padding: 20px 20px 20px 20px;
↓↓↓
padding: 20px;
 
なぜ4つあるかと言うと、paddingやmarginの横の数字は、時計回りに上、右 下、左の値です。
 
.entry-content img {
border : 5px solid blue;
padding: 40px 30px 20px 10px;
margin: 40px 30px 20px 10px;
}

f:id:snow0303:20170130004108j:plain
 

-(マイナス)の数字も設定可能

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

f:id:snow0303:20170130010726j:plain
 
.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;
}
f:id:snow0303:20170130011352j:plain
 

私の設定(現在は変わっています)

 
スクリーンショットを多く挿入するため、真っ白な部分があっても、境目が分かりやすい様に影などを入れていました。

また、画像の上に説明を入れるので、上の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版」→スマホマーク📱→記事→記事下等
 
追記
記事下でなくても、このエリアなら大丈夫です。
(もしかしたら、どこのエリアに入れるかで、ページの読み込み時間に影響するのかもしれませんが…)

↓↓↓

f:id:snow0303:20170322173339j:plainf:id:snow0303:20170322173541j:plain
f:id:snow0303:20170322173559j:plain
追記ここまで
 
 
スマホ用に入力する際は、
<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>
 
 
挿入場所の詳しい説明はこちらをご覧下さい。
文字サイズと行の高さを変更
 
 
次の記事では、線の種類や色について紹介します。