気にせずに更新します。w
ブログを書いていて
写真を貼り付けることはよくありますよね。
みなさん、思い思いの写真をアップして、
記事に彩りを添えているかと思います。
記事に貼られた写真は、
マウスでクリックすると拡大されますよね。
それ、
邪魔に感じたことはあませんか?
いろんな理由で、
画像が拡大しないようにしたい!
という方もいるでしょう。
今日はその方法をご紹介します。
まず前提として
「タグ編集エディタ」を使って記事を書いてること。
HTMLタグが編集できない状態では、
写真の拡大を止めることは難しいでしょう。
ブログ記事内の拡大する写真は、
HTMLタグでは次のように書かれています。
<a href="http://●●●●.jpg"><img src="http://○○○.jpg" alt="※※※"></a>
ブログサービスによって、
細かな違いはありますが、
だいたいこんな感じになってます。
<a href="http://●●●●.jpg"><img src="http://○○○.jpg" alt="※※※"></a>
赤い部分が画像本体を指し示しています。
つまりホンモノです。
<a href="http://●●●●.jpg"><img src="http://○○○.jpg" alt="※※※"></a>
緑の部分がブログ記事に表示されている画像を指し示しています。
これはニセモノです。
<a href="http://●●●●.jpg"><img src="http://○○○.jpg" alt="※※※"></a>
http://●●●●.jpgがホンモノの画像で、
http://○○○.jpgはニセモノです。
では写真の拡大を消したいと思います。
まず
ホンモノの画像部分である「http://●●●●.jpg」を
マウスで選択してコピーしておきます。
次に
ニセモノである「http://○○○.jpg」部分に、
さっきコピーした「http://●●●●.jpg」をペーストします。
するとこうなります。
<a href="http://●●●●.jpg"><img src="http://●●●●.jpg" alt="※※※"></a>
あとは
<a href="http://●●●●.jpg"><img src="http://●●●●.jpg" alt="※※※"></a>
不要な赤い部分をマウスで選んで
キーボドの[Backspace]もしくは[Delete]キーで消します。
一番後ろにある</a>も
消すのを忘れないように注意してくださいね。
するとこうなります。
<img src="http://●●●●.jpg" alt="※※※">
これで拡大しない写真が
ブログに表示されるようになります。
表示されているホンモノの写真が大き過ぎる!
という問題が発生するときは、
次のようにタグを追加します。
<img src="http://●●●●.jpg" alt="※※※" width="400">
width="400"というのは、
表示される画像の横幅のサイズの指定です。
width="400"だと
横幅400ピクセルで表示されるという意味です。
横幅を指定すれば、
元の画像の縦横の比率を保ったまま表示してくれます。
もし画像の縦のサイズを指定したければ、
height="200"
というふうにタグを追加してください。
こんな感じに。
<img src="http://●●●●.jpg" alt="※※※" width="400" height="200">
縦横のサイズは、
ご自分のブログにあわせて決めてくださいね。
でわ ^^)/~