NO TITLE

WEBデザインとかブログ運営、社会・経済、音楽などなど

デザインテーマ「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>

以上です。

その他のカスタマイズ

デザインテーマ「SOHO」にグローバルナビ(タイトル下のメニュー)を設置 - NO TITLE

デザインテーマ「SOHO」にフォローボタンを設置 - NO TITLE

デザインテーマ「SOHO」にシェアボタンを設置 - NO TITLE

デザインテーマ「SOHO」の英数字のフォントを変更する - NO TITLE

スポンサードリンク