こんにちは。
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
ですが、サーバーの設定により、ドットが無くスラッシュで始まる場合はドメイン直下を指定できるようです。
私が契約しているレンタルサーバーもこの方法が可能でしたので、
ヘッダーなど共通部分の画像のパスやグローバルナビのリンク指定は
このやり方を採用しています。
絶対パスを指定するのは決して間違いではなく、何か不利なことが起きるわけでもないと思うのですが、
個人的にはなんかヤダなぁ~、というそれくらいの考えでした(笑。
上の方法だと、僅かながらファイルサイズの節約になりますし、管理は若干ながら楽になるかと思います。
ご参考まで。。。
こんにちは。
お忙しい中、ご回答ありがとうございました。
私も質問後、有名MTサイトの指定方法を調べてみました。
私が調べたのは、【相鉄スタイル】さんです。
ソースを見ると、どうやらご回答と同じくスラッシュで始まる相対URLによる指定のようでした。
シックスアパートに直接メールで質問してみましたが、非常に曖昧な回答で、どちらを推奨するかという明確なものではなく、
結局、私も相対URLによる指定を行うことにしました。
あまり回答の得られない質問だったので、
何かオカシイ事でも聞いてしまったのだろうかと心配になっていました。
ご回答いただき、本当にありがとうございました。
非常に参考になりました。
No.3
- 回答日時:
すみません。
ANo.2の訂正です。ANo.2の場合も"絶対パス"ですね。。
お詫びして訂正いたします。
No.1
- 回答日時:
テンプレート内で画像指定してないので経験者ではないのですが、きっと私も例Aで指定してしまうと思います。
SEO的にも相対パスと絶対パスで何か違いがあるようではなさそうですし、記事本文は絶対URLで画像指定ですし…。
そのままソースをコピペすると、まるっと楽々ミラーサイトはできてしまうなあ、とかそんなものしか思い浮かびません。何か問題あるんでしょうか…
参考になりそうもない回答ですみません(^^;
こんにちは。
ご回答ありがとうございました。
とても参考になりました。
他の方の回答がないところをみると、私の質問は愚問だったのか、
それとも判断の難しい問題だったのか・・・ますます悩んでしまいそうです。
Movable Typeの配布元サポートも利用してみたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP PHP echo バックスラッシュの使い方 img要素 2 2023/01/08 22:46
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Windows 8 Route Generator の使い方 1 2023/05/03 00:36
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- Excel(エクセル) excelで検索した商品の画像(ネットワーク上の)を表示させたい。 3 2023/06/28 00:32
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
2つ並べたランキングバナーの...
-
楽天ブログで画像を横並びにし...
-
セルタグで分け方を変えたいです
-
アマゾンアソシエト(アフィリエ...
-
ブログの写真に青い縁取り そ...
-
画像を横に並べるには?
-
ブログで画像を横に2つ並べる方法
-
ブログに貼り付けた画像の上に余白
-
画像の横に文章を入れたい
-
リンク先のURLを別の文字にする...
-
Excel で下線が消えてしまうの...
-
URLが青くならない
-
パワーポイント:テキストボッ...
-
Google Keepで数字に勝手に下線...
-
E-mail中の文章に赤で下線を引...
-
Excelヘッダーの書式
-
ワードアンダー線の長さを決め...
-
秀丸・カーソル行に下線を引き...
-
Word で下線の色の変え方
-
ExcelのVBAで下線のついている...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ブログで画像を横に2つ並べる方法
-
画像の横に文章を入れたい
-
縦線
-
GOOブログで画像を二枚並べてお...
-
MovableType/画像のパス指定方法
-
写真を横に並べる方法?CSSまた...
-
楽天ブログ・日記の下に表示の...
-
2つ並べたランキングバナーの...
-
テーブルの横並び
-
画像を横に並べると隙間ができ...
-
【html】画像を横(縦)の長さ...
-
画像に解説を入れて並べたいです
-
画像を二つ並べた時に左に余白...
-
アフリエイト画像のすぐ横に文...
-
テーブルタグで画像を並べて画...
-
楽天ブログで画像を横並びにし...
-
ブログで画像の右(左)に文章...
-
FC2ブログへ罫線非表示の表を挿...
-
ブログにリンク画像を並べて付...
-
ブログに貼り付けた画像の上に余白
おすすめ情報