雪ん子’s report

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

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



改装内容の続きです。

前回の記事
文字サイズと行の高さを変更 - 雪ん子’s report


目次

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

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

最後にサイズをいれるだけ。

:w○○○

[f:id○○○j:plain]
f:id:snow0303:20170128120625j:plain:w300

[f:id○○○j:plain:w155]
f:id:snow0303:20170128120625j:plain:w155

私はスマホのみで書いていて、スマホでの見え方を重視しているため、幅155を多用しています。

画像の上下の余白

余白の仕組み

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

文字の周りの水色:padding

水色と黄色の境目の青い線:border

黄色の部分:margin

例を見てみよう

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

borderのみ

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

5pxは線の太さ。
solid blueは実線で青色ってことです。

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

borderとpadding

.entry-content img {
border : 5px solid blue;
padding: 20px 20px 20px 20px;
}
f:id:snow0303:20170130001556j:plain:w300
paddingを入れたことで、写真と線の間に隙間ができました。

borderとmargin

.entry-content img {
border : 5px solid blue;
margin: 20px 20px 20px 20px;
}
f:id:snow0303:20170130001541j:plain:w300
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:w300
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:w300

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

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

.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:w300

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

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

また、画像の上に説明を入れるので、上の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) ;」が影をつける呪文です。
影をつける設定はこちらでお世話になりました。ありがとうございます。
[デザインの基本] ブログの文章部分を読みやすくするために私がやっている7つの技 | ヨッセンス

挿入場所

前回の記事で紹介した、文字の大きさ等を入力した場所と一緒です。

PC用の見え方

ダッシュボード→該当ブログ→デザイン→画面下の「PC版」→スパナマーク🔧→デザインCSS

スマホ用の見え方

ダッシュボード→該当ブログ→デザイン→画面下の「PC版」→スマホマーク📱→記事→記事下等

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

↓↓↓

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


スマホ用に入力する際は、
<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>


挿入場所の詳しい説明はこちらをご覧下さい。
文字サイズと行の高さを変更 - 雪ん子’s report


次の記事では、線の種類や色について紹介します。



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

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