Bloggerのテーマのカスタマイズ ＝コンテンツ編集＝

Bloggerのテーマをロディアのブロックメモ風にカスタマイズするための手順について、今回はコンテンツ領域の背景画像の設定の方法を紹介します。ただし、htmlやcssについてはほぼ初心者で、内容はWeb上にある指南記事の寄せ集めなので、もっと良いやり方があるだとか、変更すべきコードはそこではないとか色々あるかと思いますが、そのあたりはどうかご容赦ください。

1. 背景画像のアップロード
2. htmlの編集
3. 変更の確認と保存
4. テーマのバックアップ

1. 背景画像のアップロード

Bloggerには他のブログにあるような画像アップロードの機能がありません。そのため、背景に使用する画像を記事中にアップロードし、そのURLを取得する必要があります。

まず、管理画面から新しい投稿で記事作成画面に移り、画像の追加 ⇒ アップロードで背景画像をアップロードします。次に、もう一度画像の追加を選び、「このブログから」で表示される画像の中から先程アップロードした背景画像を右クリックするといくつかの選択肢が表示されるので、その中から画像アドレスをコピーを選択します。コピーしたアドレスは一旦メモ帳などに保存しておきます。管理画面に戻り、記事を削除するのですが、記事を削除しても記事中にアップロードした画像までは削除されないので大丈夫です。

2. htmlの編集

管理画面からブログ画面下の「htmlの編集」を選び、html編集画面に移行する。htmlの170行目あたりにある

/* Content
----------------------------------------------- */

の最後の部分に背景画像の設定コードを下のように書き加えます。

background-color: $(content.background.color); 
/* コンテンツに背景画像を設定 */ 
 background-image: url("ここに背景画像のURL"); 
}

3. 変更の確認と保存

「テーマをプレビュー」でコンテンツ部分に背景画像が表示されているのを確認した後、「テーマを保存」する。「戻る」で管理画面に戻り、左のメニュー一番上の「ブログを表示」でもう一度変更を確認します。

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

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