注目タグ

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

トピック詳細

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

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

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

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

2011年05月20日 13:47  by 

コメント一覧 5件中、1~5件表示

  • 標野ゆきさん>

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

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




    2011年05月25日 13:43 by

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

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

    <html>
    <head>
    <title>
    テスト
    </title>
    </head>
    <body>
    <a href=http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/ec lipse.jpg><img src=http://blog-imgs-30.fc2.com/s/h/i/s himenoyuki/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/shimenoy uki/test.html" target="_blank"><img src ="http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclipse s.jpg" alt="eclipse.jpg" border="0" width="120" height="112" /></a> ;

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


    作業は以上です。


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

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

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

  • 環境設定の変更>投稿設定>画像のリンクで
    画像を記事内に掲載するときに
    「サムネイルを元画像にリンクする」ように設定している場合

    かつ

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

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

    <a href="http://blog-imgs-30.fc2.com/s/h/i/shimenoy uki/eclipse.jpg" target="_blank"><img s rc="http://blog-imgs-30.fc2.com/s/h/i/shimenoyuki/eclip ses.jpg" alt="eclipse.jpg" border="0&quo t; width="120" height="112" /></a& gt;

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

    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がついているのが違います。

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

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

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

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

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

  • コメントありがとうございます。

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

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

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

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


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


    2011年05月21日 05:15 by

  • サムネイル画像をクリックしたときに
    別窓で同じサムネイル画像を開いて、もう一度クリックしたときに初めて
    オリジナルサイズの画像が表示されるようにしたいという事でしょうか?

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


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


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


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



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


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

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