TypePad上級者テンプレートによるカスタマイズの手順(4)
TypePadブログのカスタマイズ手順の最後の記事です。
これまでの記事
- Typepad上級者テンプレートによるカスタマイズの手順(1)
準備（テスト用ブログ、htmlとcssのダウンロード、テンプレートのバックアップ） - Typepad上級者テンプレートによるカスタマイズの手順(2)
画像のアップロード、htmlとcssの修正 - TypePad上級者テンプレートによるカスタマイズの手順(3)
テンプレートの追加・修正、テスト用ブログの動作確認
テスト用に作成したブログで、オリジナルのテンプレートが意図通りに反映したことを確認できたら、いよいよ本番のブログに反映します。
画像のアップロード
手順(2)の最初の作業として、テスト用のブログで画像アップロード用のディレクトリを作成し、オリジナルのデザインで使用する画像をアップロードしました。
それと同じことを本番のブログでも行ないます。
- 画像のアップロードは管理画面上のメニュー「タイプリスト/アルバム」プルダウンの中の「ファイルマネージャー」より行います。
- テスト用で作成した画像用ディレクトリと、本番用のディレクトリとで、階層の深さや下層のディレクトリ名が違わないように作成してください。（異なっていると、CSSファイルの中で相対パスで指定している画像のURLを修正しなければいけないため）
上級者テンプレートの新規作成
本番のブログのダッシュボードの「デザイン」のページを開き、上級者テンプレートを追加します。
具体的な方法は、手順(1)でテスト用ブログを作った時と同様です。
- 「新しいデザインを作成」というところにある「テーマを選択」をクリックします。
左側のテーマのカテゴリ一覧にある「カスタマイズ」をクリックします。 - 下の画面が表示されたら「上級者テンプレート」を選択し、右側の「選択」ボタンをクリックします。
この時点では、まだ上級者テンプレートは本番のブログに適用されていません。
テスト用ブログで作成した各テンプレートの変更を反映し、このテンプレートを「適用」という作業をして初めて、ブログのデザインが変更されます。
上級者テンプレートのカスタマイズ
手順（3）では、テスト用のブログの上級者テンプレートをカスタマイズしました。それでできあがったオリジナルテンプレートの内容を、本番用の各テンプレートに上書きコピーしていきます。新しく作成したモジュールについても、本番用の上級者テンプレートの中に同じものを新しく作成します。
★このとき、画像のURLが絶対パスで指定されているところは、そのURLをテスト用から本番用に修正します。
上級者テンプレートの適用
テンプレートの修正・追加が終わったら、後はそれを適用するだけです。
方法は以下の2種類あり、どちらでも構いません。
- テンプレートの一覧ページの一番下の「◯◯◯◯（ブログ名）にデザインを適用する」をチェックし、「変更を保存」ボタンをクリックする。
- 該当ブログの「デザイン」トップページのテンプレートの一覧から、今作成した上級者テンプレートの「操作」のプルダウンリストより「適用」を選択する。
ブログの表示確認
適用の作業をしたら、本番のブログに反映するので、表示上おかしなところがないか、ブログの各ページを表示して確認します。
問題なければ、以上でテンプレートのカスタマイズ作業が完了です。
コメント