Movable Type 6のテーマ「Apex」をカスタマイズする

この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

Apex のダウンロード

mt-theme-apex の Github のページからファイルをダウンロードします。
themes/apex フォルダを Movable Type をインストールしているディレクトリ内の themes フォルダにアップロードします。

ウェブサイトまたはブログを選択し、サイドメニューから [デザイン] – [テーマ] を選択します。
Apex の選択し、適用ボタンをクリックします。
テーマを反映させるために、再構築をおこないます。

サイドメニューから [デザイン] – [スタイル] を選択すると、Apex で用意されている Styles for Apex からスタイルを選択することができます。

カスタマイズ方法として一番簡単なのは Movable Type の管理画面からテンプレートを編集する方法だと思います。
サイドメニューから [デザイン] – [テンプレート] を選択します。

主に、”インデックステンプレート” “アーカイブテンプレート” “テンプレートモジュール” を追加または編集することによりカスタマイズが可能です。
テンプレートを変更したら再構築をおこないましょう。

Github のページからダウンロードしたファイル群を直接編集する方法をご紹介します。

buildフォルダの Gruntfile.js と package.json を見るに、少なくとも “Grunt” と Sass” と “Compass” が使用されていることがわかります。
scssファイルを修正するためにはこれらが必要です。

Sass と Compass を使用するためには Ruby も必要になります。
インストール方法はこちらの記事を参考にしてください。

NetBeansでSassを使う環境を作る

Grunt を使用するために Node.js のサイトから Node.js をインストールします。

cd C:\mt-theme-apex-master

コマンドプロンプトまたはターミナルを開き、ダウンロードしたファイルを解凍したフォルダに移動します。

cd build/ && npm install && grunt build

build フォルダに移動し、node.js のパッケージをインストールし、Gruntfile.js で定義されている “build” というタスクをgruntコマンド使用してを実行します。

build フォルダに .sass-cache フォルダと node_modules フォルダが作成されました。

cd build/

npm install

grunt build

一つ一つ実行することも可能です。
その後、Sass のファイル base.scss をCSSファイルにコンパイルしたいときは grunt build を実行します。

ファイル保存時に base.scss をコンパイルしたいときは grunt watch で監視しておきましょう。

Sass のファイルを編集してコンパイルするという意味では Grunt を必ずしも使わなければならないということはありません。