蕎麦子さんの栞

読書感想文と本にまつわるあれこれ。

挿入したiPhoneの写真だけサイズ指定して表示させる方法。

*記事に挿入した自前の画像のサイズを変更したい!

 Amazonアソシエイトの画像は、Amazonのサイトで大きさを指定してリンクのHTMLを作成し、そのまま貼り付けていたので、画像の大きさも一定に揃えることができていました。

 今回、iPhoneで撮った画像を挿入するにあたって、画像の表示サイズが大きすぎて嫌だなあということと、大きさも自動で揃えたいなあと思って、調べてみました。

 初めは、この間から使っている「HTML5&CSS3レッスンブック」を参考にしようと思ったのですが、超初心者なので、はてなブログで指定する方法がいまいちわかりません。

 そこで、グーグル先生のお世話になりつつ、試行錯誤することに。

 CSSで指定することがわかり、まず、imgでやってみました。(管理画面から、デザイン→カスタマイズ→{ }デザインCSSのところに追加)

 

 img {

  width: 250px,

    height: auto;

 }

 

 すると、目的の画像が小さくで表示されるようになったのはよいのですが、片っぱしから全ての画像が250pxになってしまいました。Amazonのリンク画像も、ブログ村のランキングリンクバナーも小さめ画像にしていたのに、バカでかくなってる〜〜!いやだ〜!

 考えるに、画像を分けて指定しなくちゃいけないということですよね?どうやって?

 

 *画像を分けて指定したい!

 ググってみたら、どうも「. 」ドットをつけて指定すればよいみたいです。

 記事の編集画面の「HTML編集」で見てみると、

<p><img class="hatena-fotolife" ......... /></p>となっています。

<p><img class="hatena-fotolife" ......... /></p>

この赤字の部分かしら?と検討をつけたら(笑)大正解!

↓こんな感じで埋め込んでみたら、めでたく私の思惑どおりに挿入したiPhone画像のみサイズ変更できました。

 

/* hatena-fotolifeの写真だけサイズ指定する*/
img.hatena-fotolife {
width: 250px;
height: auto;
}

 

こんな感じ↓

f:id:sobakosan:20181117181513j:image

 こんなに一所懸命やってみたけれど、スマートフォンで見る分にはあまり変化がないかもです(笑)特に私のiPhone SEだとさっぱりです。

© 2018 sobakosan