テンプレートセットってなに?

ブログのスタイル、表示コンテンツ、レイアウトなどは、テンプレートセットで定義されます。ブログに新規記事を作成すると、記事は特定のテンプレートによって指定されたフォーマットとスタイルを使用します。テンプレートセットとは多種多様な目的を満たす、いろいろなテンプレートのセットです(例えば、バックナンバーとインデックスページのように)。

テンプレートビルダーで、デザインや、スタイル、コンテンツ(マイリストやマイフォト、その他のサイドバーコンテンツ)のどれを表示するかというような、ブログのレイアウトを管理することができます。

ブログのタイトルとトピックに合ったテンプレートセットを作ることができます。例えば、読んでいる本の感想を読書日記に書いてる場合、読んでいる本を紹介するためにサイドバーに本のマイリストを含めたテンプレートを作ることができます。

テンプレートセットの種類

テンプレートには「ベーシック」と「上級者向け」の2種類があります:

ベーシックテンプレートセット

ベーシックテンプレートセットは、テンプレートビルダーで変更することができます。

参考:新規のベーシックテンプレートセットを作成する

上級者向けテンプレートセット

上級者向けテンプレートセットでは直接ブログのテンプレートのHTMLコードを編集することができます。

参考:上級者向けテンプレートってなに?

2004 02 23 [ブログ─デザイン] | 固定リンク

テンプレートセットを選択する

ココログにはあらかじめ、いろんな種類のベーシックテンプレートセットが用意してありますので、その中から自分に合ったものを選んですぐにブログを始めることができます。テンプレートセットを選択する際は、以下のステップにしたがってください。
ベーシックテンプレートセットと自分でカスタマイズしたテンプレートセット、 そしてココログデザインというきれいな画像などをふんだんに使ったリッチテンプレートから選ぶことができます。なおココログデザインの使い方は、リッチテンプレート使用方法(管理画面から)およびリッチテンプレート使用方法(ココログデザインから)をご覧ください。


  1. ブログを選択後、【デザイン】タブをクリックするか、管理画面のブログの便利メニューから「デザインの編集」をクリック

  2. 画面右の「別のテンプレートセットを選択する」の説明に従い、使いたいテンプレートセットをプルダウンメニューから選択
    各テンプレートセットがどんなデザインなのか確認したいときは、プルダウンメニューで選択して「確認」をクリックするとプレビュー画面が開きます。

    レイアウトの幅について

    可変を選択すると、ブラウザーのウィンドウサイズによって、ブログの記事エリアが広がったり縮んだりします。

    逆にコンテンツの幅は固定することもできます。これはブラウザーのウィンドウサイズによることなくテンプレートで指定されたサイズにのままで固定されることを意味します。


  3. 「このテンプレートセットを使用」ボタンをクリック
    画面左で黄色い背景の「現在選択されているテンプレートセット」の下に、新しく選んだテンプレートセットの名前が表示されているのがわかるはずです。
    ただし、ここで新しく選択したテンプレートセットの内容はブログを再構築するまでは公開中のサイトには反映されません。つまり、再構築を実行しないと、見に来た人はそのブログを新しいデザインで見ることができないということです。

  4. 「反映」ボタンをクリック
    現在選択されているテンプレートセット欄のテンプレート名の下に「確認」と「反映」の2つのボタンがあります。この2つのボタンはテンプレートを確認することができたり、ブログの反映をすることができます。「反映」をクリックしてブログに新しいテンプレートを反映してください。

    反映後、「サイトを確認」をクリックすると、新規ウインドウで新しいテンプレートのブログを見ることができます。サイトが前のテンプレートのままの場合は、ブラウザによってはリロードやキャッシュのクリアをする必要があるかもしれません。


2004 02 23 [ブログ─デザイン] | 固定リンク

新規のベーシックテンプレートセットを作成する

ブログを選択後、【デザイン】タブをクリックするか、管理画面のブログの便利メニューから「テンプレーセットの編集」をクリックしてください。

【デザイン】タブで、「新しいテンプレートセットを作成する」を使って新しいテンプレートセットを作成します。新しいテンプレートを初めから作成する場合は「新デザイン」をチェックします。また、すでにあるテンプレートを新しいテンプレートのベースにする場合は「以下のセットをベースにする」を選択して、プルダウンメニューからベースにするテンプレートセットを選択してください。

ココログテンプレートビルダーについて

ココログテンプレートビルダーは次の5つのステップに分かれています。

ブログのレイアウトは、テンプレートセットのレイアウトを設定をします

表示するコンテンツは、どの項目を表示するかを設定します

表示するコンテンツの並べ方は、サイドバーでのアイテムの並び順を設定します

ブログのスタイルは、テンプレートの色、フォント、境界線や幅などのスタイルを設定します

テンプレートセットは、テンプレートセットの名前を設定します


個別のステップについての情報は、それぞれの項目を参考にしてください。

2004 02 23 [ブログ─デザイン] | 固定リンク

テンプレートのレイアウトを設定する

テンプレートのレイアウトで、何列にするか決めます。

次のレイアウトの中から選択してください。

1列(サイドバーなし)
サイドバーのないレイアウトです。すっきりした、余分な要素のないレイアウトなので、ブログの本文に集中してもらいやすくなります。リンクやそのほかの情報は画面の一番下に表示されます。

2列(左サイドバー付)

マイリストやリンクなどの情報を左側にまとめて表示します。シンプルかつ応用範囲の広いレイアウトです。記事を表示するスペースは広く、追加情報も十分に表示することができます。

2列(右サイドバー付)
マイリストやリンクなどの情報を右側にまとめて表示します。シンプルかつ応用範囲の広いレイアウトです。記事を表示するスペースは広く、追加情報も十分に表示することができます。

3列(両サイドバー付)
ブログの本文以外に表示したい補足情報が大量にある場合は、このレイアウトが最適です。見た目も充実した感じで、写真やリンク、マイリストなどの情報も最もたくさん掲載することができます。


「レイアウト」リンクをクリックした後、「変更を保存」ボタンをクリックしてください。

2004 02 23 [ブログ─デザイン] | 固定リンク

テンプレートの表示項目を設定する

テンプレートの表示項目は、記事の表示項目とサイドバーの表示項目の大きく2つに分けられます。

ブログの記事


・日付ヘッダー

日付ごとに記事をグループ表示できます。日付はそれぞれの日付の変更時にブログ上に表示されます。日付ヘッダーの表示を有効(または無効)にするには、このチェックボックスを使用します。

・記事のタイトル

記事のタイトルを表示できます。このオプションを使って、記事作成時(または編集時)に入力した記事のタイトルを表示できます。記事のタイトルを有効(または無効)にするにはこのチェックボックスを使用します。

・フッター
フッターでは、ライターの名前、投稿日時、カテゴリー、固定リンク、コメントやトラックバックへのリンクといった情報を表示することができます。フッターを有効(または無効)にするにはこのチェックボックスを使用します。また、プルダウンメニューからフッターに表示する情報のスタイルを選択してください。

・固定リンクについて

ココログでは、一つ一つの記事ごとにページが作成され、URLが自動的に割り振られます。固定リンクとは、この一つの記事ごとのページのURLのことです。ココログの記事にリンクをはる際は、この固定リンクにリンクをはるようにしましょう。

ブログのメインインデックスから記事が表示されなくなった後でも固定リンクのリンク先でつねに記事にアクセスすることができます。既定値では記事のフッターに常に固定リンクが表示されます。

サイドバーのコンテンツ

・写真
プロフィールで登録した写真をサイドバーに表示できます。この写真は【コントロールパネル】タブからプロフィールのプロフィールを選んで「プロフィール写真」を使って変更できます。

・カレンダー
サイドバーに現在の月のバックナンバーにリンクしたカレンダーを表示できます。日付はその日付の中で最後に投稿された記事にリンクされています。

・最近の記事
サイドバーに最新の10記事を表示することができます。

・最近のコメント

サイドバーに最新の10コメントを表示することができます。

・最近のトラックバック
サイドバーに最新の10トラックバックを表示することができます。

・バックナンバー
サイドバーにバックナンバーを表示することができます。メインインデックスに記事が表示されなくなってからはバックナンバーのリンクを通して記事にアクセスすることができます。

・カテゴリーへのリンク
サイドバーに、記事に割り当てられたカテゴリーを表示することができます。カテゴリーを表示するには【ブログ】タブから設定>カテゴリー設定でカテゴリー別のバックナンバー形式を有効にしてください。詳しくは、「ブログのバックナンバーを設定する」を参照してください。

・プロフィールページ
プロフィールページへのリンクを表示することができます。プロフィールページの設定は、「プロフィールページをカスタマイズする」を参照してください。

・メールリンク

あなたのメールアドレスへのリンクを表示することができます。
あなたのメールアドレスはスパム業者に利用されないように、自動的に符号化され守られます。
メールアドレスの設定方法は「プロフィールを編集する」を参照してください。

・連携リンク

「このサイトと連携する(XML)」というリンクを表示することができます。サイトを RSS形式で記述したページへのリンクです。

・「人リストに追加」リンク
このページを見た人が、自分のココログ(マイリスト)にあなたを登録するためのリンクです。

・マイフォト
マイフォトのアルバムのリストをサムネイル(小さな画像)を使って表示します。

・更新順ココログ一覧
最近更新されたココログのブログを一覧表示します。

【重要】
このリストは最近ココログで更新されたものを無作為に表示するものです。あなたにとって不愉快な内容を含むブログなどへのリンクをあなたのブログ内に表示する可能性もあることをあらかじめご承知おきください。

・「Powered by ココログ」のリンク(ココログプラス、ココログプロのみ設定可能)
“Powered by ココログ”というココログサービスへのリンクを表示します。

ココログへの登録年月の表示を有効(または無効)にするには、チェックボックスを使用します。

・マイリスト

あなたのマイリストの一覧を表示します。もしブログ上に表示したいのならば、表示したいマイリスト名のチェックボックスを選択してください。もし、リストの内容が空(何も項目が登録されていないマイリスト)ならばブログ上にも空で表示されます。新しいマイリストを作成する場合は、新しいマイリストを作成するを参照してください。

表示したいマイリストを選択したら「変更を保存」ボタンをクリックしてください。

2004 02 23 [ブログ─デザイン] | 固定リンク

表示項目の並べ方を設定する

ここでは、あなたが選んだテンプレートの表示項目の表示の順番を設定することができます。ドラッグ&ドロップでそれぞれの表示項目をブログ上のサイドバーの好きな場所に並べてください。

並べ替えがすんだら、「変更を保存」をクリックしてください。

2004 02 23 [ブログ─デザイン] | 固定リンク

テンプレートのスタイルを設定する

スタイルでは、ブログの色、フォント、枠線、幅、そのほかのフォーマットなどを設定できます。


  • ベーシック利用者のテンプレートについて
    ベーシックではあらかじめ提供されたデザインのテンプレートから選択します。使いたいテンプレートをプルダウンメニューで選び、「このテンプレートセットを使用」をクリックしてください。

    参考:ブログ用スタイル一覧


  • ココログプラス/ココログプロ利用者のテンプレートについて
    ココログプラス/ココログプロ利用者は色、フォント、枠線、記事表示列の幅、バナーイメージのアップロードなどのカスタマイズをすることができます。

    スタイルの各要素を変更した後に、各項目のプレビューエリアで変更された状態を確認できます。また「確認」ボタンをクリックすることで、変更されたブログの状態を確認することができます。

    各要素の変更が終わったら、「変更を保存」ボタンをクリックしてください。

    各要素のカスタマイズ

    • ページ全般の設定
      この要素ではページの背景色と幅、メインコンテンツの背景色と幅、サイドバーの背景色と幅を設定できます。また枠線の設定やリンクのスタイルも設定できます。

    • タイトルバナー
      この要素では文字または画像でバナーを設定できます。文字バナーの場合は、文字のフォント、サイズ、スタイル、配置、枠線、文字の色とバナーの背景色が選べます。画像バナーを使用する場合は、「タイトルバナーに画像を使用する」にチェックをして、ブログにバナーとしてアップロードしたい画像をブラウザーで選択してアップロードしてください。

    • 記事表示欄
      この要素では日付ヘッダー、(記事の)タイトル、(記事の)本文、(記事の)フッターの設定をすることができます。文字のフォント、サイズ、色、配置、スタイル、そして枠線の設定もできます。また、記事の本文の行間も指定することができます。

    • サイドバー項目
      この要素ではサイドバー項目のスタイルを設定することができます。文字のフォント、サイズ、色、配置、そして枠線などの設定もできます。また、サイドバーの行間、画像のリンクの枠線の設定ができます。

      サイドバーに独自にリンクのスタイルを使ったり、ページ全般の設定でのリンク設定を使うことができます。

スタイルの変更が終わったら、「変更を保存」ボタンをクリックしてください。

2004 02 23 [ブログ─デザイン] | 固定リンク

テンプレートの名称を設定する

ココログでは設定したテンプレートをテンプレートセットとして、複数持つことができます。
基本設定では、テンプレートセットの名前と、テンプレートセットの説明を設定することができます

・テンプレートセットの名前
設定したテンプレートセットの名前を入力欄に記入してください。

なぜテンプレートセットの名前をつけるのでしょう?

テンプレートセットをあとから変更したり、新しいサイトを作るにあたって、すでにあるテンプレートセットをもとにする場合は、そのデザインや目的に合わせてテンプレートセットに新しい名前を付ける必要があります。

テンプレートセットの名前を変えておくことで、多くのテンプレートを作成する際に各テンプレートを管理しやすくなります。

・テンプレートセットの説明
テンプレートセットについての説明を入力欄に記入してください。

記入が終わったら、「変更を保存」ボタンをクリックしてください。

2004 02 23 [ブログ─デザイン] | 固定リンク

ベーシックテンプレートを編集する

テンプレートセットの変更は、同じテンプレートを使用しているすべてのブログに適用されます。

・テンプレートセットについて
ブログの【デザイン】タブをクリックするか、管理画面の【ブログ】タブををクリックして表示された「ブログ」の一覧から「デザインの編集」をクリックしてください。

「テンプレートセットを編集」をクリックするとテンプレートの一覧を見ることができます。
ここには、テンプレートビルダーを通して作成、または編集したテンプレートセットが表示されます。それぞれのテンプレートセットのデザインを確認するには、各テンプレートセットの名称をクリックしてください。テンプレートセットのレイアウト、コンテンツ、並べ方、スタイル、名称などの特定の項目を編集したい場合は項目名をクリックしてください。

・テンプレートセットを削除する
テンプレートセットを削除したい場合は、リストの削除の下にあるチェックボックスを使って削除したいテンプレートを選択します。次に「削除」ボタンをクリックするとあなたのアカウント上から完全に削除することができます。もし、削除したいテンプレートが現在のブログで使用されている場合は、【デザイン】タブの「デザインを選択」を使って別のテンプレートが選択されるまで削除できません。

2004 02 23 [ブログ─デザイン] | 固定リンク

上級者向けテンプレートセットってなに?

(この機能は、ココログプロでのみ利用可能です)

上級者向けテンプレートセットでは直接HTMLやCSS、ココログテンプレートタグを編集することができます。上級者向けテンプレートセットを作るためには、テンプレートビルダーで作ったテンプレートを変換する必要があります。

なぜテンプレートセットの変換が必要なの?

もしHTMLを知っていたり、ココログのテンプレートタグの使い方に詳しいのであれば、自分のココログのデザインやフォーマットをもっとコントロールしたいと思うでしょう。

または、他のブログシステムでデザインされたものをココログに読み込みたいと思うかもしれません。

そのようなユーザーのためにテンプレートが変換できるようになっています。

テンプレートの変換をするとどうなるの?

テンプレートの変換をすると、まず初めに、テンプレートビルダーで作成されたテンプレートセットの複製が作られます。そして、上級者向けテンプレートセットとして、直接編集できるフォーマットに変換されます。

変換をしても、変換に使ったオリジナルのテンプレートセットは、テンプレートビルダーで編集できるテンプレートセットとして残ります。

なぜ、ゼロから上級者向けテンプレートセットを作ることができないの?

テンプレートの複製と変換は、上級者向けテンプレートセットで必要になる個々のテンプレートの要素をココログ側で確実に用意するための方法だからです。

2004 02 23 [ブログ─デザイン] | 固定リンク

上級者向けテンプレートセットを作成する

(この機能は、ココログプロのみ利用可能です)

【デザイン】タブを開いていなければ、【ブログ】タブをクリックした後、【デザイン】タブをクリックしてください。もしくは、管理画面のブログ一覧から「デザインの編集」リンクをクリックしてください。

そこで、「テンプレートセットを編集」リンクをクリックしてテンプレートセットの一覧を表示します。


  1. 変換するテンプレートセットを選択してください

    上級者向けテンプレートセットとして使いたいテンプレートセットを、一覧の中からチェックボックスを使って選択してください。

    テンプレートセットの変換をしても、選択された既存のテンプレートセットに変更は加えられません。そのかわり選択されたテンプレートセットをもとにして、上級者向けテンプレートセットが作成されます。


  2. 「変換」ボタンをクリックしてください

    「変換」ボタンをクリックすると、変換をしていいか確認するポップアップウインドウが表示されますので、「変換する」ボタンをクリックしてください。

    「変換する」ボタンをクリックすると、上級向けテンプレートセットの一覧の中に、今変換された新しい上級者向けテンプレートセットが表示されます。「編集」リンクか、テンプレートセットの名称をクリックすると編集できます。


  3. 上級者向けテンプレートセットをココログに割り当てる

    【デザイン】タブの「デザインを選択」をクリックして、「別のテンプレートセットを選択する」のプルダウンメニューから割り当てたい上級者向けテンプレートセットを選択します。「このテンプレートセットを使用」ボタンを押して変更を反映してください。

2004 02 23 [ブログ─デザイン] | 固定リンク

ブログ用スタイル一覧

ココログ ベーシックのユーザーのみなさまに提供している
ブログのスタイル一覧です。
参考:テンプレートのスタイルを設定する


サクラ


ルージュ

ハロー

アメジスト

カフェオレ

パール

あゆ

ボックス_カーキ

ボックス_グリーン

和風

ダンディ

@nifty_1

@nifty_2

トマト

システム

クリスマス_赤

クリスマス_緑

無地

パプリカ

モノトーン

クール

ビジネス

清流

タイプパッド風

フレッシャー

サーフ

ライン_ネイビー

ライン_ワイン

エレガンス


カナリア軍団

専用

M▲TRIX

山手線
   

2004 03 08 [ブログ─デザイン] | 固定リンク

ココログ(TypePad)独自のテンプレートタグ一覧

ココログやTypePadで独自に拡張しているテンプレートタグの一覧は、以下の通りです。
ココログのテンプレートでは、下記のタグの他に、MovableType互換のテンプレートタグ(Movable Type タグ、MT tags)も利用可能です。MT tagsについては、各所ホームページや書籍を参考にしてください。


  • MTUserSiteURL

    ユーザーのブログ全体のベースになるアドレスを表示するタグ
  • MTUserStartDate

    加入した日付を表示するタグ。format属性で日付を設定することができる。
  • MTUserEmail

    ユーザーのメールアドレスを表示するタグ
  • MTUserIfPhoto

    ユーザーの写真が登録されているかどうかを示すコンディション・タグ
  • MTUserPhoto

    登録されているユーザーの写真のURLを表示するタグ
  • MTUserPhotoWidth

    登録されているユーザーの写真の幅を表示するタグ
  • MTUserPhotoHeight

    登録されているユーザーの写真の高さを表示するタグ
  • MTUserDELIPOP

    プロフィールに登録した DELIPOP アカウントを表示するタグ
  • MTUserAIM

    プロフィールに登録した AIM アカウントを表示するタグ
  • MTUserICQ

    プロフィールに登録した ICQ アカウントを表示するタグ
  • MTUserYahoo

    プロフィールに登録した Yahoo Messenger アカウントを表示するタグ
  • MTUserMSN

    プロフィールに登録した MSN Messenger アカウントを表示するタグ
  • MTUserInterests

    プロフィールに登録した興味のあることを表示するタグ
  • MTUserBio

    プロフィールに登録した自己紹介を表示するタグ
  • MTUserMiniBio

    プロフィールに登録した一行紹介を表示するタグ
  • MTStatsScript

    アクセス履歴を取得するためにウェブページに埋めこむタグ
  • MTGalleriesInclude

    マイフォトのアルバム一覧を表示するタグ。
  • MTListInclude

    リストを表示するためのタグ。アトリビュート name に名前を指定し、そのリストの内容を表示する。

2004 03 11 [ブログ─デザイン] | 固定リンク

記事本文の表示幅がブラウザの幅に合わせて伸縮するテンプレートを利用したい

記事本文の表示幅がブラウザの幅に合わせて伸縮するテンプレートを利用したい場合は、次の通りご利用できます。

ココログベーシックをご利用のみなさま:
管理画面にログインし、デザイン編集画面の「スタイル」の設定で「春」を選択します。(「春」は幅が伸縮するテンプレートです。)

ココログプラスをご利用のみなさま:
管理画面にログインし、デザイン編集画面の「スタイル」の設定ページにて、「ページ全般の設定」の「編集」ボタンをクリックします。ポップアップウィンドウが表示されるので「記事表示列」の中央列の設定にて、「可変」を選択します。これで、本文幅がブラウザの幅によって伸縮するテンプレートとなります。設定保存し、ページを反映させてください。

※リッチテンプレートは、デザインの制約上すべて伸縮できないテンプレートとなっております。

ココログプロをご利用のみなさま:
上記「ココログプラスをご利用のみなさま」と同じ方法がご利用になれます。さらに、プロにしかない上級テンプレート機能で、cssの設定を編集することで、本文幅がブラウザの幅によって伸縮するテンプレートをご利用になれます。

2005 06 24 [ブログ─デザイン] | 固定リンク

テンプレートとスタイルはどう違うの

「テンプレート」は、レイアウト、表示項目、並べ方、スタイル、名称の5つの要素を総称したものです。
「スタイル」は、テンプレートの1要素で、背景色や文字色の設定です。

2005 07 08 [ブログ─デザイン] | 固定リンク

月額のリッチテンプレートの利用をするには

ココログデザインの月額課金のリッチテンプレートの利用をするには次の手順をとって下さい。

1.ココログデザインのサイトから、利用したい月額リッチテンプレートの詳細画面へ移動し、「リストに加える」ボタンをクリックします。

getu_1

2.最初の1回だけ、ココログアカウントのログイン画面がポップアップウィンドウで表示されます。テンプレートを利用したいココログアカウントでログインしてください。2回目以降は自動的にログインとなります。 getu_2_2

3.テンプレートの確認画面が表示されます。利用上の注意と、リッチテンプレートをリストに加える先のココログアカウントを確認し、「リストに加える(有料)」をクリックます。

4.@niftyの認証のダイアログボックスが表示されます。3.で表示されたココログアカウントをご利用中の@niftyIDとパスワードを入力してください。

getu_4

getu_3_2

※@niftyIDとココログアカウントを複数お持ちのお客さまは特にご注意ください。3.のココログアカウントと4.の@niftyIDが異なっていた場合、リッチテンプレートは、4.で入力した@niftyIDでご利用中のココログのテンプレートのリストへ追加されます。

5.確認画面が表示されます。ご利用の初回月は無料となりますが、翌月からテンプレート毎のご利用料金が発生いたします。

getu_5_2

2005 08 03 [ブログ─デザイン] | 固定リンク