IMPOV::In My Point Of View

仕事、SEO、ウェブマーケティング、時事問題、健康、生き方などなど、書きたいことを勝手に書き倒しているブログです。とどのつまり「便所の落書き」

MovableTypeで // から始まるURL、スラッシュから始まる絶対パスを使う - HTTPSとHTTPを上手に使い分ける小技

IT関連 MovableType

MovableType で管理しているサイトで、HTTP と HTTPS が混在していると、設定が少々面倒です。

このような場合「スラッシュから始まる絶対パス」と、「// から始まる絶対URL」を上手に使うと良いですね。

MTの機能というよりは、どちらかと言うとパスの記述ルールやブラウザの機能を利用した方法ですので、もちろんMT以外でも利用できます。

パスの書き方

たとえば、「http://example.com/css/style.css」をルートのindex.htmlから参照する場合、次の4通りの書き方があります。

<link href="http://example.com/css/style.css" type="text/css" rel="stylesheet" />
<link href="//example.com/css/style.css" type="text/css" rel="stylesheet" />
<link href="/css/style.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />

1行目の絶対パスと4行目の相対パスは、一般的に使われている書き方です。MTLinkが出力するURLもデフォルトでは、1行目の絶対パスのスタイルです。

//から始まる絶対URL

2行目の//から始まる絶対URLで書くと、表示中のページの : より前のプロトコルをそのまま引き継いで参照してくれます。

モダンブラウザはどれも対応してくれますが、レガシーブラウザではうまく機能してくれないものもあるかもしれません。

スタイルシートやJavaScriptなど、http のページでも https のページでも共通して使用したいものがある場合、このような書き方をしておくと都合が良いですね。

大規模サイトなどでドメインやサブドメインをまたがった参照をしなければならない場合、この書き方が役に立ちます。

なお、MTのデフォルトのスタイルシートは、別のCSSファイルをインクルードしますので、インクルード文の参照URLもこの方式で書いておかないと、HTTPS で接続したときに安全でない参照が発生してしまいます。

スラッシュから始まる絶対パス

3行目のスラッシュから始まる絶対パスの場合、「最初のスラッシュ ＝ ルート」と憶えておくと良いです。前述の例でいくと、「"/" ＝ "example.com/"」ということになります。

この場合も、表示中ページのプロトコルを引き継ぎますので、https で接続していた場合は参照先も https で、http で接続していた場合は http で参照します。

ステージングサーバーを介して本番環境へ反映する場合などでは、本番ドメイン名へ変更する手間が省けますので、全ての内部参照をこのスラッシュで始まる絶対パスで書くのが楽です。

本記事は移転しました。
リダイレクトしない場合はここをクリックしてください。


相対URLで書いてもいいのですが、ディレクトリ構造が深くなるような規模になると1層目、2層目、3層目でそれぞれパスを書き換えなければならなくなってしまうので、コントロールが難しくなってしまいます。

その点、このスラッシュで始まる絶対パスはとても便利ですね。

MTタグの書き方

(2019/03/17追記)
正規表現をつかってページを一括して変換する方法について記事をアップしました。
[MovableTypeでcanonical属性以外をルート相対パスに変換する](https://impov.hatenablog.com/entry/2019/03/16/223830)

MTでこれらのパスの書き方を実現する場合、以下のようにします。

//で始まる絶対URLをMTで出力する例
<link rel="stylesheet" href="<$mt:Link template="styles" replace="http:",""$>" type="text/css" />

replace モディファイアを使って、「http:」を「空」に置き換えるだけです。

スラッシュで始まる絶対パスをMTで出力する例
<$mt:WebsiteURL setvar="WebsiteURL"$>
<link rel="stylesheet" href="<$mt:Link template="styles" replace="$WebsiteURL","/"$>" type="text/css" />

設定されているウェブサイトURL（ブログの場合はBlogURL）を一度変数に読み込んでから、replace モディファイアで、"/" に置き換えるだけです。

簡単ですね！