第3回：カスタムテンプレートを作ってみよう

ココログにはデザインが統一された「リッチテンプレート」 が多数準備されているのでこれをどんどん着せ替えて行っても楽しめますが、これにとらわれない自分専用のテンプレートを作ることも可能です。
特にフリープランの場合、「カスタムCSSの編集」が可能ですのでこれを使うことで、ブログの見た目をかなり自由に変更することが出来ます。
（'06/03/28の仕様変更に伴い、「ベーシック」、「プラス」の各プランでも利用できるようになりました）

今回はまず、CSSに行く前に自分の好きな配色で「カスタム・テンプレート」を作ってみましょう。
※「カスタムCSSの編集」は「カスタムテンプレート」にしか反映されませんので、 CSSを利用する場合もまずここから始めることになります。
※「リッチテンプレート」の設定については「ココログ：使い方ガイド」 内 『リッチテンプレート』のページに詳しく説明されていますので、こちらをご覧下さい。

新規テンプレートを作成する

1. 管理画面にログインし、「ブログ」タブ→「デザインの編集」→「新規テンプレートの作成」。
2. 『ステップ1：レイアウト』が表示されるので、 ここで自分が作りたいテンプレートのレイアウトを4つのタイプから選択しチェックを入れる。
3. 決定したら『ステップ2：表示項目を選択』へ。
4. ブログに表示したい項目にチェックを入れる。
   ※選択項目は全て初期値に戻っていますので、 以前他のテンプレート使用時にチェックを入れていた場合も最初から選択し直してください。
5. 全て選択したら『ステップ3：並べ方を設定』へ。
6. 前の画面で選択した項目でサイドバーに表示されるものが一覧で並んでいるので、この項目をドラッグ＆ ドロップで好きな順に入れ替える。
   ※ここで表示された項目に過不足がある場合はブラウザの「戻る」ボタンを使って『ステップ2』に戻れます。
7. 決定したら『ステップ4：テーマを設定』へ。
8. ここで表示されるデザインを決定する。
9. 「ココログオリジナル・テーマ」か「カスタムテーマ」のどちらかを選択する。
   ※「ココログオリジナル・テーマ」を選択した場合も 「カスタムCSSの編集」 は可能ですが適用できるCSSには制限があるようです。
   ※全面的に自分のオリジナルでカスタマイズしたい場合は、 「カスタムテーマ」を選択することをお薦めします。
   ※尚、このブログの中で取り上げるCSSによるカスタマイズはすべて 「カスタムテーマ」のテンプレートを基準にしたものです。
10. 「ココログオリジナル・テーマ」を選択した場合は、このまま『ステップ5：名前と説明を設定』へ。
    「カスタムテーマ」を選択した場合は更に各項目の設定へ（設定方法は後述）
    全ての項目の設定が終了したら『ステップ5：名前と説明を設定』へ。
11. カスタムテンプレートの名前と説明を設定する。
    ※どちらの項目も設定する、しないは任意ですが、自分で区別するために名前だけはつけておいた方がいいと思います。
12. テンプレートを保存する。
    「このテンプレートを保存」→完成したテンプレートの保存のみ
    ※今使用中のテンプレートは変わりません
    「このテンプレートを保存して適用」→完成したテンプレートを、今使用中のテンプレートに変えてブログに反映

■「カスタムテーマ」の設定方法
それぞれの項目の「編集」ボタンを押すと、編集ページが別画面で開きます。

• 『ページ全般の設定』
  「記事表示欄」と「サイドバー」
  それを合わせたページ全般の
  ＜背景色＞
  ＜枠線の有無・種類・色＞
  ＜リンクのスタイル・ 色＞
  が設定できます。
• 『タイトルバナー』
  ブログの一番上に表示されるタイトルバナー部分の
  ＜背景色＞
  ＜枠線の有無・種類・色＞
  ＜文字の位置・スタイル・色・フォント・ 大きさ＞
  を設定できます。
  また、オプションとして画像をバナーとして設定することも可能です。
  ※この設定については
  ■第4回： タイトルにオリジナルの画像を設定してみよう
  を参照して下さい。
• 『記事表示欄』
  記事のヘッダー、タイトル、本文、フッターについて
  ＜文字の位置・スタイル・色・フォント・大きさ＞
  ＜枠線の有無＞
  ＜行間＞
  などを指定できます。
• 『サイドバー項目』
  サイドバーに表示されるタイトル
  項目の＜文字のスタイル・フォント・大きさ・配置＞
  ＜枠線の有無・行間＞など
  画像の＜枠線の有無・ 配置＞
  リンクの＜文字色＞
  の指定が出来ます。

※設定を変更した場合は、画面下の 「変更を保存」ボタンを押して下さい。
※ここの設定が終了したら、前項【新規テンプレートを作成する】の11.に戻って下さい。

以上です。
うまく出来ましたか？

• 一度作成した「カスタムテンプレート」は「テンプレートの管理」画面で保存されます。
  ここでは作成したテンプレートを『複製（コピー）』することも出来ますので、基本になるものを一つ作成しておき、 次からはそれをコピーし名前を変えて利用すれば上記の手順を大幅に省略することも可能です。
• 各ステップの設定内容は「確認」ボタンを押せばブログに反映させずに確認出来ます。
• 一度設定した各ステップの設定にミス・モレがあったとしても後で何度でも修正することが可能です。
  内容を確認しながら少しずつ調整していきましょう。
• 「カスタムテンプレート」でそれぞれの項目を設定する場合、 「色」（文字色・ 背景色）については最初に表示されている色見本以外に自分の好きな色が指定できます。
  方法は、色見本の右にある記入枠の中に自分でカラーコード（6桁）を記入するだけです。
  ※カラーコードについては下記のページなどを参考にして下さい。
  ※また、検索サイトで「カラーコード表」などのキーワードで検索すればたくさん見つかります。
  ■参考： 「色のみじん切り」様　
• ココログの「使い方ガイド」でも「デザイン・ カスタマイズ」の項で、それぞれの手順について画像入りの詳しい説明がされています。
  参照して下さい。

---

■記事中の「how to」、「point」のボタンは素材サイト「PRISM」さんから頂きました。

---

*この記事にコメントを書く*

---