インデックスページを作る・その１〜MTタグを使う編〜
メインページを作る準備
設定＞全般を開くと、名前の欄で先ほど設定したブログ名を確認できます。
このブログ名を、サイトのメインページに表示していきます。
ではここから、MTタグを入れ込んでいきましょう！
まずは、「メインページ」をテンプレート化していきます。
デザイン＞テンプレートから、index.htmlのテンプレートを開きましょう。
MTタグを使ってみよう
サイト名を表示させる
【サンプルサイト】メインページ。（まだスタイルが当たっていませんが…）
「ここにサイト名」となっている箇所。ここにはサイト名を表示させたいですよね。
タイトルに書き換えたらいいんだけど…それだと別のサイトにテーマを反映したときに使えなくなってしまうね。
そんなときに使うのがMTタグ！
ここには「サイトのタイトルを表示させる」ためのMTタグを入れましょう。
- <$mt:BlogName$>
- ブログの名前を表示します。
- https://movabletype.net/tags/2007/08/blogname.html
【インデックス・テンプレート「メインページ」】ここを…
このように書きかえ！
これを保存し、サイトを見てみると…？
サイト名が入りました！
これは先ほど管理画面で設定した、サイト名が入っています。
このようにMTタグはMT内で設定した文字列や、作ったぺージなどが表示できるのです。
では、どんどん作っていきましょう！
サイト/ブログのURLを表示させる
サイト名には、メインぺージに戻るためのリンクが貼ってあるといいですね。
そんなときはURLを表示させるMTタグを使いましょう。
- <$mt:BlogURL$>
- ブログの URL (サイト URL) を
http://から始まる絶対 URL で表示します。 - https://movabletype.net/tags/2007/08/blogurl.html
- <$mt:BlogRelativeURL$>
- ブログのURLを、ホストからの相対URLで表示します。
たとえば、ブログの URL がhttp://blog.example.com/first-weblog/の場合、/first-weblog/を表示します。 - https://movabletype.net/tags/2007/08/blogrelativeurl.html
このタグが「http://〜〜〜」に置き換わるので、このタグはa href="◯◯"に入れて使うよ。
<a href="<$mt:BlogURL$>">
<h1 class="mt-h1"><$mt:BlogName$></h1>
</a>
【サンプルサイト】見た目ではわかりませんが…リンク先アドレスに注目！
リンクのアドレスがブログのURLに指定されました！リンク付きのサイト名が完成！
ソースを確認すると…ちゃんとアドレスが入っているのが確認できるね！
ブログの URL を表示させる方法がわかったところで、読み込まれているCSSのアドレスなども相対パスで呼び出してみましょう。
<link href="<$mt:BlogRelativeURL$>styles.css" rel="stylesheet">
CSSはサンプルで用意してあるので、正しく読み込まれると、サイトにスタイルが当たります。
スタイルシートが適用されました！サイトの形になりましたね！！
今回のサンプルには使われていませんが、javascriptなどの外部ファイルを使用する場合も同じように設定できます。
