CMS入門：第2日目

MovableTypeのカスタマイズ：CSS（補足）

CSSのカスタマイズを試す際、変更したことが分かりやすい箇所をピックアップしました。

386行目から（本文のフォント指定）
body {
    font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif;
    font-size: 12px;
}

・font-familyを変えてみる
・font-sizeを変えてみる

451行目から（本文のフォント指定）
body {
    min-width: 720px;
    color: #333;
    background: #36414d;
}

・colorを変えてみる
・backgroundを変えてみる（周辺の色が変わる）

469行目から（バナーのサイズと色）
#banner {
    width: 710px; /* necessary for ie win */
    background: #a3b8cc;
}

・backgroundを別の色に変更してみる（バナーの背景色が変わる）
・バナーの背景に画像を設定する
　background-image: url(http://www.***/***/banner.gif);
　background-repeat: no-repeat;
　background-position: left top;

489行目から（バナーのヘッダ部分のフォントなど）
#banner-header {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    text-shadow: #36414d 0 2px 3px;
}

・font-sizeを変えてみる
・font-family指定を追加してみる
　例：font-family: "ＭＳ Ｐゴシック", "Osaka";

529行目から（エントリーのヘッダ部分のフォントなど）
.entry-header {
    margin-top: 0;
    border-left: 5px solid #dae0e6;
    padding: 0 0 0 10px;
    color: #666;
    font-size: 18px;
}

・border-leftの幅を変えてみる
・border-leftの色を変えてみる
・font-sizeを変えてみる
・font-family指定を追加してみる

MovableTypeのカスタマイズ：テンプレート

テンプレートの役割

MTでは、エントリーとして作成したファイルを、テンプレートに従って再構築し、最終的なHTMLを生成します。テンプレートには、通常のHTMLのタグに加えて、MT専用のタグが記述されています。

テンプレートは、メインページやアーカイブページなど、ページの種類ごとに用意されています。スタイルシートが全体共通で1枚なのに対して、テンプレートは多くの種類があるという点には注意が必要です。

テンプレートで使用されているタグ

テンプレートで使用されているタグは、SixApartのマニュアルにも説明があります。

• テンプレート・タグについて
• テンプレートの種類
• テンプレート・タグ リファレンス

MTはブログ用としてかなりメジャーなツールであるため、ウェブや書籍での解説もかなり充実しています。ただし、バージョン3.1→3.2→3.3と、マイナーバージョンアップにもかかわらず、比較的大きな変更が繰り返されましたので、最新の3,3に対応した解説になっているかどうかに関しては注意してください。

• Movable Type 3.3 のテンプレートタグリファレンス自家用版
• MovableTypeテンプレートタグ辞典

簡単なテンプレートのカスタマイズ例

エントリの本体はMTEntriesから/MTEntriesまでの間に書かれたものが表示されます。

メインページに常時表示したいテキストがある場合には、次のように間に書くことで表示されます（この例ではclassをentry-body、表示位置をセンタリングにしています）。

MovableTypeのカスタマイズ：StyleCatcher

デフォルトのスタイルシートからカスタマイズしていくのはCSSの勉強にもなりますが、ゼロからスタイルシートを書くのは大変です。そうした場合、StyleCatcherというプラグインを使用して、自分の目的に近いデザインを選択した後、カスタマイズしていくのと比較的楽にカスタマイズすることができます。

準備

まず、cgi-bin/mt/plugins/StyleCatcherにあるstylecatcher.cgiの属性をデフォルトの644から700に変更します。また、mt-static/themesの属性を777に変更します。

次に、「メイン・メニュー > システム・メニュー > プラグイン」StyleCatcherプラグインの「設定を表示」をクリックし、以下の設定を参考にURLとパスを設定します。

設定が終わったら、Movable Type - Style Libraryからベースにするスタイルを選択します。スタイルが選択できたら「Show Details」をクリックし、表示された項目の中から「Zip File」のリンクをクリックしてダウンロードします。ダウンロードが終わったら解凍し、mt-static/themesにフォルダごとアップロードします。

アップロードが終わったら、StyleCatcherを選んで「デザインを適用」し、「サイトを再構築」します。

最終課題制作に向けての注意

CMS入門で制作しているブログは、特にアクセス制限などをかけることなく運用されています。これは、Googleなどの検索エンジンを含めて、外部から誰でも見られる状態になっていることを意味します。このため、次のような点には十分注意して制作を進めてください。

• 他人の著作権を侵害するような行為
• 公序良俗に反する内容
• 自分自身に関する事項も含めて個人情報に該当する内容を掲載すること

こうした点には十分注意することが必要です。しかし、自分でよく考えた上で自分なりの情報発信をしていくことは、様々な意味で重要です。もしどうしても判断に迷うような点があれば、担当教員などに相談してください。

ブログに記載した内容の著作権について

特に明記しなくとも、皆さんがブログに書いた文章は公開した時点で著作権が発生します。著作権は、みなさんの創作物の権利を保護するための重要なものです。しかし、過度に著作権が保護されることにより、新たな創作が著しく制限されてしまう危険性もあります。こうした問題について、クリエイティブコモンズという新しいライセンスの考え方があり、MTではオプションの設定次第でこのライセンスの元で公開していることを簡単に表示できるようになっています。ブログは気軽に始められる表現活動の1つですが、こうした著作権の問題についても関心を持ち続けていくことが重要です。

外部エディタでテンプレートを編集する

方法1：テキストエディタとの間でコピー＆ペーストする

MTのテンプレート（スタイルシートも含む）を本格的に編集する場合、ウェブブラウザ上のフォーム内で編集するだけでは保存を行う度にどこを編集していたのかが分からなくなってしまい、不便です。これを解消するための方法として、フォーム内テキストを一度テキストエディタにコピー＆ペーストし、テキストエディタ上で編集を加えてからフォーム内にコピー＆ペーストする、という方法があります。この方法では、毎回コピー＆ペーストが必要になりますが、編集していた箇所を見失うことがありませんので便利です。

方法2：「このテンプレートにリンクするファイル」を設定する

これ以外の方法としては、「このテンプレートにリンクするファイル」という設定項目を利用する当方法があります。次の図は設定例です。ここでは、public_htmlの下にtemplatesというフォルダを作り、その中に保存するよう設定しています（フォルダのみ用意すれば、ファイルは「保存と再構築」ボタンをクリックすると生成されます）。このようにリンクを設定すると、外部エディタでファイルを編集し、FTPでこの位置にアップロードし、サイトを再構築することで自動的に反映されるようになります。一見、コピー＆ペーストするのと大きな違いがないように思えるかもしれませんが、高機能なFTPクライアントではローカルのファイルを編集するかのようにサーバ上のファイルを編集する機能がありますので、この仕組みを利用すると便利です。