MarsEditでクリックして拡大する画像を作る方法

OKマークをする女性

MarsEditのデフォルト設定では、画像を貼り付けてもクリック拡大されません

どういうことか?

ちょっとこちらのページの画像をクリックしてみてください。

参考:MarsEditでWordPressに投稿する設定方法

どの画像をクリックしてみても、拡大されないでしょ?

使用している画像のサイズが小さいので、この設定でも問題ありませんが・・・。

もっと大きな写真を載せたいとか、画像を拡大してよく見てもらいたいといった場合は、画像クリックで拡大(ポップアップ)されるように設定しておく方がベターです。

見る側にとっても見やすいですからね。

画像を貼り付けるタグとは?

画像を貼り付けるタグは、以下の様な img=src〜 で始まるタグです。

<img src=”ここに画像のURL” alt=”ここに代替テキスト(画像にマウスオーバーした時に表示されるテキスト)” title=”ファイル名” width=”画像の横幅” height=”画像の縦幅” />

MarsEditの記事編集画面で画像を追加すると、通常このようなタグが入力されます。しかし、このままでは画像をクリックしても拡大されません。

 

OKマークをする女性

ね?拡大されませでしょ。

クリックして拡大させるためには、もう一行タグを追加してやる必要があります。

 

クリックして画像拡大させるためのタグ

<a href=”ここに画像のURL”><img src=”ここに画像のURL” alt=”ここに代替テキスト(画像にマウスオーバーした時に表示されるテキスト)” title=”ファイル名” width=”画像の横幅” height=”画像の縦幅” /></a>

赤い太字で表示されている部分が、クリックして画像拡大させるために追加したタグです。

<a hrer=〜></a>タグで画像のURLを指定してやる必要があります。

つまり、画像のURLは2回書き込む必要があるということです。 この書き方で、きちんと画像が拡大されるか確認してみましょう。

 

OKマークをする女性

ね?拡大しますでしょ?

ただ、注意点があります。MarsEditと連携しているWordpressに画像をポップアップ表示してくれるプラグインをインストールしておかないといけません。インストールされていない場合は、単純に画像のみのページに移動します。

私は、Easy FancyBoxというプラグインを使っています。ほぼ設定いらずで使えますので、どれをインストールしていいかわからない方は、Easy FancyBoxでいいんじゃないかなと思います。インストール後に有効化するだけで使えます。

 

以上で「MarsEditでクリックして拡大する画像を作る方法」は完了です。お疲れ様でした。

ほんと、HTMLとかタグとか、意味分かんないですよね?(笑

頭つかって疲れちゃったら、甘いもの食べましょ。

>>ダイエットにはコレ!おすすめダークチョコレート(カカオ含有量85%以上/低GI値/オーガニック)

私自身、文系なのでプログラミング系は得意ではないです。なんとかコピペコピペで対処しています。それでなんとかなっちゃうから全然OKなんですけどね。Wordpressさまさま、MarsEditさまさまです。

MarsEdit – for WordPress, Tumblr, Blogger, etc.