はてなブログで記事画像の大きさを変更、移動、余白付をする最もシンプルな方法

この記事では、画像の縮小、移動、余白設定などのカスタマイズする方法を紹介していきます。

タイトルで最もシンプルな方法と言っている通り、簡単かつ幅広いカスタマイズができるよう自分なりに考えたつもりです。万が一失敗してもリスクが少なく、無料版を使っている人でもカスタマイズできる方法ですので、多くの人に参考にしてもらえると嬉しいです。

また初心者の人でも自力で自分の好きなようにカスタマイズができるよう、なるべく細かく説明しました。分かりやすくするために表現を工夫している所もありますので、詳しい方はツッコミたくなるかもしれませんがご了承下さい。

既に完成している記事をカスタマイズする人もいるかもしれませんから、簡単にバックアップをとる方法を載せておきます。バックアップと言っても、記事をコピーして下書き保存しておけば大丈夫です。やり方が分からない人は以下を参考にして下さい。

「記事の管理」から、カスタマイズしたい記事をコピーします。

f:id:oyomiyo:20180222164950j:plain

コピーしたら、バックアップの記事だということが分かるようにタイトルを少し変更しておくとわかりやすいと思います。最後に「下書き保存」するのを忘れないでください。

今回はブログ自体のcssはいじらずにでカスタマイズしていきます。そのため万が一失敗したとしてもブログ全体のレイアウトが崩れることはありませんが、念のためにバックアップを取っておくと安心です。

この記事のカスタマイズ方法について

まずは編集モードについてです。はてなブログでは編集モードがいくつかありますが、htmlの書き換えができるように「見たまま編集」に切り替えてから編集します。やり方が分からない人は以下を参考にして下さい。

「設定」を選択して編集モードを「見たままモード」に変更します。

f:id:oyomiyo:20180222164940j:plain

最後に一番下までスクロールして「変更を保存する」をクリックするのを忘れないでください。(←これ結構忘れます汗。)

次に画像の貼り方とコードの確認方法を説明します。分かる人は読み飛ばしてください。説明のために実際に画像を貼り付けていきますが、皆さんも新たに画像を貼り付けるのであれば私と同じ方法で行ってください。

画像を貼る

編集モードが「見たままモードに」に正しく変更されていれば、記事編集画面は次のような表示になっているはずです。写真の投稿は「見たまま編集」の画面から行うので、①が正しく選択されているかを確認してください。

f:id:oyomiyo:20180224000914j:plain

「+写真を投稿」から自分の貼りたい画像を選択します。(キャプションは付けないでください。)画像の大きさにもよりますがデフォルトの状態であれば下のように画面いっぱいに広がるはずです。

f:id:oyomiyo:20180215095621j:plain

コードを確認する

次に画像のコードの確認方法です。「見たまま編集」から「html編集」に切り替えて下さい。

f:id:oyomiyo:20180223181714j:plain

画像を貼り付けた位置にコード(html)が表示されます。赤で囲んだところです。この記事ではこれらのコードを書き換えながらカスタマイズをしていくことになりますから、カスタマイズは全てこの「html編集」の画面上で行うことになります。

タグの名前

急にややこしいコードを見せられても混乱すると思いますから、最低限覚えておいてほしいことだけ解説します。簡単なのですぐ終わります。

HTML

<p><img class="hatena-fotolife" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></p>

先程の画像のコードです。色分けした2つのタグにはそれぞれ名前があり、特にこの青表示の部分はpタグと呼ばれています。画像のhtml全体を囲っている<p></p>のふたつです。

赤表示の部分はimg(イメージ)タグと言います。要は画像自体のコードです。<img~から始るのでわかりやすいと思います。

またimgタグの中身は画像毎に異なるということも覚えておいてください。当たり前かもしれませんが上のコードはあくまで私の画像のimgタグですから、コピペしても私と同じ画像が表示されてしまうだけです。

ですから「imgタグの中に~を書き込んでください」などと説明したときは、自分の使いたい画像のimgタグの中だということを理解してください。

前置きが長くなりましたが、いまから具体的なカスタマイズ方法に入ります。

画像の縮小

始めに言っておきますが、一度に複数の画像の縮小や移動を行う場合はcssをいじってカスタマイズすると楽です。いちいち画像ごとにコードを書き込むより遥かにスムーズに行えます。

それをふまえた上で、「この画像だけはこの大きさで表示したい」など、記事を書いているとふと思うことがあります。画像の縮小については、誰でも簡単に行えるようはてな側が設定して下さっていますが、私が説明する方法の方がどちらかと言えば実用的(使用頻度が高い)のではないかと思います。

難しい設定を必要とせずパパっとカスタマイズできるため、知っておくと便利です。

方法その①(縮小)

縮小の方法はいくつかあります。はじめの方法は、横幅をピクセルで設定する方法です。この場合、PC画面から見ても、SP表示で見ても画像自体の大きさは変わりません。

早速説明に入ります。画像の縮小を行うには、imgタグ内のclass="hatena-fotolife"の後ろにstyle="display: inline-block; width: 250px;"を追加します。

終わったら、imgタグ全体を<div></div>で挟んでからpタグ(<p></p>)を消去してください。実際のコードは下のようになります。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; width: 250px;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

例として横幅を250pxに設定してみましたが、この値は自由に変更して使って大丈夫です(半角英数字で入力すること)。こうしておくと、PC画面で見た時も、SPから見た時も上画像と全く同じ大きさで表示されます。

ただしこれだけは注意しておいて下さい。例えば、画像の横幅が記事の横幅を超えてしまった場合、画像が記事から飛び出してしまう可能性もあります。私の記事だとこのようになってしまいます。

f:id:oyomiyo:20180413185131p:plain

これを回避する方法もありますが、正直そこまでして使うものでもないというのが印象です。ですから、もし使うのであれば、小さなアイコンなど、横幅をオーバーする心配のないものの時に使用します。

方法その②(縮小)

今度は横幅をパーセントで指定する方法を紹介します。50%で指定した場合、PC表示でもSP表示でも半分の大きさに縮小されます。そのため、記事幅(親要素の幅)に応じて横幅が決まります。

単位が変わるだけで、書き込む場所は先程と同じです。例として、imgタグ内のclass="hatena-fotolife"の後ろにstyle="display: inline-block; width: 50%;"を追加します。

最後にimgタグ全体を<div></div>で挟んでからpタグ(<p></p>)を消去してください。この場合コードは下のようになるはずです。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; width: 50%;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

半分の大きさにちゃんと縮小されました。

実際にこれだけを使用するケースは少ないと思います。PCとSP表示では画像の横幅が大きく変わってしまうからです。この場合だと、PCから見て50%だと丁度よく感じるかもしれませんが、スマホから見た場合50%と考えるとかなり小さく表示されてしまうでしょう。

そのため、パーセントの指定のみを単体で使うことはあまりありません。その場合「画像の最小幅」を指定する必要が出てきますので方法を紹介します。

画像の最小幅を設定する

画像の最小幅を指定するには、先程のコードにmin-widthというコードを追加します。例えば、min-width: 300px;(%ではない)と設定したとすれば、スマホなどの画面幅の小さい端末から見た時に最低でも横幅300pxで表示されるため、小さすぎて見にくいという心配は無くなるでしょう。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; width: 50%; min-width: 300px;"> title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

PCやタブレットから見ている人は見た目が変わらないかもしれませんが、スマホから見ている人は確認できるでしょう。この方法を使えば、画像が小さくなりすぎる問題を回避することができます。

逆のパターンも考えましょう。今度は逆に画像の最大幅を指定する方法です。

画像の最大幅を指定する

先程とは逆にSP表示でちょうどいい幅なのに対して、PC表示だとデカすぎるという場合に使える方法を紹介します。

そもそもスマホから見た場合、画像の横幅は100%が丁度いいのではないかと思うのですが(偏見か?)、影等を付けた場合に不自然に見える場合もあるので一応説明しておきます。

それで、今までは横幅を50%で説明していましたが、スマホ表示で丁度いいということなので90%(width: 90%;)で設定していたとします。この場合PC等で見た時に画像が大きくなりすぎないよう設定します。

画像の最大幅を指定するには、先程のコードにmax-widthというコードを追加します。例として、max-width: 500px;(%ではない)と設定した場合、画像の横幅は500px以上大きくなることはありません。そうすることで、デスクトップなど画面幅の大きいものから見た場合画像が大きくなりすぎるのを防ぐことができます。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; width: 90%; max-width: 500px;"> title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

パソコンや大きめのタブレットを使っている人であれば確認できるはずです。

ちなみに、max-widthmax-widthも、pxと%のどちらでも指定することができます。

そのため、方法その①で記事から画像がはみ出すのを回避したいのであれば、max-width: 100%;と指定すればいいのです。

その他の方法(縮小)

方法①と②を紹介しましたが、実際にはこのような使い方をする人は少ないでしょう。冒頭でも述べましたが、基本的には、cssを使ってまとめて縮小を行います。

中央寄せや、画面幅に応じた画像の縮小を簡単にできるためお勧めです

もちろん、①と②で紹介した方法も非常に有効です。理由としては、画像に直接書き込んだコードは優先して表示されるからです。

cssで記述したコードよりも強いため、この画像だけはこの大きさで表示したいという場合は、今説明した方法(画像に直接コードを書き込む方法)で書き込めばいいのです。覚えておくとカスタマイズをするとき楽になりますし、実際私もよく使います。

画像の移動

次は画像の移動方法です。この方法に関しては、画像のコードに直接書き込まず、その周りを囲っているdivタグに書き込む形でカスタマイズしていきます。

直接書き込む方法もありますが、別のカスタマイズ(枠、影等)と組み合わせカた時スムーズに設定できるよう、一般に広く知られている方法を紹介します。

デフォルトでは画像が左寄せになるよう設定されています。そのため画像を右寄せする方法と、中央寄せする方法のみ説明します。

画像の右寄せ

先ずは、imgタグ全体を<div></div>で挟んでからpタグ(<p></p>)を消去してください。

終わったら<div>タグの中にstyle="text-align: right;"を追加します。

*画像が横幅100%だと右寄せできているか分からないためdisplay: inline-block; width: 70%;を追加しています。

実際のコードはこのようになります。

HTML

<div style="text-align: right;"><img class="hatena-fotolife" style="display: inline-block; width: 70%;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

画像が右寄せになりました。ひと手間いりますがこの方法が一番楽でしょう。この方法を使えば、画像の横幅を%で指定していても、pxで指定していても同じように中央寄せができるため便利です。

ただ、これまでさんざん画像のコードに書き込んだのに何で急に変えるねん、俺いややねん。と思われたごくごく少数派の方のために画像のコードに直接書き込む方法も嫌々ながら紹介します。たぶん必要な人は一人もいないと思います。

せっかくなので、今まで通り画像のコードに直接書き込む形でカスタマイズできる方法を(真面目に)紹介します。正直このやり方をする人は少ないと思いますが、そもそも画像の移動をこのやり方でする人自体少ないでしょうから気にせずいきます。

先程の右寄せをしたコードの場合は、以下のコードを追加することになります。画像のコードに直接書き込む場合は、style="display: inline-block; width: 70%; margin-left: 30%;"を追加します。

ちなみにmargin-left: 30%;これは余白を指定するコードで、次に説明する余白設定のところでもう一度取り上げます。

私の場合画像の幅が70%だったので、画像の左側に30%の余白を作って、無理やり画像を右に寄せていると考えてください。つまり、画像幅が50%だったら余白も50%、画像幅が82%だと余白は18%ということになります。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; width: 70%; margin-left: 30%;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

ただし、画像の横幅を%ではなくpxで指定して右寄せしている人はこのやり方では無理ですから、始めに説明したやり方でするしかありません。

またこの方法は、皆さんの環境でも正しく表示されるかどうかやってみないとわかりません。そのためあまりお勧めできません。

画像の中央寄せ

やり方は右寄せとほぼ変わりません。先程同様にimgタグ全体を<div></div>で挟んでからpタグ(<p></p>)を消去してください。

終わったら<div>タグの中にstyle="text-align: center;"を追加します。

*画像が横幅100%だと中央寄せできているか分からないためdisplay: inline-block; width: 70%;を追加しています。

実際のコードはこのようになります。

HTML

<div style="text-align: center;"><img class="hatena-fotolife" style="display: inline-block; width: 70%;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

画像が中央寄せになりました。

他にも方法はありますが、このやり方が一番シンプルなのではないかと思います。

一応画像のコードのみでカスタマイズする方法も紹介します。

今まで通り、画像のコードのみに書き込む形でカスタマイズします。以下が書き込むコードです。

style="display: block; width: 70%; margin-right: auto; margin-left: auto;"

marginの値を左右ともautoにすることで中央寄せしています。

最後にimgタグ全体を<div></div>で挟んでからpタグ(<p></p>)を消去してください。この場合コードは下のようになるはずです。

HTML

<div><img class="hatena-fotolife" style="display: block; width: 70%; margin-right: auto; margin-left: auto;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

上手くできています。

また、右寄せの場合と異なり、px指定の場合でも同じように中央寄せできるため便利です。

画像の余白設定

画像の余白を調節する方法は読みやすい記事を作るために重要ですからぜひ覚えておいてください。適切な余白は画像を置く場所によってまちまちですから、この方法で設定できるようになると非常に楽です。

例として画像下に30pxの余白を設定してみましょう。以下がコードになります。

style="margin: 0 0 30px 0;"

margin: 0 0 30px 0;とありますが、これは上下左右の余白をまとめて書く方法の一つで、margin: 上 右 下 左;といった並び順になっています。

ちなみに、margin: 30px 0;このような書き方をすると、margin: 上下 左右;とまとめて記述することができます。つまり、margin: 30px 0;を記述した場合は上下共に30pxの余白ができることになります。

話を戻して、先程の中央寄せしたコードに余白のコードを追加した場合どうなるか確認していきましょう。

imgタグ全体を<div></div>で挟んでからpタグ(<p></p>)を消去するのを忘れないでください。この場合コードは下のようになるはずです。

HTML

<div><img class="hatena-fotolife" style="display: block; width: 50%; margin-right: auto; margin-left: auto; margin: 0 0 30px 0;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

画像下の余白が先程よりも広くなっているのが分かると思います。

これまでのカスタマイズでもそうでしたが、私のやり方では毎回imgタグをdivタグで囲み、pタグを消去していました。

これはpタグで挟んだ場合に出来てしまう画像下の余白を消すためのものです。

下画像のピンクで表示している所が余白にあたる部分です。環境によって差がありますがイメージとしてはこのくらいです。

f:id:oyomiyo:20180215095621j:plain

画像を張り付けると勝手にpタグで囲まれるようはてな側が設定して下さっているのはありがたいのですが、この余白が邪魔になることもあるでしょう。

そもそもpタグは主に文章を囲むのに使われるタグです。文章が一行ごとにある程度間隔をあけて改行されるのと同じように、画像でもpタグで挟むとある程度間隔をあけて改行されてしまいます。

逆にdivタグを使うと画像下の余白がなく、必要であれば自由に設定できるため今回はpタグを使わない方向で話を進めました。

pタグのままでも、今回は自由にカスタマイズできるようにするのが狙いなのでこの方法もアリではないかと思います。逆に細かいことは気にしていないし、書き換えるのがメンドクサイ人はpタグのままでも全く問題ありません。

組み合わせてカスタマイズする

この記事は、画像周りのカスタマイズ第2弾になっています。先回の記事では、画像に枠や影を付ける方法につい説明した後、組み合わせてカスタマイズする方法についても紹介しました。

それと同じ方法で、この記事で紹介したカスタマイズも組み合わせることができます。例えば、枠と影を付けた画像を中央寄せしたいなどです。せっかく画像の移動についても説明したので、ここで併せて紹介しておきます。

組み合わせ(枠+影+中央寄せ)

枠のコードと影のコードを準備しておきました。style="display: inline-block; box-sizing: border-box; border: solid 5px #333; box-shadow: 10px 35px 40px -15px rgba(0,0,0,0.5);"

前の記事を読んだ人はどんな出来栄えになるか予測がつくかもしれません。細い枠線に大きな影を付けてみました。分からない人は、なんとなくこれが枠と影のコードなんだと理解していただけると嬉しいです。

重要なのはここからです。それに更に中央寄せで使用した、style="display: block; width: 50%; margin-right: auto; margin-left: auto;"を後ろにくっ付けます。(全体がstyle=""で囲われているか確認してください。)

あとは今までと同じやり方でimgタグの中に書き込みます。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 2px #333; box-shadow: 10px 35px 40px -15px rgba(0,0,0,0.5); display: block; width: 50%; margin-right: auto; margin-left: auto;" title="f:id:oyomiyo:20180215095621j:plain" src="https://cdn-ak.f.st-hatena.com/images/fotolife/o/oyomiyo/20180215/20180215095621.jpg" alt="f:id:oyomiyo:20180215095621j:plain" /></div>
f:id:oyomiyo:20180215095621j:plain

正しく表示されています。

説明がややこしくなるのを避けるために画像下の余白を追加しませんでしたが、比較的大きな影を付けた場合は余白を多くとるといいでしょう。その場合も後ろに余白のコードを追加すればいいのです。難しくありません。