はてなブログで記事内の画像の角を丸くする、枠、影付けをする最も実用的な方法

この記事では、画像の枠付け、影付け、丸角などのカスタマイズする方法を紹介していきます。今回は簡単かつ幅広いカスタマイズができるよう自分なりに考えたつもりです。万が一失敗してもリスクが少なく、無料版を使っている人でもカスタマイズできる方法ですので、多くの人に参考にしてもらえると嬉しいです。

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

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

バックアップを取る方法

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

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

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

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

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

編集モードを変更する

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

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

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

画像を貼る

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

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

コードを確認する

次に画像のコードの確認方法です。「見たまま編集」から「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>

先程の画像のコードです。色分けした２つのタグにはそれぞれ名前があり、特にこの青表示の部分はpタグと呼ばれています。画像のhtml全体を囲っている<p>と</p>のふたつです。赤表示の部分はimg（イメージ）タグと言います。<img～から始るのでわかりやすいです。

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

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

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

枠を付ける

画像に枠を付けるかつけないかは個人の好みだと思いますが、背景が白の画像などは画像の幅を明確にするという意味でも必要です。枠を付けるには、imgタグ内のclass="hatena-fotolife"の後ろにstyle="display: inline-block; box-sizing: border-box; border: solid 5px #ccc;"を追加します。最後にimgタグ全体を<div>と</div>で挟んでからpタグ（<p>と</p>）を消去してください。実際のコードは下のようになるはずです。

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 5px #ccc;" 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>

＊上の画像は見やすくするためにわざと画像を縮小し中央寄せしていますが、実際に上のコードのみを記述した場合、画像は最大サイズのまま左寄せになるはずです。

ちなみに先程のコードの中にあったdisplay: inline-block;やbox-sizing: border-box;は指定しなくても枠は表示されますが、指定しておくと画像幅を調節したり画像の位置を変更するときに非常に便利です。

サンプル１（枠）

いくつかデモンストレーションしてみましょう。枠線の太さを3px枠線の色を#5967acに設定してみます。以下を挿入することになります。style="display: inline-block; box-sizing: border-box; border: solid 3px #5967ac;"。コード全文も載せておきます。

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 3px #5967ac;" 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>

サンプル２（枠）

もうひとつ。今度は枠線の太さを10px枠線の色を#f7f8bfに設定してみます。以下を挿入することになります。style="display: inline-block; box-sizing: border-box; border: solid 10px #f7f8bf;"

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 10px #f7f8bf;" 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>

このような感じになります。

サンプル３（枠）

もうひとつ。今度は枠線の太さを2px枠線の色を#333に設定してみます。以下を挿入することになります。style="display: inline-block; box-sizing: border-box; border: solid 2px #333;"

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 2px #333;" 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>

これもよく見かけるパターンですが、細めの枠線に強めの色を指定することでメリハリが出ていいと思います。

角を丸くする

画像の角を丸くすると少し優しい印象になります。丸角にするには、先程同様にimgタグ内のclass="hatena-fotolife"の後ろに今度はstyle="display: inline-block; border-radius: 5px;"を追加します。それからimgタグ全体を<div>と</div>で挟んでからpタグ（<p>と</p>）を消去します。

<div><img class="hatena-fotolife" style="display: inline-block; border-radius: 5px;" 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>

＊上の画像は見やすくするためにわざと画像を縮小し中央寄せしていますが、実際に上のコードのみを記述した場合、画像は最大サイズのまま左寄せになるはずです。

先程追加した中のborder-radius: 5px;この部分が枠線のスタイルです。5pxで記述していますが、この値が大きくなればなるほどより丸っこくなります。自由に設定してみてください。ただしほとんどの場合は1~30pxの間くらいが多いように感じます。

サンプル１（丸角）

今度はborder-radius: 15px;に設定してみます。以下を挿入することになります。style="display: inline-block; border-radius: 15px;"。コードは折りたたんでおきます。

<div><img class="hatena-fotolife" style="display: inline-block; border-radius: 15px;" 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>

このような感じになります。

サンプル２（丸角）

正方形の画像にborder-radius: 50%;（50pxではない）を指定すると円になることが知られています。以下を挿入することになります。style="display: inline-block; border-radius: 50%;"。

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

＊画像を縮小し中央寄せ、影付けをしています。

使い方によっては面白い表現ができます。逆にめったに使わないようなスタイルはhtmlに直接書き込んだ方が楽ですのでここで紹介させてもらいました。

影をつける

影は画像を強調したり目立たせたりするのに非常に便利です。使いすぎるとクドいですから、ここぞというときにサラッと使うようにしましょう。影も枠と同じように、始めの辺りにあるclass="hatena-fotolife"の後ろに、style="display: inline-block; box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);"を追加します。それからimgタグ全体を<div>と</div>で挟んでからpタグ（<p>と</div>）を消去します。

<div><img class="hatena-fotolife" style="display: inline-block; box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);" 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>

＊上の画像は見やすくするためにわざと画像を縮小し中央寄せしていますが、実際に上のコードのみを記述した場合、画像は最大サイズのまま左寄せになるはずです。

影も枠と同じように自由に変更できます。

box-shadow: 3px 3px 10px 2px rgba(0,0,0,0.5);の並び順をざっくり説明すると、

box-shadow: 右に～px 下に～px ぼかし～px 広がり～px 色→rgba(0,0,0,0.5);といった具合になります。

影の大きさや位置によって印象は大きく変わりますから、自分の好みに合った影ができるまでいじってみるのもいいかもしれません。rabaは影の色の指定に使っているものです。詳しくは説明しませんがここでは半透明の黒を指定しています。そのまま使ってもらえれば大丈夫です。

実際に自分の画像に設定すると気付くかもしれませんが、大きな影を付けると画像下の余白が窮屈に感じることがあります。その場合は画像下の余白を広くする必要が出てくるのでここで説明しておきます。

<div><img class="hatena-fotolife" style="display: inline-block; box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5); margin-bottom: 10px;" 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>

サンプル１（影）

真正面に浮き上がる影を表現してみます。style="display: inline-block; box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);"これが挿入するコードです。右に0px 下に0pxということは影が画像の真下に来ることになります。ぼかしと広がりを適度に持たせてあげることで正面に浮き出しているような影が完成します。コードは折りたたんでおきます。

<div><img class="hatena-fotolife" style="display: inline-block; box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.5);" 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>

このような感じです。

サンプル２（影）

今度は一般的な影よりも高く浮遊しているような影にしてみます。以下を挿入してください。style="display: inline-block; box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.5);"ポイントは影の広がりを-5pxと指定している所です。マイナスになると影は逆に小さくなりますが、そうすることでより画像が浮いているように表現することができます。画像を目立たせたいときにサラッと使えると便利です。

<div><img class="hatena-fotolife" style="display: inline-block; box-shadow: 10px 10px 20px -5px rgba(0,0,0,0.5);" 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>

このような感じになります。他にも面白いテクニックはありますが実際に使うかと言われるとそうでもないのが多い印象です。一般的な影の表現であれば今まで説明したものだけで充分表現できるはずです。

ただリクツは理解できても実際にやれと言われるとなかなか難しい人もいると思いますから大まかなサンプルを準備しておきました。自由にカスタマイズして使ってください。

サンプル３（影）

もうひとつ紹介します。今度はstyle="display: inline-block; box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);"に設定してみます。ぼかしと広がりを0pxにすることで、面白い影ができます。

<div><img class="hatena-fotolife" style="display: inline-block; box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);" 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>

このような感じになります。これはこれで使えそうです。

今更感が凄いですが、htmlが分かる人は、わざわざpタグをdivに書き換える必要はないと感じる人もいるかもしれません。確かにその通りなのですが微妙な違いもあるので一応補足しておきます。初心者でも分かりやすいように書いたつもりですので興味のある人はどうぞ。

pタグについて

普通のやり方（imgタグをpタグで囲む）と私のやり方（imgタグをdivタグで囲み、pタグを消す）の大きな違いは、画像の下の余白の有無です。

そもそもpタグは主に文章を囲むのに使われるタグです。文章が一行ごとにある程度間隔をあけて改行されるのと同じように、画像でもpタグで挟むとある程度間隔をあけて改行されてしまいます。その点divタグを使うと画像下の余白がなく、必要であれば自由に設定できるため今回はpタグを使わない方向で話を進めました。

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

一応補足としてpタグで囲った場合に入る余白に色を付けてみました。皆さんが使っているテンプレートによって多少の差はあるはずですが、イメージとしてはこのくらいです。

この記事でも影付けをしたときに画像下が窮屈になってしまうのを防ぐために、画像下の余白を調節する方法を紹介しました。それ以外にも使いどころは多いと思いますからdivタグを使うメリットは充分あるはずです。

以上、自由にカスタマイズ出来るようにdivタグを使いましたという私の言い訳混じりの解説でした。

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

これまで枠付け、丸角、影付けの方法を紹介してきました。今からはこれらを組み合わせてカスタマイズする方法を紹介します。やり方が分かればカスタマイスの幅がかなり広がるはずです。

ざっくり説明すると、原型となるコードにカスタマイズしたい部分のスタイルを追加して、今まで通りの場所に挿入するといった形になります。この説明だけだとさっぱりだと思いますから、これから詳しく解説していきます。

まずは原型となるコードです。

style="display: inline-block;"

気付いている人もいるかもしれませんが、上のコードは枠、丸角、影、全てに共通して入れていたコードです。必ずしも必要となるわけではありませんが、これは画像の縮小、移動、配置の変更をスムーズに行うためにも重要なコードです。

組み合わせてカスタマイズする際はこの中に、枠、丸角、影などのコードを自由に追加していきます。

これまでの説明してきた通り枠、丸角、影などには、そのスタイルを表すコードがそれぞれありました。

例えば、枠だとbox-sizing: border-box; border: solid 5px #ccc;。

丸角だとborder-radius: 20px;。

影だとbox-shadow: 10px 10px 20px -5px rgba(0,0,0,0.5);。等です。

これらを原型となるコードの中に追加する形でカスタマイズしていきます。では順を追って説明していきます。

枠＋丸角を組み合わせる

枠のコードを準備します。box-sizing: border-box; border: solid 5px #ccc;枠の太さ5px、色はグレーにしました。

丸角のコードも準備しましょう。例として20pxで丸角にします。border-radius: 20px;

この２つを、先程の共通コードstyle="display: inline-block;"の中に入れていきます。

まとめて書くと

style="display: inline-block; box-sizing: border-box; border: solid 5px #ccc; border-radius: 20px;"

このようになります。（全体がstyle="と"で囲われているか確認してください。）

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

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 5px #ccc; border-radius: 20px;" 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>

＊上の画像は見やすくするためにわざと画像を縮小し中央寄せしていますが、実際に上のコードのみを記述した場合、画像は最大サイズのまま左寄せになるはずです。

できました。

サンプル１（枠＋影）

枠のコードを準備します。box-sizing: border-box; border: solid 2px #333;枠の太さ2px、色は暗めにしました。

影のコードも準備しましょう。box-shadow: 10px 35px 40px -15px rgba(0,0,0,0.5);

共通のコードと合わせると、style="display: inline-block; box-sizing: border-box; border: solid 5px #333; box-shadow: 10px 35px 40px -15px rgba(0,0,0,0.5);"こうなります。

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

<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);" 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>

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

サンプル２（丸角＋影）

丸角のコードを準備します。border-radius: 7px;枠の太さ2px、色は暗めにしました。

影のコードも準備しましょう。box-shadow: 2px 5px 10px -1px rgba(0,0,0,0.5);

共通のコードと合わせると、style="display: inline-block; border-radius: 7px; box-shadow: 2px 5px 10px -1px rgba(0,0,0,0.5);"こうなります。

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

<div><img class="hatena-fotolife" style="display: inline-block; border-radius: 7px; box-shadow: 2px 5px 10px -1px rgba(0,0,0,0.5);" 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>

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

サンプル３（枠＋丸角＋影）

枠のコードです。box-sizing: border-box; border: solid 3px #333;枠の太さ3px、色は暗めにしました。

丸角のコードです。border-radius: 12px;。

影のコードです。box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);ぼかしと広がりを0pxにしてみました。

共通のコードと合わせると、style="display: inline-block; box-sizing: border-box; border: solid 3px #333; border-radius: 12px; box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);"こうなります。

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

<div><img class="hatena-fotolife" style="display: inline-block; box-sizing: border-box; border: solid 3px #333; border-radius: 12px; box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5); 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>

正しく表示されていますが、さすがにここまでくると少しクドいかもしれません。画像毎にたくさんのコードを書き込むことになりますからcssを使ったほうがいい気もします。ただ、記事の中で特に強調したいものだけに使うのであればオススメです。

更にカスタマイズするために

記事全体を通して画像のカスタマイズを紹介してきましたが、中央寄せや、記事幅に応じて画像をレスポンシブ表示にする方法など、画像周りのレイアウトについては触れませんでした。

基本的には、今回紹介した画像のカスタマイズと、別記事で紹介している画像配置のカスタマイズを合わせて覚えておくと、ほぼすべてのケースに対応できるはずです。

この記事の画像も、PC表示とSP表示とで画像の横幅を変えたり、中央寄せをしたりして見やすくカスタマイズしています。実は簡単な設定だけで出来るようになるので、興味のある人は是非別記事もチェックしてみてください。

最後に

どうだったでしょうか？そこまで難しくはなかったはずです。cssをいじらずにカスタマイズしたので、スタイルの変更も記事内だけで完結できるという点ではこの方法がとてもおすすめです。

本来html内にスタイルを書き込みすぎるとページが重くなるため敬遠されるのですが、大幅に変更しない限りは問題ないでしょう。

少なくとも私のこの記事が悪い例になっていないことを願います。この記事自体画像を20枚以上使用していて、いずれも何かしら手を加えていますが、そこまで重い印象は無かったと思います。（←必死）

今回は画像周りのカスタマイズのみでしたが、画像の縮小、移動、配置、余白、切り替えなど順次更新していく予定ですので是非チェックしてみてください。