Bloggerのテーマのカスタマイズ ＝ ヘッダー編集 ＝

このブログの見た目をロディアのブロックメモ風にカスタマイズすることに挑戦してみました。ただし、htmlやcssについての知識はほとんどないので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あると思いますが、そのあたりはどうかご容赦ください。

1. 初期画面
2. ヘッダーの背景色の設定
3. タイトルを画像に変更
4. タイトルと説明の中央揃え
5. 変更の確認と保存
6. テーマのバックアップ

1. 初期画面

テーマは「SIMPLE」を選択します。いくつかのダミー記事とプロフィールを登録しただけの初期画面はこんな感じになります。

2. ヘッダーの背景色の設定

まず、ヘッダー部分の背景色をBloggerテーマデザイナーを使ってロディアカラーであるオレンジに変更します。このBloggerテーマデザイナーというのは基本テーマの背景、レイアウト、色、フォントなどを視覚的にカスタマイズできる便利なツールです。

管理画面の左のメニューから、テーマ　⇒　カスタマイズ　⇒　Bloggerテーマデザイナー　⇒　上級者向け　⇒　背景　⇒　ヘッダーの背景と選択して、背景色を設定します。下の画面で背景色を確認した後、右上の「Bloggerに戻る」で管理画面に戻ります。

3. タイトルを画像に変更

次に、ブログのタイトルを事前にドローイングソフトなどで作成した画像に変更します。管理画面からレイアウトを選択するとブログのガジェットの追加、削除、編集を行うことができる編集画面が表示されるので、ヘッダーの右下の編集をクリックします。

ヘッダーの編集ウィンドウが開くので、イメージの「コンピュータからファイルの選択」で予め作成しておいた画像を指定します。表示される画像を確認した後、「説明を画像の後ろに表示する」を選び、左下の保存で設定終了です。

レイアウト画面右上の「配置を保存」をクリックし、管理画面に戻った後、左のメニューの上にある「ブログを表示」で変更を確認します。

4. タイトルと説明の中央揃え

タイトルの中央揃えはBloggerテーマデザイナーではできません。従って、直接htmlを書き換える必要があります。管理画面のテーマからブログ画面の下の「カスタマイズ」の右にある「htmlの編集」をクリックするとhtml編集画面が表示されるので、htmlに以下の赤色部分のコードを書き加えます。ついでにタイトル画像の上が詰まっていてバランスが良くないのを解消するために上に余白も挿入しました。

350行目あたり

.header-outer { 
 background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px; _background-image: none; 
/* Header画像の上に余白を挿入 */
 padding-top: 20px; 
} 
/* Header画像を中央揃え */ 
.Header img{ 
 margin:auto; 
} 　　

370行目あたり

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
/* Header説明を中央揃え */
  text-align: center;
}

5. 変更の確認と保存

「テーマをプレビュー」でタイトル画像と説明が中央揃えになっているのを確認した後、「テーマを保存」します。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認して完了です。

6. テーマのバックアップ

ここまでのカスタマイズを保存するためにバックアップを作成します。管理画面の右上の「バックアップ／復元」をクリックすると開くウィンドウから「テーマをダウンロード」でバックアップファイルを任意のフォルダに保存します。