記事内の画像をクリックすることで拡大するように

無料新規登録

会員の方はログイン

トピック

コミュニティ

お知らせ

テンプレート・プラグイン

記事内の画像をクリックすることで拡大するように

申し訳ありませんが、またブログ設定の質問です

画像を別のウィンドウで表示したときに画像をクリックすることで拡大するようにしたいんですが、公式マニュアルを見てもよくわかりません。

どうすればいいですか？
本当にすみませんがよろしくお願いします。

by 2011年05月20日 13:47

by
2011年05月20日 13:47

コメント一覧新しい順に表示▽ / 古い順に表示△

コメント一覧
新しい順 | 古い順

このコミュニティにご参加頂くと、コメントの書き込みができます

標野ゆきさん＞

ご丁寧にありがとうございます。

実際試しましたが、まだ僕の技術力ではむずかしそうです。
もうすこし勉強してからこの方法を試すことにします。
協力ありがとうございます

by 2011年05月25日 13:43

by
2011年05月25日 13:43
これを一番下のリンクのように変更するには
サムネイルのリンク先を「クリックした際に一旦同じサムネイルを別窓で表示し、もう一度クリックすることでオリジナル画像に変わる」HTMLファイルのURLに書き換えねばなりません。

シメノの場合は「メモ帳」に

<html>
<head>
<title>
テスト
</title>
</head>
<body>
<a href=http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipse.jpg><img src=http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipses.jpg></a>
</body>
</html>

上のようなHTMLタグを書き込んで、test.html という名前でアップロードしました。
その際
http://blog-imgs-47.fc2.com/s/h/i/shimenoyuki/test.html
上記のようなURLにアップロードされたので、記事内のタグを

<a href="http://blog-imgs-47.fc2.com/s/h/i/shimenoyuki/test.html" target="_blank"><img src="http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipses.jpg" alt="eclipse.jpg" border="0" width="120" height="112" /></a>

上のように変更しました。

作業は以上です。

もちろんこれはシメノの画像でありシメノのファイルですから
質問者さんが実際に使われる際にはご自分のファイルURLに書き換えて頂く必要があります。

それと上のHTMLファイルはものすごく省略してあって、かなりイイカゲンな表記になってます。
ブログ本体のHTMLはプロが作ったものですから、なんら問題はないと思いますが
SEOの上でも有効な（検索に拾われやすい）正しいHTMLの組み方についてはいろんなホームページなどで勉強してみてください。

by 標野ゆき 2011年05月21日 17:34

by 標野ゆき
2011年05月21日 17:34
環境設定の変更＞投稿設定＞画像のリンクで
画像を記事内に掲載するときに
「サムネイルを元画像にリンクする」ように設定している場合

かつ

画像をアップロードしたときに
「サムネイルを同時に作成する」にチェックを入れていた場合

記事の作成中に「画像の挿入」リンクをクリックして
アップロード画像を「サムネイルで記事を書く」で挿入すると

<a href="http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipse.jpg" target="_blank"><img src="http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipses.jpg" alt="eclipse.jpg" border="0" width="120" height="112" /></a>

たとえば
上のようなタグが挿入されます。
（これは前のコメントで使った月蝕の写真のものです）

http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipse.jpg
はオリジナル画像のURLで
http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipses.jpg
はサムネイル画像のURLです。そっくりですが、末尾にsがついているのが違います。

つまり
このタグは記事内にサムネイル画像を表示して
クリックすると別窓でオリジナル画像を表示するように、という命令です。

このタグを記事内に挿入すると下のようになります。

いま表示されているサムネイルをクリックするとオリジナルの画像が表示されます。

ここまではデフォルトの機能で、特別な手数は必要ありません。

by 標野ゆき 2011年05月21日 17:33

by 標野ゆき
2011年05月21日 17:33
コメントありがとうございます。

個人的にはゆきさんが貼った画像みたいにしたいんですが、

<a href=アップロードしたHTMLファイルのURL target=_blank><img src=http://サムネイル画像のURL></a>
のかたちやってもtarget=_blank>の部分が表示されて、
左上に×の字が表示され見れないです、クリックしても画像がみれません。
↑の対処法ってなにかありますか？

というか、サムネイル画像のURLってなんですか？

もしくは、ゆきさんみたいにしたいんですがどうすればできますか？

質問の押収ですみません、
答えるのはどれか１つか２つでも良いですし３つだとありがたいです。

by 2011年05月21日 05:15

by
2011年05月21日 05:15
サムネイル画像をクリックしたときに
別窓で同じサムネイル画像を開いて、もう一度クリックしたときに初めて
オリジナルサイズの画像が表示されるようにしたいという事でしょうか？

環境設定で
「サムネイルに元画像をリンク」するように設定している場合のリンク先は
あたかもウェブページのように見えますが、実はタダの画像ファイルに過ぎませんから
その画像に更にリンクを張るのはムリだと思います（多分）。

どうしても
そのような形にしたいと望まれるのでしたら
オリジナル画像へのリンクを張ったサムネイルが表示されるウェブページを作って
アップロードした後、記事内のサムネイルからリンクを貼ったらどうでしょう。

記事内の画像表示タグは
<a href=アップロードしたHTMLファイルのURL target=_blank><img src=http://サムネイル画像のURL></a>
このようなカタチで。

アップロードするHTMLファイル内の画像表示タグは
<a href=オリジナル画像のURL><img src=http://サムネイル画像のURL></a>
このようなカンジになるかと。

かなり煩雑なので、あまり現実的ではないような気がします。
もしかしたらもっと簡単な別の方法があるかもしれませんが、悪しからず。

ためしに作ってみました。クリックしてみてください。

by 標野ゆき 2011年05月20日 17:58

by 標野ゆき
2011年05月20日 17:58