デザインテーマ「SOHO」で、記事内の画像をカスタマイズ

「SOHO」を使うと、画像に影を入れる、スマホ閲覧時に画像を横幅いっぱいにすることができます。

画像に影を入れる

はてなブログで記事に挿入するとHTMLは以下のようになっています。

<p><img src="省略" title="省略" alt="省略"></p>

このp要素に class=”sh-shadow”　と入れると画像にうっすらと影が入ります。

編集後は以下のような感じ。

<p class="sh-shadow"><img src="省略" title="省略" alt="省略"></p>

スマホ閲覧時に画像を画面いっぱいに広げる

通常、記事内の両端には文字が見やすいように余白が入ります。

画像の両端の余白を無くして、画面いっぱいに広げることもできます。

<p><img src="省略" title="省略" alt="省略"></p>

このp要素に class=”sh-wide”　と入れるとスマホサイズで閲覧時に画面横幅いっぱいに広がります。

編集後は以下のような感じ。

<p class="sh-wide"><img src="省略" title="省略" alt="省略"></p>

以上です。