今回の講座で、実現するカスタマイズ
ブログのトップページや、個別ページなど、各ページの一番上に表示されるタイトル部分の背景に、オリジナル写真を表示します。デザインの中でも目立つ部分なので、ブログの雰囲気が変わると思います。
カスタマイズ前
カスタマイズ後
デザイン・テーマを選択
カスタムCSSの特徴として、変えたい部分をピンポイントで指定することができます。カスタマイズしたい場所以外は、TypePadに用意されている「テーマ」を利用して、手軽にデザインを指定しましょう。
「ブログ」 >> 「デザイン」 >> 「テーマを変更」
「涼しげな色」カテゴリの「Blue Crush」テーマを選んでみました。どのテーマを選んでも、カスタムCSSは正確に反映されるはずですので、好きなテーマを選んでください。タイトル部分に、画像などが指定されていない物がよいでしょう。
背景画像を作成して、TypePadにアップロード
タイトル・バナー部分の背景写真を作成します。フォトショップなどの、お好みの画像編集ソフトで作成してください。例として、横８００×縦１５０の少し大きめな画像を作成しました。
タイトル・バナー部分の幅や高さは、選択されたデザイン・テーマごとに若干ことなるので、少し大きめに作成するぐらいがよいでしょう。画像全体がピッタリ表示されなくても、うまく雰囲気がでるような写真を選ぶのが、背景画像選択のこつです。
サンプル background.jpg (JPEG 画像, 800x150 ピクセル)
作成した画像を、ファイルマネージャーを利用してTypePadにアップロードします。デザインの素材をアップロードするためのフォルダーを作成し て、そこにアップロードしておくと、あとで分かりやすいでしょう。日本語ファイル名の画像をアップロードすると、後でCSSを指定する時に問題になりま す。画像ファイルは、background.jpgのような英語ファイル名にしてください。
「コントロールパネル」 >> 「ファイル」 >> 「ファイルをアップロード」
アップロードした画像のURLを、確認・メモしておいてください。
カスタムCSSの指定
いよいよ、カスタムCSSの指定をおこないます。
「ブログ」 >> 「デザイン」 >> 「カスタムCSSを編集」
カスタムCSSの機能では、CSSを直接記述します。タイトル・バナーのCSSを指定するIDは #banner です。各項目を簡単に説明すると、
- background-image: 背景画像のURLを指定
- background-repeat: 画像が小さい場合、繰り返して表示するか
- background-position: 画像の表示位置
- text-align: ブログ・タイトル文字の位置
具体的には、以下のCSS記述を参考にしてください。このCSS記述を、カスタムCSSの入力欄に記入して、「変更を保存」ボタンを押します。
#banner
{
background-image: url(http://example.typepad.jp/sample_design/myimages/background.jpg);
background-repeat: no-repeat;
background-position: center;
text-align: right;
}
完成！
「デザインの変更が保存されました。」とメッセージが表示され、トップページなどはすでに新しいデザインが適用されています。個別エントリーなど、すべてのページにデザインを反映するためには、「アーカイブを再構築」ボタンをクリックしてください。
カスタムCSSを利用していると、テーマを好きに変更することも可能です。「テーマを変更」を選んで、何種類かのテーマを試してみましょう。ほとんどのテーマで、ちゃんと指定したオリジナルの背景画像が表示されると思います。この柔軟性が、カスタムCSSの特徴です。
