アメブロカスタマイズ

アメブロ 背景画像の設定方法

ブログの背景を変えると、イメージが一気に変わりますよね。

色を変えるだけでも印象は大きく変わりますし、背景に画像を入れるとさらに印象は変わります。

今回はアメブロの背景の設定方法でも、背景に画像を使う方法についてお伝えしていきます。

アメブロ 背景画像の設定方法

背景を設定する前に、カスタマイズができるようにこちらの設定にしておきましょう。

※背景画像は、こちらのサイトに色々出ていますよ。

ヘッダー下に背景画像を設定する

CSSのコードは、デフォルトでは下記のようになっています。

/* (1-2) 基本背景
--------------------------------------------*/

/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {

background-color: #ffffff;

}

そちらを、↓下記↓のように変更します。

/* (1-2) 基本背景
--------------------------------------------*/

/* コンテンツ背景、ヘッダー以下の背景色 */
body{
background-color: #ffffff;
background-image: url(★);
background-attachment:fixed;
}

background-image: url(★);の★の部分に背景画像をアップした際のURLを入力しましょう。

背景画像を全体に設定する方法

上記の設定は、ヘッダー部分は影響しませんでしたが、次にお伝えするのは、ヘッダー部分込みで背景画像が反映する方法です。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
background-color: #ffffff;
}

赤字の背景色の設定を削除します。

/* (2-1) ヘッダー背景
--------------------------------------------*/
/* ヘッダー背景 */
.skin-bgHeader {
}

上記と下記を入力します。

/* (1-2) 基本背景
--------------------------------------------*/

/* コンテンツ背景、ヘッダー以下の背景色 */
body{
background-color: #ffffff;
background-image: url(★);
background-attachment:fixed;
}

background-image: url(★);の★の部分に背景画像をアップした際のURLを入力しましょう。

このように必要な部分のみ背景画像が入ります。

ヨリメグ
ただし、背景画像は派手な柄を使うと、柄に目を奪われちゃって記事の中身に集中できないよ!設定するなら、さりげない柄や模様がおすすめです。
  • この記事を書いた人
  • 最新記事
irodori

ヨリメグ

メール対応・資料作成・Webサイト管理・SNS運用・ライティングまでワンストップ対応できるクリエイティブ秘書&ブロガー。 ブログは、フリーランスお仕事系お役立ち記事を載せています。

おすすめ記事

1

確定申告の季節が近づいてきました。 ちなみに確定申告期間は2020年2月17日(月)から3月16日(月)になります。 確定申告をe-Taxで(電子申告)で行うと、青色申告は10万円の控除増加が期待でき ...

ヨリメグのペライチ 2

ペライチという1枚ページサイトに特化したサービスがあるのですが、そちらで秘書サービスに特化したサイトを作ってみました。 それがこちら↓ これこれ 結構上手に作れたのではないかと自画自賛。 内容がきちん ...

3

著作権が厳しい世の中になってきました。 フリー画像でもお仕事に関するものに使用する写真は「商用フリー」写真であることが利用の条件です。 ネットサーフィンをしていて見つけた商用利用可能なフリー写真サイト ...

4

インターネットで写真やイラストを販売することで、収入を得るストックフォト。 最近では、トッププレイヤーは月30万以上の収入を得ている方もゴロゴロいるそうです。 今回は、ストックフォトについてご紹介しま ...

5

お仕事ブログとしてアメブロを使う方にとって、既存デザインではなく、アメブロのヘッダーは自分のサービスのイメージに合ったものにしたいと思いますよね。 お仕事ブログへのカスタマイズの第一歩は、ヘッダーの設 ...

-アメブロカスタマイズ
-,

Copyright© イロドリワークス|オンライン秘書サービス , 2020 All Rights Reserved.