アメブロの記事タイトルとサイドバーの設定

ステップ６「サイドカラムA・B の背景色を変更」の続きです。アメーバブログに自動車販売をイメージしたカスタマイズを行います。

ステップ７「記事タイトルの背景用画像設定」

ブログを投稿する際の「タイトル」に入力した文字が表示される部分です。背景用画像の設定と文字色の変更を行います。

「ブログを書く」-「デザインの変更」-「CSSの編集」の「ブログデザインヘッダ・背景用画像の追加」から「ファイルを選択」して記事タイトルの背景用画像をアップロードします。

今回は、縦 27 px 横 420px の記事タイトル背景用画像を用意しました。

上の背景用画像は無料素材となっておりますので、よろしければご利用下さい。右クリックから「名前を付けて画像を保存」して、アメブロへログインしてアップロードして下さい。

アップロードが完了すると、上の画像のように「この画像のパス」が表示されます。画像のパスを、右クリックからすべて選択してコピーします。

変更前の CSS コード
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #333333; /*-- 濃いグレー --*/
}

背景色の代わりに背景用画像を設定し、背景用画像の色に合わせて記事タイトルの文字色を変更します。

変更後の CSS コード
/*７）記事タイトルの背景色を変更する*/
.entry h3.title{
background-image:url(タイトル背景用画像のパスをペーストしてください);
}
/*８）記事タイトルの文字色を変更する*/
.entry h3.title{
color: #f2f5f9; /*-- 濃いグレー --*/
}

変更箇所は「かんたんCSS編集はこちら」の ７ と ８ です。

変更箇所を素早く見つけるには、ブラウザ上の検索が便利です。

「Ctrl ＋ F」で検索ボックスを表示して、例えば「/*７）記事タイトルの背景色を変更する*/」などで検索すると変更箇所をすぐに見つけることができると思います。

「表示を確認する」か「保存」してブログを確認すると、記事タイトルの背景が指定した画像に変更されていることを確認できます。

記事タイトルに背景用画像を設定することで、全体的なデザインのバランスが良くなったかと思います。

ステップ８「サイドバーの背景用画像設定」

記事タイトルに続いて、サイドバーの背景用画像と文字色を設定します。

設定方法は、記事タイトルと同じです。

今回は、縦 23 px 横 160px のサイドバー背景用画像を用意しました。

上の背景用画像は無料素材となっておりますので、よろしければご利用下さい。右クリックから「名前を付けて画像を保存」して、アメブロへログインしてアップロードして下さい。

ブログ全体の背景用画像・記事タイトルの背景用画像と同じように、サイドバーの背景用画像をアップロードして画像のパスをコピーします。

変更前の CSS コード
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #333333; /*-- 濃いグレー --*/
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
}

見出し文字色の変更と背景用画像の設定を行います。

変更後の CSS コード
/*９）サイドバーの見出し文字色を変更する*/
h4.menu_title{
color: #f2f5f9; /*-- 濃いグレー --*/
}
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-image:url(サイドバー背景用画像のパスをペーストしてください);
}

変更箇所は「かんたんCSS編集はこちら」の ９ と １０ です。

「表示を確認する」か「保存」してブログを確認すると、サイドバーの背景用画像が設定されたことを確認できます。

今回のカスタマイズでは、各サイドバーに個別に画像を用意する必要はありません。それぞれのサイドバーに共通の背景用画像を設定します。

今回のアメブロカスタマイズは、ステップ８ で完了です。シンプルな CSS コードの変更で、ブログの印象を大きく変更できたのではないかと思います。お役に立てば幸いです。