今回の講座で、実現するカスタマイズ
前回は、タイトル・バナー部分の背景画像を設定しました。今回は、背景画像に加えて、ロゴ画像を表示します。このような画像配置も、上級テンプレートでHTMLを編集することなく、カスタムCSSだけで実現する事が可能です。
カスタマイズ前
カスタマイズ後
ロゴ画像の準備
フォトショップなどの画像編集ソフトで、ロゴ画像を作成します。すでに設定した背景画像をいかすためにも、ロゴ画像の背景を透明にして、GIF画像 で保存します。背景画像と同じような色の上にロゴ画像を作成して、透明にする処理をすると、グラデュエーションがきれいに表示されます。背景を透明にする 方法は、各画像編集ソフトのマニュアルを参照してください。
作成したロゴ画像を、TypePadのコントロールパネルからアップロードします。
「コントロールパネル」 >> 「ファイル」 >> 「ファイルをアップロード」
カスタムCSSの指定
前回のカスタムCSSに追加する形で、ロゴ画像用のカスタムCSSを記述します。
「ブログ」 >> 「デザイン」 >> 「カスタムCSSを編集」
ロゴ画像を指定するためのIDは、#banner-inner です。指定するCSSの書式は、ほとんど前回と同じです。ロゴ画像を右側に表示したいので、ブログ名を左側に表示することにします。
#banner
{
background-image: url(http://example.typepad.jp/sample_design/myimages/background.jpg);
background-repeat: no-repeat;
background-position: center;
text-align: left;
}
#banner-inner
{
background-image: url(http://example.typepad.jp/sample_design/myimages/css_bgimage_logo.gif);
background-repeat: no-repeat;
background-position: right;
}
完成！
「デザインの変更が保存されました。」とメッセージが表示され、トップページなどはすでに新しいデザインが適用されています。個別エントリーなど、すべてのページにデザインを反映するためには、「アーカイブを再構築」ボタンをクリックしてください。