【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

はてなブログ画面幅に応じて記事画像を丁度いい大きさで表示するカスタマイズ

この記事では、画面幅に応じて画像を切り替えレスポンシブに表示する方法を紹介します。大きく3通りのやり方を紹介しますが、それぞれに長所と短所があるので自分に合ったものを選んで使うようにしてください。読みやすい記事を作るために外してはいけないところですから、できるだけ丁寧に説明していくつもりです。

カスタマイズに入る前に注意点です。まずはカスタマイズを始める前にバックアップを取るようにして下さい。バックアップと言っても、記事をコピーして下書き保存しておけば大丈夫です。やり方が分からない人は以下を参考にして下さい。

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

f:id:oyomiyo:20180222164950j:plain

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

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

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

まずはhtmlの書き換えができるように「見たまま編集」に切り替えてから編集してください。やり方が分からない人は以下を参考にして下さい。

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

f:id:oyomiyo:20180222164940j:plain

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

画像の貼り方

一応説明しておきますが、分かる人は読み飛ばしてカスタマイズの3つの方法の説明に入ってください。

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

f:id:oyomiyo:20180224000914j:plain

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

f:id:oyomiyo:20180203124243j:plain

コードを確認する

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

f:id:oyomiyo:20180223181714j:plain

画像を貼り付けた位置にコード(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>

大きくするとこのような感じです。カスタマイズの時に少しだけいじるので、これが画像のコードだということは最低限覚えておいて下さい。もちろん上は私の画像のコードですからコピペしても意味がありません。

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

この記事ではこれらのコードを書き換えながらカスタマイズをしていくことになりますから、カスタマイズは全てこの「html編集」の画面上で行うことになります。では説明に入ります。

カスタマイズの3つの方法

この記事では3つの方法を紹介します。それぞれに良し悪しがありますから、自分に合った方法を選んですることをお勧めします。

まず全てに共通している所としては、このカスタマイズは書き込んだ記事にのみ適用されるもので、ブログ全体のcssには影響しないということです。このカスタマイズをしたからと言って手を加えてない記事の画像まで切り替わることはありませんし、ブログ全体のレイアウトが崩れることもないでしょう。

もうひとつ共通しているのは、どの画面幅で切り替えるか(ブレークポイント)や、切り替えた時の画像の幅などを自由に設定できるという点です。これについては記事の終りで紹介します。

次にそれぞれの方法の特徴を説明します。なんでもいいやという人は2つ目の方法をお勧めします。

まずは方法その①です。

画像を貼った後、何も手を加えなくても切り替えができるお手軽さがあります。表示速度も速いため、コードをいじるのがメンドクサイ人はこの方法がおすすめです。ただ、一番の欠点として中央寄せができないということが挙げられます。レイアウトを綺麗にするというよりは、記事を見やすくするための最低限のカスタマイズと思ってください。

方法その②です。

カスタマイズの幅が広く応用も効く方法ですので一番おすすめです。変更する画像にのみコードを追加する形になっているため、既にカスタマイズした画像がある場合や、特定の画像だけ切り替えたい人もおすすめの方法です。表示速度も速く中央寄せもできるためレイアウト的にもよく映るでしょう。

方法その③です。

最後に紹介する方法は画像ごとに自由にカスタマイズでき、中央寄せや横幅の指定も画像毎にできます。デメリットとしては、いちいちコードを書き込むのがメンドクサイというところでしょうか、また画像を一枚につき二枚づつ準備することになる(後で説明します)ため、一記事に何十枚も画像を貼る場合は表示速度に問題が出てしまうかもしれません。

以上のことを頭に入れたうえで、どの方法を選ぶか決めてからカスタマイズに入ってください。

方法その①

一つ目の方法です。下のコードを記事上にそっくりそのままコピペしてもらえば上手くいくはずです。

CSS

<style type="text/css"><!--
.hatena-fotolife { display: inline-block; width: 70%; }
@media only screen and (max-width: 599px) {
.hatena-fotolife { width: 100%; }}
--></style>

コピペする場所は、html編集画面の一番上がいいと思います。

f:id:oyomiyo:20180312125218j:plain

*コードが微妙に違いますが、貼り付ける場所は同じです。

このようになります。このコードは文字として認識されないのでプレビュー画面で確認すると表示されないはずです。

このコードさえ記述しておけば、特に何もしなくても画面幅に応じて縮小されます。また新たに画像を貼り付けても縮小されます。ゆえにこの方法に限っては、先程説明した画像のコードをいじる必要はありません。

ちなみに、タブレットやパソコンで見ている人は画面幅が70%に縮小され、スマホだと横幅100%で表示されるように設定しました。変更したければ、コード上で70%、100%と記述されている所を自由に書き換えて大丈夫です。その場合は半角英数字で入力するようにして下さい。

プレビュー画面で確認することもできますが、画面幅に応じて画像を切り替えていることを忘れないでください。パソコンから記事を書いている人がプレビュー画面でスマホ表示を確認しても変更されない場合があります。パソコンから確認している以上、画面幅はそのパソコンの幅ということになってしまうからです。

可能であれば、実際にスマホから確認してください。

方法その②

個人的には一番オススメの方法で、実際私も応用を加えてよく使っています。必要最低限の設定のみで様々なカスタマイズができ、そのうえ画像を1枚しか使わないため表示速度も速いです。

CSS

<style type="text/css"><!--
.flex-img { display: inline-block; text-align: center; }
.flex-img img.hatena-fotolife { display: inline-block; width: 70%; }
@media only screen and (max-width: 599px) {
.flex-img img.hatena-fotolife { width: 100%; }}
--></style>

まずは上のコードを、html編集画面の一番上にコピペします。

f:id:oyomiyo:20180312125218j:plain

先程同様にタブレット端末やパソコンなど、画面幅が広い時は画像を70%に縮小して表示するよう設定しています。この場合もコード上にある70%、100%の部分を40%と90%など適当に書き換えても、その比率通りに縮小されます。(半角英数字で入力する。)

また画像の幅に関係なく中央寄せになるようにも設定しておきました。元々画像は左寄せになりますが、縮小する場合は中央寄せにした方が見栄えがいいでしょう。

ただしこの時点ではまだ何も変化がないはずです。それで、皆さんが貼り付けた画像のコード(冒頭で説明したヤツ)を<div class="flex-img"></div>でくくりましょう。最後に<p></p>の部分を削除して完成です。私の画像を例にすると、

HTML

<div class="flex-img"><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" /></div>

こんな感じです。これをして初めて変更が適応されます。逆に切り替えの必要がない画像はそのままにしておけば大丈夫です。

終わったら正しく表示されているか確認してください。プレビュー画面では正しく表示されない場合もあるので、可能であれば実際に画面幅の違うデバイスで確認するようにしてください。

方法その③

あまりお勧めは出来ないのですが、この方法のメリットもあるので一応説明します。

最大のメリットとしてはPC表示とSP表示の画像を2つ準備するため、それぞれ全く違うカスタマイズをしても大丈夫だということです。特に画像幅については、方法その①や②に比べて格段に設定しやすくなるはずです。

①や②でもできなくはないですが、それなりに知識も必要になりますし、何よりややこしい設定をする必要が出てきてしまいます。

それでこの方法では予め画像を2つ準備しておき、ある一定の画面幅を超えるとPC用の画像のみを表示し、それ以下であればSP用の画像のみを表示することでシンプルにカスタマイズできるように工夫しました。

ただし、画像を1枚につき2枚準備する必要が出てくるため、使いすぎると表示速度が遅くなってしまう可能性があります。

そもそもPC表示とSP表示でそこまでデザインを変えたがる人がいるのかどうかが気になりますが一応説明しようと思います。

CSS

<style type="text/css"><!--
.pc-lim { display: inline-block; text-align: center; }
.sp-lim { display: none; }
@media only screen and (max-width: 599px) {
.sp-lim { display: inline-block; text-align: center; }
.pc-lim { display: none; }}
--></style>

以上のコードを、html編集画面の一番上にコピペします。下のようになるはずです。

f:id:oyomiyo:20180312125218j:plain

*コードが微妙に違いますが、貼り付ける場所は同じです。

次に画像を貼ります。使いたい画像を2枚を連続して貼り付け、htmlを確認してください。この様な感じに表示されているはずです。

HTML

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

画像の大きさを変更するの部分で説明したのと同じ方法で横幅を決めますが、今回は、上がPC用で下がSP用になります。

つまりPC表示で50%にしたければ、上の(1枚目に貼り付けた)画像の横幅を50%にすればいいというワケです。方法を紹介します。

HTML

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

例えばこのように記述するとPC表示で50%になりSP表示で90%になります。

繰り返しになりますがコピペすると私の画像が表示されてしまいます。皆さんの貼り付けた画像も同じようなhtmlが表示されるはずですから、そこに赤文字で表示した部分をまるまる追加すればいいのです。

また、上の画像がPC用で下の画像がSP用だと分からせてあげる必要があるので、上の画像を<div class="pc-lim"></div>でくくり、下の画像を<div class="sp-lim"></div>でくくりましょう。そして最後に<p></p>の部分を削除して完成です。

HTML

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

上の画像はPC用を横幅50%、SP用を横幅90%に設定し、画面幅599pxを超えるとPC用の画像のみを表示し、それ以下であればSP用の画像のみを表示するよう設定しました。皆さんのデバイスの横幅に合わせてどちらか片方だけが表示されているはずです。

ブレークポイントを変更する

ブレークポイントとは、「画面幅が~px以下になると表示を切り替えてくださいねー」と教えてあげるための数値です。つまり切り替えるか切り替えないかの狭間の値ということになります。何の話かよく分からない人は、私がもともと設定していた値で問題ないと思いますから気にしないでいいと思います。

この値は記事上に追加したcssの中にあります。@media only screen and (max-device-width: 599px) {ここに記述されています。それで599pxを超えるとPC用画像、以下だとSP用画像が表示されます。この値は自由にいじってもらって大丈夫です。自分のブログ幅に合わせてブレークポイントを調節してください。

一応3つの方法を紹介したので、それぞれどこの値を変更すればいいのか赤で表示しておきます。

方法その①のCSS

<style type="text/css"><!--
.hatena-fotolife { display: inline-block; width: 70%; }
@media only screen and (max-width: 599px) {
.hatena-fotolife { width: 100%; }}
--></style>

方法その②のCSS

<style type="text/css"><!--
.flex-img { display: inline-block; text-align: center; }
.flex-img img.hatena-fotolife { display: inline-block; width: 70%; }
@media only screen and (max-width: 599px) {
.flex-img img.hatena-fotolife { width: 100%; }}
--></style>

方法その③のCSS

<style type="text/css"><!--
.pc-lim { display: inline-block; text-align: center; }
.sp-lim { display: none; }
@media only screen and (max-width: 599px) {
.sp-lim { display: inline-block; text-align: center; }
.pc-lim { display: none; }}
--></style>

以下を参考にしてブレークポイントを決めてください。

全ての端末の横幅を挙げていくとキリがないので、AppleとNexusの一部機種に絞りました。個人的に重要だと感じた値に色を付けていますから参考にして下さい。

また、縦置きと横置きをいちいち表記していますが、縦置き(の時の横幅)、横置き(の時の横幅)という意味だと理解してください。

320px スマホ縦置き最小幅
375px iPhone6/6s/7/8/X縦置き
412px Nexus6縦置き
414px iPhone6/6s/7 Plus縦置き
480px ipodTouch 1 2 3/横置き
599px SPとTABを分けるのに最適、ただし大型SPの横表示は含まない
600px タブレット縦置き最小幅 Nexus7縦置き
667px iPhone6/6s/7/8/横置き
736px iPhone6/7 Plus横置き
767px 一部の小型TABの縦置き表示を含む全てのSP(横置き表示も含む)と一般的なTABを分けるのに最適
768px iPad 3 4/iPad Mini 2 3 4/iPad Air/iPad Pro9.7/縦置き Nexus9縦置き
800px Nexus10縦置き
834px iPad Pro10.5縦置き
960px Nexus7横置き
1023px 一般的なTABの縦置き表示と横置き表示を分けるのに最適
1024px iPad 3 4/iPad Mini 2 3 4/iPad Air 2/iPad Pro9.7/横置き iPad Pro12.9縦置き Nexus9横置き
1112px iPad Pro10.5横置き
1279px DTとTABを大まかに分けるのに最適
1280px Nexus10横置き MacBook Pro/Air横置き幅最小値
1366px iPad Pro12.9横置き

私は全て599pxで設定していました。理由としては、スマホのみで切り替えをするのに最適な値だからです。タブレット端末の中で特に小型なものでも600pxを下回るものはありません。そのため横幅が600px以上の端末は全てタブレットまたはPCと考えます。

方法その1や2で例えると、記事の中のすべての画像を70%に設定しておいて、600未満(599px以下と考える)のスマホ達だけは100%で表示してくださいと設定していることになります。

この場合小型のタブレットから見た場合でもデスクトップと同じように70%で表示されるため、少し小さく感じるかもしれませんが、その場合は指で拡大するはずですから大きなストレスとはならないでしょう。逆に大きな画像をデカデカと表示する方が迷惑なことを考えてこの値にしています。

いずれにしても一般的なブログであれば、599px 767px 1023px の3択になりますから、特にこだわりがないのであれば599pxのままでいいでしょう。

まとめ

はてなブログでは簡単に画像の横幅を変更することもできますが、画面幅に応じて画像を切り替えるには多少なりとも設定が必要になります。

自分なりには、なるべく最低限の設定で切り替えができ汎用性がある方法を紹介したつもりですので多くの人に使っていた開けると嬉しいです。

それに加えて、画像ごとにカスタマイズする方法も抑えておくとさらにカスタマイズの幅が広がります。

基本的には、記事上に書き込んだコードよりも、画像そのものに書き込んだコードの方が優先になります。そのため、記事上に大まかなカスタマイズのコードを記述しておいて、必要であれば画像ごとに書き込むようにすれば、楽でなおかつ幅広いカスタマイズができるようになるはずです。

画像の縮小は読みやすい記事を書く上で避けては通れないところですから是非マスターしてみて下さい。