« 『そめけん!』9月7日第20回放送 | メイン | TypePad上級者テンプレートによるカスタマイズの手順(2) »

2010/09/10

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

先日やってみたTypePadの上級者テンプレートを使ったブログデザインカスタマイズの手順のメモです。
ブログのデザインを刷新」という記事にも書きましたが、デザインを自由にしたい人はMovable Typeを使ってそうなのであまり需要がないかもしれないですが、自分の忘備録として、以下のプロセスごとに分けて書いていきます。

  1. 準備(テスト用ブログ、htmlとcssのダウンロード、テンプレートのバックアップ)(本記事)
  2. 画像のアップロード、htmlとcssの修正
  3. テンプレートの追加・修正、テスト用ブログの動作確認
  4. 本番ブログに適用

今回は「1.準備(テスト用ブログの作成、htmlとcssのダウンロード、テンプレートのバックアップ)」について。

まず、以下の作業はブログの見た目のデザインと、そのために必要な画像の準備などは済んでいる前提での話です(後述のように、一般的なブログのデザインであれば大抵のことはできると思いますので、好きなようにデザインします。私はPhotoshopでページごとのデザインを作成し、使用する画像をスライスしました)。

テスト用ブログの作成

上級者テンプレートが使えるTypePad Proは有料ですが、作れるブログの数は無制限です。
そこで、テンプレートのカスタマイズを試しながら調整できるように、テスト用のブログを新たにひとつ作ります。

デザインは「上級者テンプレート」を選びます(ダッシュボードの「デザイン」ページの「テーマを選択」をクリックして開くページで、「カスタマイズ」をクリックすると、「上級者テンプレート」が選択できます)。
Design1

Design2

見栄えを確かめるため、テスト用のエントリーをいくつか入力します。
実際に運用しているブログのエントリー内容のコピーとかで、なるべく画像や実際に使うタグ(リストタグとか、h4タグとか)を含んだ内容で、かつ月とカテゴリも複数あったほうが、見栄えの確認が確実になります(エントリーを投稿するときに、ステータスを「今すぐ公開」ではなく「投稿日時を指定」にし、過去月の日付を指定して公開すれば、複数の月にまたがった投稿ができます)。
コメントやトラックバックを受け付ける場合は、それらも表示された状態にしておきます。

htmlとcssのダウンロード

作成したテスト用ブログで、以下のページを表示させてそれぞれのhtmlをダウンロードします。
※ここでは「テンプレート」ではなく、生成されるhtmlの方をブラウザから保存します。

  • トップページ
  • アーカイブページ(ブログタイトル下のナビゲーションメニュー内「アーカイブ」をクリックして表示される archives.html)
  • エントリー個別ページ(あるエントリーのタイトルをクリックして表示されるページ)
  • 月別アーカイブ(右サイドの年月をクリックして表示される 2010/09/index.html といったページ)
  • カテゴリ別アーカイブ(右サイドのカテゴリ名をクリックして表示される、カテゴリ名のディレクトリ配下のページ)
  • 検索結果ページ(検索窓を付ける場合。検索結果がある場合とない場合の2種類表示させ、ダウンロードしておく)

次に、以下3つのcssファイルをダウンロードします。

  1. styles.css(各ページのhtmlで指定しているスタイルシート)
  2. base-weblog.css(style.cssから呼び出している、TypePadの共通スタイルシート)
  3. asterisk-style.css(style.cssから呼び出している、上級者テンプレートのサンプルテーマのスタイルシート)

それぞれ、ブラウザでURLを指定してダウンロードすることもできますが、1と3はダッシュボードの「デザイン」ページから上級者テンプレートの「カスタマイズ」を選択して表示される「インデックステンプレート」の一覧から内容を表示させてコピーしてきてもよいです。

Css 

asterisk-style.cssはカスタマイズできないcssファイルなので、上記画面からは見られません。
ブラウザで以下のようにURLを指定すると表示されます。(xxxxxxxxxx契約しているドメイン名による)
http://xxxxxxxxxx.typepad.jp/.shared/themes/common/base-weblog.css

これで準備は完了。
後は、これを元に主にcssを、必要に応じてhtmlをカスタマイズしていく作業になります。

トラックバック

この記事のトラックバックURL:
https://www.typepad.com/services/trackback/6a0120a666f2a1970c0133f4119d39970b

Listed below are links to weblogs that reference TypePad上級者テンプレートによるカスタマイズの手順(1):

» TypePad上級者テンプレートによるカスタマイズの手順(2) from おーぷんlog
TypePadブログのカスタマイズ手順の2つ目の記事です。 前回のTypePad上級者テンプレートに... [続きを読む]

» TypePad上級者テンプレートによるカスタマイズの手順(3) from おーぷんlog
TypePadブログのカスタマイズ手順の3つ目の記事です。 これまでの記事 Typepad上級者テン... [続きを読む]

» TypePad上級者テンプレートによるカスタマイズの手順(4) from おーぷんlog
TypePadブログのカスタマイズ手順の最後の記事です。 これまでの記事 Typepad上級者テンプ... [続きを読む]

コメント

フィード You can follow this conversation by subscribing to the comment feed for this post.

この記事へのコメントは終了しました。

最近のコメント

Tweet

follow yatun on twitter

Powerd by TypePad. | Designed by Eri Yatsuzuka.