Cafi Netつながる情報技術
  1. トップ>
  2. アメブロカスタマイズ>
  3. 背景のカスタマイズ

アメブロの上部のリンクを消す(非表示)設定

ステップ3「タイトルと説明を消す(非表示)」の続きです。アメーバブログに自動車販売をイメージしたカスタマイズを行います。

ステップ4「背景画像の変更方法」

アメブロの背景用画像をアップロード

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

背景用無料素材1

今回は、縦 300 px 横 300px の背景用画像を用意しました。

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

アメブロの背景用画像のパス

アップロードが完了すると、上の画像のように「この画像のパス」が表示されます。

この画像のパスを、右クリックからすべて選択してコピーします。

/*5)ページ背景に画像を入れる*/
body{
background-image:url(画像のパスをペーストする部分);
}

CSS の「かんたんCSS編集はこちら」の「5)ページ背景に画像を入れる」の部分へ画像のパスをペーストします。

ペーストした背景用画像のパス

背景画像をカスタマイズしたアメーバブログ

「表示を確認する」か「保存」してブログを確認すると、ブログの背景画像が表示されます。

ステップ5「上部のリンクを消す(非表示)設定」

アメブロのヘッダー部分のリンク

ヘッダー画像の上のリンク部分(上の画像の赤の四角部分)を消して(非表示にして)、ヘッダー部分をスッキリさせたいと思います。

ヘッダー画像が綺麗に見えますし、記事までの距離を短くすることができます。(リンクを残したい方は、以下の操作は必要ありません)

追加する CSS コード
div#userNaviArea{
display:none;
}

ヘッダー部分のリンクを非表示にする CSS コード

上の CSS コードを「現在使用中のブログデザインCSS」の一番下に追加します。

ヘッダー部分のリンクが非表示になったアメーバブログ

「表示を確認する」か「保存」してブログを確認すると、ブログ上部のリンクが消えてスッキリしたことが確認できます。

ステップ6「サイドカラムA・B の背景色を変更」

コンテンツ全体と サイドカラムA サイドカラムB の背景色を変更します。

変更前の CSS コード
/*■コンテンツ全体*/
#frame{
background-color:#FFFFFF;
}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:#FFFFFF;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:#FFFFFF;
}

上の CSS コードの赤文字部分(カラーナンバー)を 3箇所変更します。

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

「Ctrl + F」で検索ボックスを表示して、例えば「/*■コンテンツ全体*/」などで検索すると変更箇所をすぐに見つけることができると思います。

変更後の CSS コード
/*■コンテンツ全体*/
#frame{
background-color:#d3d8e9;
}
/*■メインカラム*/
#main{
}
/*■サイドカラムA*/
#sub_a{
color:#666666;
background-color:#d3d8e9;
}
/*■サイドカラムB*/
#sub_b{
color:#666666;
background-color:#d3d8e9;
}

3箇所のカラーナンバーを変更しました。

コンテンツ全体とサイドカラムの背景色を変更

「表示を確認する」か「保存」してブログを確認すると、コンテンツの全体が指定した背景色に変更されたことが確認できます。

更に、ブログ本文の部分だけ背景色を変更したいと思います。

「/*■フレーム - 基本設定 - ブログデザイン基本設定*/」の部分を変更します。

#main{
overflow:hidden;
word-break:break-all;
ここへ背景色を追加
}

#main{
overflow:hidden;
word-break:break-all;
background-color:#ebedf4;
}

ブログ本文の背景色を変更したアメーバブログ

「表示を確認する」か「保存」してブログを確認すると、ブログ本文の部分だけ背景色が変更されていることを確認できます。

背景色のカラーナンバーは、プレビューを確認しながらご自身の好みで設定して下さい。