チラシや集合写真など、細かい部分まで見せたい画像をブログに載せる時は、クリックすると拡大に設定するのが便利です。

ただし、画像が大き過ぎると画像容量を圧迫してしまうので、ほどほどの大きさに調整してください。A4縦のチラシなら、横幅1000ピクセルくらいあれば細かい文字も読めるはずです。

【初心者でも簡単】サムネイル表示

記事編集画面の「1枚ずつ画像を挿入」ボタン（ひまわりのイラスト）をクリックすると、画像アップロードのウィンドウが開きます。ファイルを選択して、

ファイルサイズ：オリジナルサイズ
表示方法：サムネイル

にチェックを入れ、「記事に入れる」ボタンをクリックします。



本文に下記のタグが記載されていればOK！クリックを促したい場合は、画像の近くに「クリックすると拡大します」と記載しておくと親切です。

-----------------------------------------------------------------

<a href="オリジナルサイズの画像URL" target="_blank"> 

<img src="縮小版の画像URL" alt="画像の名前" title="画像の名前"> 

</a>

-----------------------------------------------------------------

実際の表示はこうなります。



クリックすると、横幅1000ピクセルの画像が別ウィンドウで開きます。

【上級者向け】htmlタグを直打ち

サムネイル表示だと記事の画像が小さ過ぎる！という場合は、上級者向けの小技が必要になります。html の知識がないとちょっと難しいかも…



まず、画像アップロードの画面で

ファイルサイズ：オリジナルサイズ
表示方法：そのまま

を選択して画像を記事に入れます。

-----------------------------------------------------------------

<img src="オリジナルサイズの画像URL" alt="画像の名前" title="画像の名前"> 

-----------------------------------------------------------------

上記のタグが本文内に記載されますが、このままだと画面からはみ出した大きな画像が貼られているだけです。ここに、直接タグを手打ちで入力（オレンジ色の部分）します。なお、「width="●"」の数字を変えれば、表示サイズを調整できます。

-----------------------------------------------------------------

<a href="オリジナルサイズの画像URL"> 

<img src="オリジナルサイズの画像URL" width="350" alt="画像の名前" title="画像の名前"> 

</a>

-----------------------------------------------------------------

実際の表示はこちら。



拡大した画像を別ウィンドウで開きたい場合は、さらに「target="_blank"」を追加してください。

-----------------------------------------------------------------

<a href="オリジナルサイズの画像URL" target="_blank">

<img src="オリジナルサイズの画像URL" width="350" alt="画像の名前" title="画像の名前"> 

</a>

-----------------------------------------------------------------

実際の表示はこちら。別ウィンドウで開きます。



興味のある方は試してみてください


…………………………………………………………………………

ブログに関するお問い合わせは下記までお気軽にどうぞ♪迷惑メール設定をされていると返信できませんので、お問い合わせ前に確認をお願いいたします。

Eメール：　info@hida-ch.com