TypePad上級者テンプレートによるカスタマイズの手順(2)

TypePadブログのカスタマイズ手順の２つ目の記事です。

前回のTypePad上級者テンプレートによるカスタマイズの手順(1)で準備したhtmlファイルとcssファイルを使って、オリジナルのデザインを適用していきます。

なお、この記事はhtmlとcssがある程度理解していることを前提に書いています。
以下で紹介する画像のアップロード移行の作業を、私はDreamWeaverを使って行いました。普段お使いのオーサリングソフトをご利用ください（もちろん、テキストエディタに手打ちでもかまいません）。

1.画像のアップロード

コーディングに入る前に、TypePadの管理画面から、新しいデザインで使用する画像をアップロードします。

• 画像のアップロードは管理画面上のメニュー「タイプリスト/アルバム」プルダウンの中の「ファイルマネージャー」より行います。
  
• アップロードするのは、TypePad上級者テンプレートによるカスタマイズの手順(1)で作成したテスト用ブログのディレクトリです。
  フォルダの一覧から該当のディレクトリ名をクリックすると、そのフォルダ内に新しいフォルダを作成できます（画面の右側にある「新しいフォルダを作成」メニューより）。
  imagesなど、画像ファイルをまとめて入れるのに適したフォルダ名を決めて、フォルダを作り、その中に画像をアップロードしてください。

2.htmlファイルの修正（必要なら、JavaScriptの追加）

• TypePad上級者テンプレートによるカスタマイズの手順(1)で準備したhtmlファイルを必要に応じて修正します。
  ★修正した部分は、後で分かりやすいようにコメント等付けておいてください。
• ここで修正するのは、たとえばブログのタイトル部分を画像にする、twitterのタイムラインを表示するエリアを新たに加えるなど、コンテンツの内容にかかわる部分のみで、cssでスタイルを定義するために新たにセレクタを追加したり、divやspanで囲むということは、とりあえずはやらなくてよいです。
  （というのも、TypePadで生成されるhtmlは、ある程度どんなスタイルでも定義できるようなdivやid、classの定義がされているからです。これについては後述。）
• 新しくJavaScriptの追加をする場合、後でその部分を新しいテンプレートとして登録する必要がありますが、とりあえずは気にしないで、普通のWebサイトを作るとき同様にスクリプトや外部ファイル参照の記述をします。
• また、cssファイルの修正を反映させて確認できるように、絶対パスになっているcssファイルのURLをローカルファイルを参照するように、一時的に書き換えます。

※画像のパスは絶対か相対か？

1でアップロードした画像の参照を指定するとき、html上では絶対パス、css上では相対パスで指定しました。

今回、いったんテスト用ブログのテンプレートを作成してから、本物のブログに適用するため、すべて相対パスで指定できれば、本物のブログに適用するときもパスの修正が不要で楽です。
cssは該当ブログのディレクトリの直下に配置されるため相対パスで問題ありません。

htmlの方は、６種類あるhtmlによって配置される階層が異なります。
それぞれの階層に合わせて画像の相対パスを指定することも可能ですが、それが面倒なので、html内では常に絶対パスを書くようにしてしまいました。

3.cssファイルの修正

• まず、htmlファイルから参照しているstyle.cssを修正します。
  修正前は、サンプルテーマのスタイルシートasterisk-style.cssをインポートするようになっていますが、これを新しく作るオリジナルのcssをインポートするように書き換えます（オリジナルのcssのファイル名は好きに付けます）。
• その後、そのオリジナルのcssを新規作成して新しいデザインを適用していきます。
  「2.ｈｔｍｌファイルの修正」のところで書いたように、TypePadのhtmlは、ある程度どんなデザインでも適用できるようなdivやid、classの定義がしてあります。
  以下に、TypePadビジネス（法人向けのTypePad）のヘルプページから拝借したhtml構造の説明図を載せておきます。
  これが分かっていると、スタイルの定義がとてもやりやすいと思います。

以下、上の図の補足と私がやった主なカスタマイズ内容です。
上級者テンプレートのhtmlの場合、以下のようになっています。

• h1 #banner-header
  ブログのタイトルです。私はここをテキストから画像に変更しました。
• h2 #banner-description
  タイトル下に表示されるブログの概要説明です。

• #nav
  上の図にはありませんが、#bannerと#pagebodyの間に#navが入ります。

• これは、ヘッダの下に表示される「ホーム」「アバウト（プロフィール）」「アーカイブ」「購読」というナビゲーションリンクの部分です。
  
• #pagebody
  この中に、サイドメニューとブログ記事が入ります。
• #alpha
  ブログの記事がここに入ります。
• #beta
  サイドバーの内容がここに入ります。
  私は、この中に入っている検索窓の部分を#navと#pagebodyの間に移動させました。

※上級者テンプレートではなく、既存のテンプレートを使っている場合、管理画面で設定したレイアウト（「2列左サイドバー付き」とか「3列右サイドバー」など）によって、自動的に#alpha、#beta、#delta、#gammaの中身が入れ替わります（左に来る内容から順番に、#alpha、#beta、#delta、#gammaに入る）。
ですが、上級者テンプレートの場合は固定で、#delta、#gammaは使われません。

※サイドメニューに足りない項目と不要な項目

• 上級者テンプレートのhtmlでは、サイドメニューに「最近の投稿」の表示がありません。
  これを表示するためには後でテンプレートを追加する必要がありますが、出力されるhtmlに付くセレクタはサイドメニューの「アーカイブ」と同じで、以下のようになります。
  
  h2 .module-header　・・・「最近の投稿」というタイトルが入る
  div.module-content ul.module-list li.module-list-item ・・・　最近の投稿のタイトルリンクが入る
  
• また、上級者テンプレートのhtmlでは表示されているけれど、不要なメニューがあると思います（私の場合、プロフィール写真など）。
  これらについて、最初は元の記述を残してコメントアウトにしておこうかと思ったのですが、後でテンプレートにしたときにタグが入れ子になって意図通りにコメントアウトにならなかったりしたので、いらない要素はざっくり削除してしまったほうが良いようです。

このようにして、とりあえずはブログテンプレートではなく普通のhtml、cssとしての修正をし、見栄えを確認しながら新しいデザインを適用していきます。
これが終わったら、次は修正内容をテンプレートの方に反映していくことになります。