TypePad上級者テンプレートによるカスタマイズの手順(3)
TypePadブログのカスタマイズ手順の3つ目の記事です。
これまでの記事
- Typepad上級者テンプレートによるカスタマイズの手順(1)
準備（テスト用ブログ、htmlとcssのダウンロード、テンプレートのバックアップ） - Typepad上級者テンプレートによるカスタマイズの手順(2)
画像のアップロード、htmlとcssの修正
手順（２）でベースとなるhtmlとcssを完成させたら、テスト用ブログのテンプレートを修正します。
テスト用ブログのダッシュボードから「デザイン＞テンプレート」メニューから、各テンプレートのページを開いて修正をしていきます。
以下、対象のテンプレートごとに修正内容を説明します。
HTMLテンプレートの修正
Main Index Template (トップページのhtmlテンプレート）
Archive Index Template (アーカイブページのhtmlテンプレート）
Category Archives(カテゴリーアーカイブページのhtmlテンプレート）
DataBasedArchives(月別アーカイブページのhtmlテンプレート）
IndividualArchives(個別の記事ページのhtmlテンプレート）
Search Results（検索結果ページのhtmlテンプレート）
上記はすべてhtmlのテンプレートですが、手順（２）において上のテンプレートに対応するページのhtmlを修正したら、それを反映します。
修正の仕方は、以下のどれかになると思います。
(1)HTMLタグを直接修正・追加する。
手順（２）では、htmlとcssの修正結果をローカルで確認できるように、htmlでしているスタイルシートのパスを、ローカルのファイルのパスに変えていたかと思います。
それを、Typepadの独自タグが混じった "<$MTBlogURL$>styles.css"に戻します。
また、ブログタイトルを画像にする、といった場合、元のテンプレートでは
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
となっているところを、
<h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><img src="xxxxxx.jpg" width="273" height="90" alt="おーぷんlog" /></a></h1>
というように、
<$MTBlogName$> という、独自のタグを普通のhtmlの<img>タグに書き換えます。
また、各要素の出力順番を入れ替えることもあります。
例えば、元々のテンプレートではサイドの項目は「検索」「プロフィール写真」「プロフィールリンク」「カテゴリー一覧」…、という順番になっているけれど、最初に「カテゴリー一覧」を持ってきたい、というような場合。
該当の内容が出力される独自タグを見つけて、適宜順番を入れ替えます。
独自タグが混じっているので、書き換えるべき箇所が分かりにくいこともありますが、手順(1)でダウンロードした各ページのhtmlと見比べて、前後のタグなどを手がかりに探します。
(2)必要ない要素を削除する。
元々のテンプレートでは表示されるようになっているけれど、オリジナルのデザインでは不要な項目は、これも該当のタグの部分を見つけて削除します。
例えば私の場合はプロフィール写真は表示したくなかったので、<$MTInclude module="user-photo"$>を削除しました。
また、各記事の最後に公開日時と一緒に誰が書いた記事なのか、ユーザー名が出るようになっているのですが、私しか書かないブログなのでそれは不要。
この場合は<$MTTrans phrase="Posted by [_1] at" param="MTEntryAuthorNickname"$>
を削除します。
間違えたところを削除したりして失敗するのが怖かったので、最初は本当に消すのではなく<!-- -->でコメントアウトしていたのですが、これはうまく行かない場合がありました。
というのは、上記のような独自タグの部分は、内容を別のモジュールから読み込むのですが、そのモジュールの中にもコメントが書かれていて、結果として生成されたhtml上はコメントのカッコが入れ子になってしまい、意図通りに隠したいところが隠せなかったりするためです。
(3)足りない要素を追加する。
私の場合、Twitterのタイムラインを表示するためのJavaScriptと、サイドに表示する「最近の投稿」を追加しました。
対象のテンプレートに直接タグを入力してもよいのですが、対象のテンプレートが何個もある場合は、共通で使う「モジュール」を追加し、それを読み込むようにします。
モジュールの作り方は後述しますが、モジュールを読み込む箇所に<$MTInclude module="モジュール名"$>というタグを書きます。
追加モジュールを作る
上の（３）で出てきたモジュールの追加です。
必要な場合は、テンプレートメニューの「＋新しいテンプレートモジュールを作成」というリンクをクリックし、新しいモジュールの内容を登録します。
モジュールというのは、html内に記述されている内容の一部をそのまま切り取ってきたようなものです。
複数の箇所で全く同じhtmlが登場するときには、モジュールにしておくと共通で使えて便利です。
上の（３）で説明したように、<$MTInclude module="モジュール名"$>と書いたところに、モジュールとして登録した内容がそのままパカっとはまりますので、その前提でコメントなども含めて、普通のhtmlやJavaScriptを記述します。
ちなみに、「最近の投稿」を表示させるためのモジュールはこちらのヘルプページを参考にしました。
サイドバー項目を加える（上級者テンプレート）
スタイルシートのテンプレートを修正する
まず、「＋新しくインデックステンプレートを作成」をクリックして、手順（２）で作ったオリジナルデザインのための独自のスタイルシートを新規登録します。
または、上級者テンプレートのサンプルとして登録されている「Theme Stylesheet」の内容を書き換えても良いです。
私は、元々の「Theme Stylesheet」はそのまま置いておいて、全く別の名前の新しいスタイルシートを登録しました。
「Theme Stylesheet」のファイル名はそのままで中身を書き換えた場合は、CSSの修正は終わりです。
もし、「Theme Stylesheet」とは別のスタイルシートを新規登録した場合は、Stylesheet (適用するスタイルシートをインポートするスタイルシート）の修正が必要です。
@import "asterisk-style.css"; となっている"asterisk-style.css"を新しく登録したスタイルシートのファイル名に変えれば、オリジナルのCSSを読み込むようになります。
表示確認
ここまでできたら、テスト用のブログを表示して、意図通りにデザインが変わったかどうかを確認します。
コメント