• ベストアンサー

MovableType/画像のパス指定方法

こんにちは。 MovableTypeを使いホームページを構築されている方に質問します。 ヘッダーやメニュー部分など、各アーカイブで共通する部分に挿入したい画像があるとします。 その画像を表示するHTMLコードはどのように書くのが正しい・・・または使い勝手が良いのでしょうか? ▼例A <img src="<MTBlogURL>images/a.jpg" /> http://~の絶対URLによる表示 ▼例B <img src="<MTBlogRelativeURL>images/a.jpg" /> ホストからの相対URL 私は今まで当たり前のように例Aのように絶対パスによる画像指定を行ってきましたが、最近その方法に対し疑問を投げかける記事を読みました。 そこで、他の方の意見をお聞きしたいと思います。 現在、どのような指定方法で画像を表示しているのか、 その方法を取った理由と良い点・悪い点などがありましたら、教えていただけますでしょうか。 よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

こんにちは。 私もMT設置時に悩みました。 そこで、マネしようと(笑)思い、他のMTを使用したサイトを色々見てみました。 Web標準推進で有名なWebプロデューサー、益子氏のサイト http://www.cybergarden.net/blog/ を見てみたところ、当初???と思うような指定をしていました。 <ul> <li><a href="/">home</a></li> <li><a href="/creating/">creating</a></li> <li><a href="/references/">references</a></li> <li><a href="/selected/">selected</a></li> <li><a href="/forum/">forum</a></li> </ul> このように、指定がスラッシュで始まっています。 相対パスで同階層を指定するには ./hogehoge ですが、サーバーの設定により、ドットが無くスラッシュで始まる場合はドメイン直下を指定できるようです。 私が契約しているレンタルサーバーもこの方法が可能でしたので、 ヘッダーなど共通部分の画像のパスやグローバルナビのリンク指定は このやり方を採用しています。 絶対パスを指定するのは決して間違いではなく、何か不利なことが起きるわけでもないと思うのですが、 個人的にはなんかヤダなぁ~、というそれくらいの考えでした(笑。 上の方法だと、僅かながらファイルサイズの節約になりますし、管理は若干ながら楽になるかと思います。 ご参考まで。。。

CHI-512
質問者

お礼

こんにちは。 お忙しい中、ご回答ありがとうございました。 私も質問後、有名MTサイトの指定方法を調べてみました。 私が調べたのは、【相鉄スタイル】さんです。 ソースを見ると、どうやらご回答と同じくスラッシュで始まる相対URLによる指定のようでした。 シックスアパートに直接メールで質問してみましたが、非常に曖昧な回答で、どちらを推奨するかという明確なものではなく、 結局、私も相対URLによる指定を行うことにしました。 あまり回答の得られない質問だったので、 何かオカシイ事でも聞いてしまったのだろうかと心配になっていました。 ご回答いただき、本当にありがとうございました。 非常に参考になりました。

その他の回答 (2)

回答No.3

すみません。ANo.2の訂正です。 ANo.2の場合も"絶対パス"ですね。。 お詫びして訂正いたします。

CHI-512
質問者

お礼

訂正・ご回答いただきありがとうございます。 参考になりました。

  • Muller3
  • ベストアンサー率81% (800/979)
回答No.1

テンプレート内で画像指定してないので経験者ではないのですが、きっと私も例Aで指定してしまうと思います。 SEO的にも相対パスと絶対パスで何か違いがあるようではなさそうですし、記事本文は絶対URLで画像指定ですし…。 そのままソースをコピペすると、まるっと楽々ミラーサイトはできてしまうなあ、とかそんなものしか思い浮かびません。何か問題あるんでしょうか… 参考になりそうもない回答ですみません(^^;

CHI-512
質問者

お礼

こんにちは。 ご回答ありがとうございました。 とても参考になりました。 他の方の回答がないところをみると、私の質問は愚問だったのか、 それとも判断の難しい問題だったのか・・・ますます悩んでしまいそうです。 Movable Typeの配布元サポートも利用してみたいと思います。

関連するQ&A

  • 画像を順番にロードする方法

    ホームページに下記のように画像を10枚ほど載せたのですが 例えば2枚目が表示されないまま3、4・・・10と残りが表示されてしまうことがあります。 1枚目を完全に表示してから2枚目をロード・・というように順番に表示する方法を教えてください。 <p><img src="images/20110801_01.jpg" alt="01" /></p> <p><img src="images/20110801_02.jpg" alt="02" /></p> <p><img src="images/20110801_03.jpg" alt="03" /></p>  ・  ・  ・ <p><img src="images/20110801_10.jpg" alt="10" /></p>

  • cssで画像のパスを指定する場合

    cssで画像のパスを指定する場合は、background-imageでいいのでしょうか? 今は img.sample { background-image: url("http://test.jpg") のようにやっていますが 昔やった方法は background-image ではなく srcを使っていた気がします。 background-imageでも問題なく表示されますが、 <img class="sample"> のように、imgタグを使っているのだから、srcのほうがいいのかな、と思ってしまいます。 実際はどちらがいいのでしょうか?

    • 締切済み
    • CSS
  • (javascript)HTMLで指定した画像パスに画像ファイルがない

    (javascript)HTMLで指定した画像パスに画像ファイルがない場合、別のファイル名の画像に差し替える方法が知りたいです。 以下のようにimgフォルダ内にある画像ファイル名をPHPでゲットしているのですが、その画像ファイルがない場合、確実にimgフォルダ内に存在する画像ファイルと差し替えたいのです。 print("<img src=img/". $item->getImage(). "border=0>\n"); <img src=img/cat.jpg border=0>が存在しないなら、<img src=img/dog.jpg border=0>を表示する。 javascript等、解決する方法がありますか? ご教授お願いします。 よろしくお願いします。<(_ _)>

  • firefoxで表示される画像がIEで表示されない

    同じHTML内に <img src="images/9.jpg" alt=""商品画像 /> と <img src="images/title_1.gif" /> がありますが firefoxでは上記の画像を含めすべての画像が表示されますが IEでは <img src="images/title_1.gif" />は表示されるが <img src="images/9.jpg" alt=""商品画像 />は 表示されません。 なぜか判りません。 原因がまったくわかりません。 教えてください。よろしくお願いします。

    • ベストアンサー
    • HTML
  • ロールオーバーで画像を先読みする方法

    スワップイメージをJavascriptで製作しました。 どうしても 先読みした画像を 指定する方法がわかりません。 このやり方ではできないのでしょうか? お教えください よろしくお願いします。 以下作成したコードになります。 function preload() { var images1 = new Image(); var images2 = new Image(); var images3 = new Image(); images1.src = "ike1.jpg"; images2.src = "ike2.jpg"; images3.src = "ike3.jpg"; } function over(num){ var a=document.getElementById("img1"); var b=document.getElementById("title1"); var c=document.getElementById("teima1"); switch(num){ case 1: a.innerHTML = "<img src='ike1.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 2: a.innerHTML = "<img src='ike2.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; switch(num){ case 3: a.innerHTML = "<img src='ike3.jpg'>"; b.innerHTML = "ああああ"; c.innerHTML = "ああああ"; break; } }

  • 一瞬画像が

    現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか? どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>

  • 画像の切り替え

    教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか? <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。

  • WordPress 新しいディレクトリから画像表示させたい

    初歩的な質問すいません WordPressで、デザインとファイル構成をカスタマイズしようとしています そこで、初めからあるthemes配下のimagesなどに画像を入れると、パス指定で表示されるのですが 同じ階層に別のディレクトリを作り、そこに画像を置いて指定すると、画像が表示されません。パスはあっていると思います。 <img src="images/aaa.jpg"/> <img src="新設したディレクトリ/images/bbb.jpg"/> 上は表示されるが、下は表示されないという具合です。 ディレクトリはエクスプローラで、コンテンツ分追加して管理したいと思っています。 アドバイスよろしくお願いします。。

    • ベストアンサー
    • PHP
  • 画像のサムネイルを縦横ともに指定した数値以内で表示したい。

    いままで画像を縦横比を維持して表示するには、縦一方の大きさを指定してたのですが これだと横長の画像を多く並べる場合デザインが大きく狂ってしまいます…。(どんどん横に広がってしまいます) googleやpixivのように縦横整えて表示させたいのですが、やり方が分かりません。どのようにすればよいのでしょうか。 イメージとしてはこんな感じです。 ・130ピクセルx130ピクセルの枠の中に縦横比を維持した画像を表示させる。 ・その枠を横に四つ並べる。 (縦長の画像は極端に縦長に表示され、横長の画像は極端に横長に表示されるということです。) 各画像の表示例は、例えばgoogle画像検索やpixivなど。 →google画像検索 http://images.google.co.jp/images?hl=ja&safe=off&q=%E3%83%91%E3%83%8E%E3%83%A9%E3%83%9E&lr=&um=1&ie=UTF-8&sa=N&tab=wi →pixiv http://www.pixiv.net/search.php?word=%E6%BC%AB%E7%94%BB&s_mode=s_tag ---いままで使ってたソース--- <table width="80%"> <tr align="center"> <td><a href="001.jpg"><img src="001.jpg" border="0" height="130"></a></td> <td><a href="002.jpg"><img src="002.jpg" border="0" height="130"></a></td> <td><a href="003.jpg"><img src="003.jpg" border="0" height="130"></a></td> <td><a href="004.jpg"><img src="004.jpg" border="0" height="130"></a></td> </tr> <table width="80%"> <tr align="center"> <td><a href="005.jpg"><img src="005.jpg" border="0" height="130"></a></td> <td><a href="006.jpg"><img src="006.jpg" border="0" height="130"></a></td> <td><a href="007.jpg"><img src="007.jpg" border="0" height="130"></a></td> <td><a href="008.jpg"><img src="008.jpg" border="0" height="130"></a></td> </tr> ---ここまで--- こんなソースを使ってました。 教えてください、よろしくお願いします。

    • ベストアンサー
    • HTML
  • 順番にクラスをつけていく方法

    順番にクラスを付与していく方法を考えているのですが、 思いつかないのでご教授ください。 下記のようなソースでギャラリーをjqueryで作成しました。 「次へ」「戻る」を押すと画像が左右にスライドする仕組みにしました。 画像にたいしてフェードをかけようと思い、画像を 初期状態でフェード0にしてactiveクラスがついたときに フェードを100にしようと思いました。 対象の画像をクリックすることでクラスを追加したり 削除したりする方法はわかったのですが、 「次へ」「戻る」ボタンを押すことで画像を切り替えているため、 どのようにしたら順番に画像にクラスをつけることが できるのかがわかりません。 簡単な方法をご存知の方おられましたら よろしくお願いします。 <div id="gallery"> <ul> <li><a href="#"><img src="images/photo1.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo2.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo3.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo4.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo5.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo6.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo7.jpg" alt="" /></a></li> <li><a href="#"><img src="images/photo8.jpg" alt="" /></a></li> </ul> </div> <div class="paging"> <a href="#" class="previous">戻る</a> <a href="#" class="next">次へ</a> </div>