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

「はてなブログ」記事ページの画像を見やすくカスタマイズするために私の方法を全て紹介します

これまで、はてなブログの記事画像編集についての記事を3本ほど書きました。基本的な画像周りのカスタマイズだけであれば、これまで紹介した方法だけで充分対応できると思いますし、情報量としては十分なのではないかと思います。

ただ、もっと効率よく編集できるよう知っておくと便利なことはまだまだあるので、ここで私のやり方についても少し紹介しておこうと思います。応用編ということで詳しく説明していないところもありますが、記事編集のやり方の大まかなイメージだけでもつかんでもらえると嬉しいです。

もちろん記事の内容や使う画像の種類によって、やり方は多少変わりますが、大まかなやり方としては大体決まったパターンを使っています。

レスポンシブ表示

まずは、画像を画面幅に応じて切り替えたい場合です。画像をレスポンシブに表示するのは、様々な画面幅のデバイスがある以上は避けては通れない所でしょう。

これについてはすでに別記事で紹介していますので、ここでは私が使っている方法と、応用を加えた方法のみを紹介します。

私はほとんどの場合記事の中に以下のコードを書き込んでいます。

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>

画面幅の広いデバイス(タブレットやデスクトップ等)で見た時は画像の横幅を70%に縮小しますが、スマホ(厳密に言うと画面幅が599px以下のデバイス)から見た時は横幅100%で表示します。

値については自由に変更可能です。記事ごとに手軽に横幅を変更して使えるというのも、この方法の良いところです。

また縮小した場合は画像自体が中央寄せになるよう設定しています。コードを貼り付ける場所は記事内であればどこでもいいのですが、私と同じようにhtml編集画面の一番上にコピペした場合は下画像のようになるはずです。

f:id:oyomiyo:20180312125218j:plain

これを記述しておくことで、画像のコードに少し手を加えるだけで簡単に切り替えができるようになります。(このコードは実際の記事上では非表示になります)

方法としては画像のコード全体を、<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>
f:id:oyomiyo:20180215095621j:plain

こんな感じです。PC表示で横幅70%;、SP表示で横幅100%;になっているはずです。逆に手を加えなかった画像には影響しないため、特定の画像だけをレスポンシブ表示にしたい場合でも対応できます。

冒頭で少し触れましたが、記事の頭に貼り付けたコードをいじることで、切り替えた時の横幅を自由に設定したり、ブレークポイント(切り替えの基準値)を変えることもできます。

方法は元記事で既に紹介済みです。

画像によっては、切り替え時の横幅を変えたいと感じることがあるかもしれません。

特に縦長の画像を使う際はスマホ表示で横幅100%だとスクロールも増え見にくくなってしまうことがあります。そのような場合の対処方法も合わせて紹介しておきます。

切り替えのパターンを増やす方法

ここからは応用編です。

切り替えの方法は大きく分けて2つあります。1つは先程の記事で既に紹介した方法です。画像を2つ準備しPC表示とSP表示で切り替えて使うことができるため、切り替えの横幅も画像ごとに設定することができます。ただし読み込みスピード的にも、特殊な場合を除いてあまりお勧めできる方法ではありません。

もう一つは、記事の冒頭で載せたコードに少し手を加えて表示する方法です。個人的にはこの方法が一番おすすめですのでここで紹介します。

CSS

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

まとめて書いているのでわかりにくいかもしれませんが、赤表示の部分が新たに追加されたコードです。

TAB端末やPCから見るとwidth: 50%;。SP表示だとwidth: 70%;になるよう設定しています。縦長の画像だと丁度いい大きさになるはずです。

この場合、切り替えを適応する際にやり方が先程と変わります。<div class="flex-img"></div>でコード全体を囲み、<p></p>の部分を削除するところまでは同じですが、赤表示の部分が異なりますので注意してください。

HTML

<div class="flex-img"><imgclass="hatena-fotolife-2" 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表示でwidth: 50%;。SP表示だとwidth: 70%;になっているはずです。

つまりhatena-fotolifeの部分にhatena-fotolife-2を付けた場合と付けない場合の2通りの切り替えパターンを使うことができるようになるという訳です。

画像を2つ準備する方法よりかはシンプルで、表示速度的にもベストなやり方なのではないかと思います。

一応どのような意図でこの方法を取っているのかを説明しておきます。

はてなブログでは画像を張り付けた際に、勝手にhatena-fotolifeという名前でタグ付けされるようになっています。

そのため記事の冒頭で紹介したコードでは、flex-imgで囲われた中のhatena-fotolifeに横幅の設定を書き込んだことになります。画像のコード全体をflex-imgで囲ったのはそのためです。

ただし、切り替えのパターンが2つ以上になってくるとコード自体もそれなりに長くなるため、できる限りシンプルにカスタマイズできるよう少し工夫が必要です。

そのため、hatena-fotolifeの方をhatena-fotolife-2に書き換え、flex-imgの中のhatena-fotolife-2に横幅の設定をしました。

そうすることで、flex-imgのコードを使いまわせるようになり、より少ないコードで切り替えができるように工夫しました。

この方法を使えば、切り替える画像が増えてもコードの量はあまり増えません。例えば3パターンの切り替えが必要な時でも、以下のコードだけで大丈夫です。

CSS

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

この場合もflex-imgで囲み、hatena-fotolifeの部分を書き換える(-2,-3,の数字を付け足す)ことで様々な値で切り替えることができます。

画像をまとめてカスタマイズする

ここからはレスポンシブ表示の話ではなく画像自体のカスタマイズです。この方法は、記事の中の画像のスタイルをまとめて変更することができます。これには、前述の方法でレスポンシブ表示にしている画像も含まれます。

一方で、特定の画像だけスタイルを変更しない場合や、別のスタイルで表示したい場合の対処方法も紹介します。

CSS

<style type="text/css"><!--
.hatena-fotolife { ここに画像のスタイルを記述 }
--></style>

ちなみに先程説明したレスポンシブ表示で複数のパターンできりかえをした人は、hatena-fotolife以外に書き換えた(-2,-3等を付け足した)人も多いはずです。

そのような場合は、以下のように設定してあげれば大丈夫です。

CSS

<style type="text/css"><!--
.hatena-fotolife ,.hatena-fotolife-2 ,.hatena-fotolife-3 { ここに画像のスタイルを記述 }
--></style>

カンマで区切ってあげることで、まとめてスタイルを指定できるようになります。例として上のコードは3パターンで切り替えをする場合のものですが、4パターンで切り替えをする人は.hatena-fotolife-4を同じように追加してあげればいいわけです。

画像のスタイルとは何ぞやという人もいるかもしれませんから少しだけ説明します。

この記事では、画像のスタイルを変更する際に画像のコードに直接スタイルを書き込みました。

HTML

<div><img class="hatena-fotolife" style="display: inline-block; border: solid 2px #333; box-shadow: 10px 35px 40px -15px rgba(0,0,0,0.5); margin: 10px 0 35px 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

上のコードの中の赤表示の部分が画像のスタイルを決めるコードです。ここに枠線の太さやら影の大きさやらが書かれています。

このように画像のコードに直接書き込むことで、その画像のみスタイルを変更することができました。今回はこの部分を、

CSS

<style type="text/css"><!--
.hatena-fotolife { ここに持ってくる }
--></style>

…ということになります。

先程の画像の場合はこのようになるはずです。

CSS

<style type="text/css"><!--
.hatena-fotolife { display: inline-block; border: solid 2px #333; box-shadow: 10px 35px 40px -15px rgba(0,0,0,0.5); }
--></style>

これを記事のhtmlの中に突っ込んでおけば(記事の一番上部が分かりやすくてgood!)全ての画像のスタイルを一括して変更することができますから、画像毎に同じコードを毎回書き込む必要がなくなります。

ちなみに上のコードのなかには中央寄せと縮小のコードは含まれていませんが、同時にレスポンシブ表示(一番初めに説明したやつ)にするためのコードで私が囲っているためそのように表示されているということを理解してください。

つまりレスポンシブ表示であろうとなかろうと、hatena-fotolifeと指定されている画像はすべてこのスタイルで表示されることになります。

このように他のコードとも併用することができるため、複雑な設定なしにシンプルなカスタマイズができるため表示速度的にも良いでしょう。

まとめ

どうだったでしょうか?

ここまでで、レスポンシブ表示にする方法とそのパターンを増やす方法、記事内全ての画像スタイルを一括で変更する方法を紹介しました。

普通の記事であれば、この2つを覚えておくだけでカスタマイズがかなり楽にできるようになるはずです。それに加えて一部の画像だけ別の表示がしたい場合などに、これまでの記事が参考になるはずです。

今回は主に私が普段使っている方法を紹介させていただきましたが、特に私は記事の見た目にはこだわりたいほうだというのもあって、ここまでしなくてもと思われた方はおられると思います。

皆さんの記事づくりに必要な部分だけを使ってもらえると嬉しいです。