Zenn
👵

【Movable Type】WEBサイト作成

2025/03/02に公開
HTML
Web
ポートフォリオ
Movable Type
tech

MTでポートフォリオを作成しました。経験は浅いので穴だらけの造りですが、自分用のあんちょことして記録しようと思いました。

MTのまとめ

MTの構成とWPの比較イメージです。WPは一番多く使われているCMSなので理解されている方はたくさんいると思います。
MTの概要がわからないと設計もできないので間違っているかもしれないけど、ざっくりですが復習用にまとめました。

Wordpressの構図

WPの特徴と注意事項

  • 固定と投稿、それぞれテンプレートの名前と優先順位のルールが決まっている
  • 投稿のurlはパーマリンクの設定と連動している
  • カスタム投稿を作った後は必ずパーマリンク設定を再保存する
  • カテゴリと呼ばれるものはデフォルト投稿のみでカスタム投稿はタクソノミーとなる
  • サブドメインやサブディレクトリに分けてマルチサイトが作れるが、ダッシュボードが複雑になる
  • WP関数とは別にPHPで機能を自作し自由にカスタマイズできる反面、作る人によって書き方が様々でわかりづらくになる
  • カスタムフィールドはプラグインに頼りがち
  • プラグインを多用し過ぎると不具合が起きやすい

Movable Typeの構図

MTの特徴と注意事項

  • 記事は1サイトに1種類づつしか作れない、テンプレートはウェブページも記事も1種類ずつしか適用出来ない
  • 共通パーツはモジュールテンプレートを作成、他インデックスやシステムといった特殊なテンプレがある
  • 親サイトが一つに子サイトが幾つでも作れる、WPのマルチサイトに似ているかも
  • Perlを知らなくてもMTタグだけで完結できる、MTタグのパターンが決まっている分、カスタマイズの自由度は低いかも
  • ページのアーカイブマッピングを設定してURLのパス名を決めておく
  • フォルダネームやurlを変更した時、サーバにディレクトリやファイルが残っているので不要なものは削除しておく、でないとページに反映できないかも
  • ページャーの機能がないのでプラグインを使う
  • カスタムフィールドが使いやすいが、作りすぎると入力ページがうるさくなりがち
  • 再構築の手間がネック

インストールについて

今回MTのインストールについて躓いたことをメモっておきます。
公式サイトからパーソナル版をダウンロードして自分のサーバにアップする前にファイル構造をチェック、公式マニュアル通りに進めます。
個人無償版DL →
マニュアルサイト →

DLしたしたMT-8.4.0の直下にある.cgiファイル全てのパーミッションを755に変更しておきます。
mt-cdsearch.cgi
mt-check.cgi
mt-comments.cgi
mt-search.cgi
mt-shared-preview.cgi
mt-upgrade.cgi
mt-wizard.cgi
mt.cgi

ウェブサイトディレクトリの権限とmt-static ディレクトリ内の support ディレクトリの権限を777 に設定・・・
ちょっと待て、
レンタルサーバによって777はアクセス不可になる。
最初はこれで躓きました。

ちなみにXサーバです。とにかく777とあるものは全て755にしました。

パーミッション変更後、インストールしたいディレクトリ直下にmt-staticだけアップ。mtというディレクトリを作って残りのデータはmtの中にアップ。以下のルートにしました。

mt8
|_mt-static
|_mt
　|_tmplとかtoolsとかmt-static以外のディレクトリとファイル

そしてURLにアクセスして設定ウィザードからDBとログイン設定。
無事にインストールできたかと思いきや、ダッシュボードが何かおかしい。タイトル欄はあるのに記事欄が真っ白で何も入力できない。デザインのテンプレート編集も同じ状態。


パーミッション間違えた？
何か設定間違えた？
どこかがコンフリクト？でも、まだ何もいじっていない初期状態。

おかしいのはエディターだけなので、もしかしてエディターのプラグインで何かあるかもと思い、無効と有効を試してみました。
結果、新しいTinyMCE6関連を全て無効にしたら入力欄が現れました。

システムのプラグイン設定です。
ここは何故なのか原因がわかりません。

インストールして通常通り動くまで、週末の休みは全て費やしてしまいドッと疲れが溜まったまま月曜日が始まりました。

テンプレートとMTタグ

自分のサイトで使用したテンプレートとMTタグです。

親サイト

  • インデックステンプレート
    • インデックス --- トップページ
    • 404
  • アーカイブテンプレート
    • worksカテゴリ一覧
    • worksシングルページ
    • 固定記事テンプレート
  • テンプレートモジュール
    • config --- 共通の変数を格納
    • breadclamb --- パンくずリスト
    • header --- 共通ヘッダー
    • footer --- 共通フッター
    • contact --- 固定ページのデザインパーツ
    • pagination --- ページャーのパーツ
    • worksList --- 固定ページのデザインパーツ
    • result --- 固定ページのデザインパーツ

※フォーム用の「A-Form 5.0.1」とページャー用の「PageBute 4.0.0」をインストールしておきます。
※子サイトは造りが同じなので省略します。

configモジュール

全ページ共通の変数や初期値を格納しておきます。各テンプレートで変数を上書き。

config
<mt:Ignore>初期値</mt:Ignore>
<mt:SetVars>
	ogimage=https://xxxxxx.com/image/og_imge.jpg
	bodyclass=noCss
	homeAct=none
	worksAct=none
	resulteAct=none
	mtAct=none
	contactAct=none
</mt:SetVars>

<mt:Ignore>ここはコメントアウト</mt:Ignore>
<mt:SetVars>
　name1=”変数格納　複数Ver”
　name2=”ここの左辺がnameに相当”
</mt:SetVars>

一つの値なら

<$mt:SetVer name=”kemeko” value=”けめこ”$>

MTタグごと変数にする場合、スペースNG

<mt:SetVarBlock name="kesaran"><mt:PageFolder><$mt:FolderBasename$><mt:PageFolder></mt:SetVarBlock>

呼び出し

<$mt:Var name="name1"$>
<$mt:Var name="kemeko"$>
<$mt:Var name="kesaran"$>

インデックステンプレート

URLが一つだけ適用できるテンプレートになります。
下記はトップページです。

トップページ
<$mt:SetVar name="home" value="1"$>
<$mt:Include module="config"$>
<mt:SetVars>
	metatitle=<$mt:WebsiteName$>
	pagetext=Movable typeで構築したテストサイトです
	homeAct=act
</mt:SetVars>
<$mt:Include module="header"$>
    <main class="main">

      <div class="topMain">
        <div class="container grid2">
          <section class="leftArea">
            <h1 class="hatakeTitle">
              <img src="<$mt:BlogRelativeURL$>indeximage/toptitle.svg" alt="THE 畑">
            </h1>

            <!-- コンテンツ部分省略 -->

        </div>
        <!-- //.container -->
     </div>
     <!-- //.topMain -->

TOPは特別なページなので旗を立てておくと便利です。何かの条件に使えるように。

<$mt:SetVar name="home" value="1"$>

インクルードのMTタグです。まず、初期値用のconfigを読み込みます。

<$mt:Include module="config"$>

configで宣言した変数を上書きします。下でインクルードしているheaderモジュールの値が上書きされます。

<mt:SetVars>
metatitle=<$mt:WebsiteName$>
pagetext=Movable typeで構築したテストサイトです
homeAct=act
<mt:SetVars>

相対パスのMTタグ。

<$mt:BlogRelativeURL$>

サイトのURL表記はこっち。

<$mt:BlogURL$>

新着記事のサブループ書き出し

  <mt:Entries lastn="6" sort_order="descend">
    <mt:EntriesHeader>
      <ul class="worksLi">
    </mt:EntriesHeader>
        <li>
          <figure>
            <a href="<$mt:EntryPermalink$>">
          <mt:worksImgMainAsset>
          <img src="<$MTAssetURL$>" alt="">
          </mt:worksImgMainAsset>
          </a>
          <figcaption class="crapTitle"><$mt:EntryTitle$></figcaption>
          </figure>
          <div class="workText">
            <p class="mb10">
              <$mt:EntryExcerpt words="50"$>
            </p>
            <p class="toArticle"><a href="<$mt:EntryPermalink$>">詳細はこちら</a></p>
          </div>
        </li>
        <mt:EntriesFooter>
      </ul>
    </mt:EntriesFooter>
  </mt:Entries>

記事のMTタグmt:Entries、装飾子というものを付けてオプション表示。lastn="6"は件数、sort_order="descend"は新しい記事順。

カスタムフィールドでサムネイル設定しているので、画像書き出し専用の書き方です。

<mt:カスタムフィールド名Asset>
<img src="<$MTAssetURL$>" alt="">
</mt:カスタムフィールド名Asset>

テキストのカスタムフィールド呼び出しはこっち。

<mt:If tag="pasaran">
<p><$mt:pasaran encode_html="1"$></p>
</mt:If>

子サイトからの新着記事サブループを書き出し

  <mt:ChildSites include_sites="2">
    <mt:Entries lastn="3" sort_order="descend">
    <mt:EntriesHeader>
      <ul class="enemyLi">
    </mt:EntriesHeader>
        <li>
          <figure>
            <a href="<$mt:EntryPermalink$>">
              <mt:enemyImgMainAsset>
          <img src="<$MTAssetURL$>" alt="">
          </mt:enemyImgMainAsset>
            </a>
          </figure>
          <article class="enemyText">
            <h4 class="enemyTitle"><$mt:EntryTitle$></h4>
            <p class="mb10"><$mt:EntryExcerpt words="30"$></p>
            <p class="toArticle"><a href="<$mt:EntryPermalink$>">詳細はこちら</a></p>
          </article>
        </li>
        <mt:EntriesFooter>
      </ul>
    </mt:EntriesFooter>
    </mt:Entries>
  </mt:ChildSites>

親要素にmt:ChildSites を包む。include_sites="2"の番号はサイトID。
あとは普通の記事ループと同じ。

headerモジュール

子サイトも共通に使えるようにURLの設定を変えました。でないと子サイトがリンク切れになってしまいます。
BlogRelativeURLではなく絶対パスのWebsiteURLにします。変数に代入。

header
  <mt:BlogParentWebsite>
  <mt:SetVars>
      website_url=<$mt:WebsiteURL$>
  </mt:SetVars>
  </mt:BlogParentWebsite>

  <!DOCTYPE HTML>
  <html lang="<$mt:BlogLanguage$>">

  <head prefix="og: https://ogp.me/ns#">
  <meta charset="<$mt:PublishCharset$>">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><$mt:Var name="metatitle"$></title>
  <meta name="description" content="<mt:Var name="pagetext">">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <meta name="theme-color" content="#41AEA5">
  <!-- OGタグ -->
  <meta property="og:title" content="<$mt:Var name="metatitle"$>">
  <meta property="og:url" content="<$mt:Var name="metaurl"$>">
  <meta property="og:site_name" content="<$mt:Var name="metatitle"$>" />
  <meta name="og:image" content="<$mt:Var name="ogimage"$>" />
  <meta name="og:description" content="<$mt:Var name="pagetext"$>" />
  <meta name="og:type" content="website" />
  <!-- //OGタグ -->
  <link rel="stylesheet" href="<$MTStaticWebPath$>plugins/AForm/theme/theme01.css" type="text/css" />
  <link rel="stylesheet" href="<$mt:Var name="website_url"$>css/sanitize.css">
  <link rel="stylesheet" type="text/css" href="<$mt:Var name="website_url"$>css/style.css">
  <link rel="stylesheet" type="text/css" href="<$mt:Var name="website_url"$>css/common.css">
  <link rel="stylesheet" type="text/css" href="<$mt:Var name="website_url"$>css/page.css">
  <link rel="apple-touch-icon" href="<$mt:Var name="website_url"$>indeximage/apple-touch-icon.png">
  <link rel="shortcut icon" href="<$mt:Var name="website_url"$>indeximage/favicon.ico" type="image/vnd.microsoft.icon">
  </head>

  <body class="<$mt:Var name="bodyclass"$>">
  <div class="wrapper">
    <div id="loader">
      <img src="<$mt:Var name="website_url"$>indeximage/toptitle_w.svg" alt="読み込み中">
    </div>
    <header class="header">
      <nav class="navPc">
        <ul class="pcMenu">
        <li class="<$mt:Var name="homeAct"$>"><a href="<mt:Var name="website_url" />">HOME</a></li>
        <li class="pulMenu <$mt:Var name="worksAct"$>"><a href="<$mt:Var name="website_url"$>works/">WORKS</a>
            <ul class="rowMenu">
            <li><a href="<$mt:Var name="website_url"$>works/">WORKS</a></li>
              <li><a href="<$mt:Var name="website_url"$>subpost/">畑の敵</a></li>
              <li><a href="<$mt:Var name="website_url"$>friendship/">中立派or友好派</a></li>
            </ul>
          </li>
        <li class="<$mt:Var name="resulteAct"$>"><a href="<$mt:Var name="website_url"$>result/">RESULTE</a></li>
          <li class="topIcon">
            <h1><img src="<$mt:Var name="website_url"$>indeximage/logo.svg" alt="THE 畑"></h1>
          </li>
          <li class="<$mt:Var name="mtAct"$>"><a href="<$mt:Var name="website_url"$>about/">Movable Type</a></li>
          <li class="<$mt:Var name="contactAct"$>"><a href="<$mt:Var name="website_url"$>contact/">CONTACT</a></li>
        </ul>
      </nav>
      <h2 class="spH1">
        <a href="<$mt:Var name="website_url"$>">
          <img src="<$mt:Var name="website_url"$>indeximage/logo.svg" alt="THE 畑">
        </a>
      </h2>
      <img src="<$mt:Var name="website_url"$>indeximage/menu_open.svg" alt="メニューを開く" id="openMenu">
    </header>

アーカイブテンプレート: ウェブページ

固定ページのベースです。MT独自仕様だと思うのですが、ウェブページでフォルダを作成するとフォルダ名が親メニューとなり、フォルダ内のページは子メニューになります。
URLに反映されるのでこの仕組みを条件分岐に使いました。
冒頭にfolderNameの変数を代入しておき、if文で切り替え。装飾子eqは”同じ値”となります。因みにlikeだと”含む”に。

固定記事テンプレート
  <mt:SetVarBlock name="folderName"><mt:PageFolder><$mt:FolderBasename$></mt:PageFolder></mt:SetVarBlock>
  <$mt:Include module="config"$>
  
  <mt:If name="folderName" eq="works">
    <mt:SetVars>
    metatitle=WORKS畑の収穫物一覧|<$mt:WebsiteName$>
    pagetext=Movable type8で構築した親サイトのアーカイブ一覧です
    metaurl=<$mt:BlogURL$>works/
    worksAct=act
    </mt:SetVars>
    <$mt:Include module="header"$>
  
    <main class="mainPage">
        <div class="mainImag">
          <picture class="mainImg">
            <source srcset="<$mt:BlogRelativeURL$>indeximage/works_top_sp.jpg" media="(max-width: 768px)" />
            <img src="<$mt:BlogRelativeURL$>indeximage/works_top.jpg" alt="">
          </picture>
        </div>
        <section class="container topDotted">
        <$mt:Include module="breadcrumb"$>
        <$mt:Include module="worksList">
        
      <!-- ページネーションインクルード -->
        <$mt:Include module="pagination"$>
        </section>
        <!-- //.container -->
      </main>
  
  <mt:Elseif name="folderName" eq="contact">
    <mt:SetVars>
    metatitle=お問い合わせ|<$mt:WebsiteName$>
    pagetext=A-Formで構築したテストフォームです
    metaurl=<$mt:BlogURL$>contact/
    contactAct=act
    </mt:SetVars>
    <$mt:Include module="header"$>
    <main class="mainPage">
        <div class="pageVar">
          <h3 class="pageTitle">CONTACT<small>お問い合わせ</small></h3>
        </div>
        <section class="container">
        <$mt:Include module="breadcrumb"$>
        <$mt:Include module="contact"$> 
        </section>
        <!-- //.lineBox -->
      </main>
  
  <mt:Elseif name="folderName" eq="result">
    <mt:SetVars>
    metatitle=RESULTE |<$mt:WebsiteName$>
    pagetext=収穫物は食べてます
    metaurl=<$mt:BlogURL$>result/
    resulteAct=act
    </mt:SetVars>
    <$mt:Include module="header"$>
    <main class="mainPage">
        <div class="mainImag">
          <picture class="mainImg">
            <source srcset="<$mt:BlogRelativeURL$>indeximage/result_top_sp.jpg" media="(max-width: 768px)" />
            <img src="<$mt:BlogRelativeURL$>indeximage/result_top.jpg" alt="">
          </picture>
        </div>
        <section class="container topDotted">
        <$mt:Include module="breadcrumb"$>
        <$mt:Include module="result"$>
        </section>
        <!-- //.container -->
      </main>
  <mt:Else>
  </mt:If>
        
  <$mt:Include module="footer"$>

このテンプレートはアーカイブマッピングを設定しておきURLを決めておきます。
パス
folder-path/page-basename.html

worksフォルダを作成してウェブページの新規作成でファイル名をindex.htmlに、フォルダ選択をworksにします。contact、resultもそれぞれ同様に。

モジュール: worksList

ここはメイン記事の一覧ページとして作成。自動書き出しのループがメインとなります。
ページャーのプラグインが適用されるブロックなので専用タグも挟み込みます。
<mt:PageContents count="10">をEntriesの外側にセット。countは1ページの表示件数。

ポイントは</mt:Entries>の前に

<$mt:PageSeparator$>

を置く。

worksList
  <mt:PageContents count="10">
  <mt:Entries lastn="0" sort_order="descend">
  <mt:PageContentsHeader>
  <ul class="cropLi">
  </mt:PageContentsHeader>
    <li>
      <figure>
      <a href="<$mt:EntryPermalink$>">
        <mt:worksImgMainAsset>
        <img src="<$MTAssetURL$>" alt="">
        </mt:worksImgMainAsset>
      </a>
      </figure>
      <section class="cropR">
      <h3 class="cropTitle"><$mt:EntryTitle$></h3>
        <p class="ditail">
          <span class="postDate">投稿日：<$mt:EntryDate format="%Y年%m月%d日"$></span>
        <mt:EntryCategories type="primary">
          <span class="cropCat"><a href="<$mt:CategoryArchiveLink$>">収穫期：<$mt:CategoryLabel encode_html="1"$></a></span>
        </mt:EntryCategories>
        </p>
        <p class="postText"><$mt:EntryExcerpt words="50"$></p>
        <p class="toArticle"><a href="<$mt:EntryPermalink$>">詳細はこちら</a></p>
      </section>
    </li>
  <mt:PageContentsFooter>  
  </ul>
  </mt:PageContentsFooter>
      <$mt:PageSeparator$>
  </mt:Entries>
  </mt:PageContents>

モジュール: pagination

ページ送りを置きたい所にセットする。

簡単におきたい場合は以下だけでもセットできる。

<$mt:PageLists$>

出力結果

<span class="current_page"$>1</span$>
<a href="ページリンクURL" class="link_page"$>2</a$>
<a href="ページリンクURL" class="link_page"$>3</a$>
paginationテンプレート
  <!-- ページネーション（共通） -->
  <mt:Pagination>
  <mt:PaginationHeader>
  <ul class="pager">
      <mt:IfPaginationPrev><li class="prevPage"><a href="<$mt:PaginationPrev$>" rel="prev" class="prev"><img src="<mt:Var name="website_url" />indeximage/arrow_try_le.svg" alt=""></a></li></mt:IfPaginationPrev>
    </mt:PaginationHeader>
    <mt:IfPaginationCurrent>
      <li class="num"><a class="current"><$mt:PaginationLink element="number"$></a></li>
    <mt:Else>
      <li class="num"><a href="<$mt:PaginationLink$>"><$mt:PaginationLink element="number"$></a></li>
    </mt:IfPaginationCurrent>
    <mt:PaginationFooter>
      <mt:IfPaginationNext><li class="nextPage"><a href="<mt:PaginationNext$>" rel="next" class="next"><img src="<mt:Var name="website_url" />indeximage/arrow_try_re.svg" alt=""></a></li></mt:IfPaginationNext>
    </ul>
  </mt:PaginationFooter>
</mt:Pagination>

アーカイブテンプレート: カテゴリ一覧

workslistと同じくループメインの書き方になります。
このテンプレートもアーカイブマッピングを設定しておきURLを決めておきます。
カスタムを選択しました。

パス
works/%-c/%i

アーカイブテンプレート: シングル

今までのページとほぼ同じですが、シングルページなのでmt:Entriesは必要なさそうです。あるとループしてしまいます。
ここもアーカイブマッピングを設定しておきURLを決めておきます。
カスタムを選択しました。

パス
works/post/%-c/%-f

single
  <$mt:Include module="config"$>
  <mt:SetVars>
    metatitle=<$mt:EntryTitle encode_html="1"$> | <$mt:WebsiteName$>
    pagetext=<$mt:EntryExcerpt words="30" encode_html="1"$>
    metaurl=<$mt:EntryPermalink$>
    ogimage=<mt:worksImgMainAsset><$MTAssetURL$></mt:worksImgMainAsset>
    worksAct=act
  </mt:SetVars>
  <$mt:Include module="header"$>
    <main class="mainPage">
        <div class="pageVar">
          <h3 class="pageTitle">WORKS<small>畑の収穫物</small></h3>
        </div>
        <div class="container">
          <!-- パンくず -->
          <$mt:Include module="breadcrumb"$>
  
          <div class="postArticle">

         　<!-- コンテンツ省略 -->

            <div class="articleText">
            <$mt:EntryBody encode_html="1"$>
            <$mt:EntryMore$>
          </div>
        </div>
        <!-- //.postArticle -->

        <ul class="pageMark">
        <mt:EntryPrevious>
        <li><a href="<$mt:EntryLink$>"><img src="<$mt:BlogRelativeURL$>indeximage/page_prev.svg" alt="前へ"></a></li>
        </mt:EntryPrevious>
          <li class="toList">
            <a href="<$mt:BlogRelativeURL$>works/">畑の収穫物一覧へ</a>
          </li>
        <mt:EntryNext>
        <li><a href="<$mt:EntryLink$>"><img src="<$mt:BlogRelativeURL$>indeximage/page_next.svg" alt="次へ"></a></li>
      </mt:EntryNext>
      </ul>
    </div>
    <!-- //.container -->
  </main>

子サイト

子サイトのテンプレートの書き方は親サイトとほぼ同じです。
インクルードする際、親サイトから引っ張ってくるパーツだけparent="1"を追記します。

<$mt:Include module="config" parent="1"$>

インデックステンプレート:404

オリジナルの404ページを作成しました。インデックステンプレートでURLを404.htmlにします。
.htaccessに以下を記述してサイトディレクトリ直下にアップ。

ErrorDocument 404 /mt8/404.html

構築してみて・・・

細かいことは省略しましたが、titleとか記事の書き出しは全部エスケープ処理をした方がいいかもです。

encode_html="1"

プライベートなので端折ってしまいましたが仕事なら付けておいた方が良いです。

あとページャーですが現在のままだと途中が省略できないような・・・

今後の課題です。

※今回コンテンツが少ないので子メニューは作りませんでしたが、自分のチートシートとしてメモです。

  <!-- 子ページのあるナビゲーション -->
  <ul>
    <mt:TopLevelFolders><!-- 親階層のフォルダー宣言 -->
    <li>
      <a href="#">
      <$mt:FolderLabel$></a><!-- フォルダー名を入れる -->
      <ul>
          <mt:Pages><!-- 繰り返すブロック -->
              <li>
                  <a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a>
              </li>
          </mt:Pages>
      <mt:SubFolders><!-- サブ階層のフォルダー宣言 -->
          <li>
              <$mt:FolderLavel$><!-- サブフォルダー名 -->
          </li>
          <mt:Pages no_folder="1"><!-- フォルダーが無い場合の表示設定 -->
              <li>
                  <a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a>
              </li>
          </mt:Pages>
          <$mt:SubFolderRecurse$><!-- ループ終わり -->
      </mt:SubFolders>
      </ul>
    </li>
    </mt:TopLavelFolders>
  </ul>

THE畑サイト

以下が今回構築したサイトです。
食料の足しになればとプライベートで収穫した野菜をメインにコンテンツを作りました。
https://spica.okamechan.com/mt8/

Discussion