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

Movable Type 6 のレスポンシブ デザイン対応の公式テーマ「Apex」をカスタマイズする方法をご紹介します。

Movable Type は2018年に Movable Type 7 がリリース予定になってますね。

  

Apex のダウンロード

Apex の適用

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

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

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

Movable Type の管理画面から Apex をカスタマイズする

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

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

テーマを適用する前に Apex のファイルを直接カスタマイズする

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

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

Sass と Compass のインストール

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

NetBeansでSassを使う環境を作る

Node.js のインストール

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

Grunt を使用する

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 を必ずしも使わなければならないということはありません。

  

共有やブックマークなど