本文に画像を挿入しクリックで拡大表示させる方法

ブログ記事に画像を挿入し本文の左右に回り込ませる方法をご紹介したいと思います。

このサイトでは Vicuna CMS - Movable Type Ver.2.2.0 を利用させていただいておりますがmt.Vicuna のスキンには記事投稿時に使えるスタイルがあらかじめ用意されており、これらは、2-Class.css に記述されています。以前は この画像を表示させて回り込ませる方法が mt.Vicuna の テンプレート配布サイトの MT > Custamaiz > Class Items に掲載されていたのですが mt.Vicuna テンプレートが Ver 2.2.1 にアップデートされた後 サイトから無くなってしまいましたので まずはその方法のご紹介

次に 一般的に Movable Type を使用したサイトやどのブログサイトでも だいたい使える方法も 合わせてご紹介いたします。 

画像を挿入して本文を左右にまわりこませる

.img_L や .img_Rクラスを使用する

記事内に画像を挿入し、本文の左右に回り込ませたい時には.img_L や .img_Rクラスを使用します。 .img_Lクラスの付加した要素は左によせられ、それに続くテキストは反対側の右に流し込まれまわりこみます。

画像を右に配置したい場合は .img_Rクラスを使用して同様にします。

.img_Lや.img_Rクラスを使用する為の記述

エントリー内に以下のように記述します。

<p class="img_L"><img src="画像ファイルのパス" height="100" width="100" alt="photo-name" /></p>
<p>記事本文テキストText 記事本文Text 記事本文Text 記事本文Text 記事本文Text 記事本文Text</p>

このエントリー冒頭の画像は この記述のサンプルです。

挿入した画像をクリックで拡大させる

次に 挿入した画像をクリックで拡大表示させる方法をご紹介いたします。

この方法は 一般的に Movable Type を使用したサイトやどのブログサイトでも だいたい使える方法ですので利用してみてください。

画像へ直リンクさせるアンカータグの中に入れ子にする

一つ目の方法は 画像のアップロード先のURLへ直リンクさせるアンカータグのなかに入れ子にする方法です。(画像をクリックすれば別ウインドウで拡大表示します)

この方法では 記事本文中に表示される画像に元画像をリンクさせていますので 新規のウインドウをを表示してそこにクリックしてダウンロードされた元画像を大きくみせることが可能になります。ウインドウのサイズは指定していませんので画像によってはサイズがあいませんのでユーザの手でウインドウサイズを調整してやる必要があります。

それではその記述方法をご紹介したします。

<p class="img_L"><a href="http://www.exanple.com/img/PhotoFile.jpg" target="_blank" title="Photo-name">
<img src="http://www.exanple.com/img/PhotoFile.jpg" width="160" height="120" alt="画像の名前"></a></p>
<p>記事本文テキストText 記事本文Text 記事本文Text 記事本文Text 記事本文Text 記事本文Text</p>

サンプル冒頭の<p class="img_L">を 削除すれば 他のどのサイトにも使えるはずです。

この項目の画像が上記コードで記述したサンプルです。

クリックして確認してみてください。

Java Script で新しいウインドウを開いて拡大画像を表示する。

2つ目の方法は Java Script を用いて 新しいウインドウを開いてそこに拡大画像を表示する方法のご紹介です。　クリックして開く画像サイズにウインドウサイズを合わせたい場合はこの方法をお使いください。

あらかじめ新たに開くウインドウのサイズを指定しておくことが可能になりますので表示する画像に合わせて新たに開くウインドウサイズを調整する事が可能になります。

それではその記述方法をご紹介いたします

<p class="img_L"><a href="javascript:void(0)" onclick=" window.open('http://www.example.com/img/Photo-File..JPG', '_blank', 'width=500,height=440,scrollbars=no,toolbar=no,menubar=no,directories=no,location=no'); "> <img src="http://www.example.com/img/Photo-File..JPG" width="160" height="120" border="0" alt="写真の名前"></a></p>
<p>記事本文テキストText 記事本文Text 記事本文Text 記事本文Text 記事本文Text 記事本文Text 記事本文Text</p>

この項目の画像は上記コードで記述したサンプルです。

画像をクリックして違いを確認してみてください。

width= と　hight= という部分で 画像サイズをピクセルで指定していますので表示する画像に合わせて適度な値に調整してください。

縦横共に原寸の画像サイズより２～3割増しのピクセル値を入力してください。

その他の方法

画像をクリックで拡大表示させる方法は 他にも Movable Type プラグインを使って実現する方法等があります。

Lightbox JS や Highslide JS 等が有名です。

プラグインを使って実現すると 非常にクールな感じで表現できるので かっこいい のですが あまりプラグインをたくさん導入していくと Movable Type のバージョンアップ等の必要に迫られた時に導入済みのプラグインのバージョン管理や 動作確認等、いろいろ管理上の手間が増えてきますので必要最小限にした方がよいと思います。

よって今回は 最初に、普通に HTMLタグを使っての方法と Java Script を使う方法のご紹介としました。

Lightbox JS や Highslide JS 等を使っての実現方法は、別の機会にご紹介したいと思います

以上で　「本文に画像を挿入してクリックで拡大表示させる方法及び 本文を回り込ませる」 のご紹介は終了です。