アメブロの背景をカスタマイズして超おしゃれにする方法

   

haikeiga

アメブロは、ホームページやブログの専門知識がなくても、誰でも簡単に始められるブログサービスです。

しかし、背景などをカスタマイズして個性を出そうと思ったら、やり方が難しくて戸惑っている人も多いのではないでしょうか?

そこで今回は、ブログ初心者でもアメブロの背景をカスタマイズできるように、超丁寧に解説していきます。

この記事を読めば、どのような背景が読者に喜ばれるのか、どのようにして背景を変更すれば良いのかが全て分かるので、ぜひ、参考にして下さい。

スポンサーリンク

どのような背景にすると良いのか

まずは、下の2枚の画像を比べて見ましょう。

haikei2

haikei3

あなたは、どちらのブログの方が「見ようかな」という気持ちになるでしょうか?おそらく、圧倒的に上の画像の方のブログを見たいと答える人が、多くなるでしょう。

あくまでも、ブログの主役は、記事です。その記事を最大限に活かすためにも、ブログの背景はシンプルであまり目立たないものにする必要があるのです。

その証拠に、月に何十万人も見ている人気ブログの背景は、例外なくシンプルだし、そこまで凝ったデザインになっていません。

具体的な良い背景の例

具体的に、どのような背景が良いかと言うと、以下のようなものになります。

haikei4

背景の色で悩んでいる人は、例のように薄めの色を使うと間違いないです。ブログの文字やサイドバーの色と相性の良い色を選ぶと、なお良いです。

自分で画像を用意して、それを背景にするのも構いませんが、その画像は、キャラクターがワンポイントに入っていたり、ハートや星などのシンプルなマークが入っているものにしましょう。

アメブロの背景カスタマイズの方法

それでは、実際にアメブロの背景をカスタマイズしていきます。あなたがやることは、以下の手順に沿って真似をしていくだけです。

それでは、早速説明に移りましょう。

1.背景をカスタマイズできるデザインに変更する

背景をカスタマイズと言っても、背景をカスタマイズできるデザインとできないデザインがあります。まずは、カスタマイズできるデザインに変えましょう。

はじめに、「マイページ」を開いて、画面の右上にある「三」のようなボタンをクリックします。その後、下の画像のようにメニューが出るので、そのメニューの左下のスミにある「デザインの変更」をクリックします。

hedda9

そして、画面の下の方に行くと、「カスタム可能」と書かれた項目があるので、ここをクリックです。

hedda8

そしたら、色々なブログデザインが表示されますが、ここで選ぶブログデザインによって、今後の背景のカスタマイズ方法が違ってきます。

まずは、この中から自分が好きなデザインをクリックします。

hedda11

そしたら、下の画像のような画面が出てくるので、好きなレイアウトを選択した後に、「適用する」を押します。

もし、あなたが自分の読者のことを一番に考えているのであれば、赤枠で囲まれた「2カラム・メニュー右」を選びましょう。

なぜなら、人間の目の動きの傾向として、パソコンの画面の左に意識が集中するので、記事を左に持ってくることで、記事が見やすくなるからです。

haikei

「適用する」を押した後は、その後に出てくる画面の「CSSの編集をする」または「デザインを簡単カスタマイズする」をクリックします。

haieki

2.実際に背景をカスタマイズしてみる

ここからは、どのブログデザインを選んだかによって、設定方法が違ってきます。

大きく分けると、

  • 「CSS編集用デザイン」以外のデザインを選んだ時
  • 「CSS編集用デザイン」を選んだ時

の2つに分かれます。以下は、それぞれの背景のカスタマイズ方法を見ていきましょう。

3.「CSS編集用デザイン」以外の設定方法

上述したように、「デザインを簡単カスタマイズする」をクリックした後に、このような画面が出てきます。今回は、背景をカスタマイズするので、画面の右に注目しましょう。

haikei5

もし、背景を赤一色や青一色のようにしたい場合は、下の画像の赤枠で囲まれた部分をクリックしましょう。その後に、様々な色が表示されるので、好きな色を選んだあとは、上の画像の画面に戻り、「保存」をクリックします。

haikei6

もし、自分で画像を用紙して、背景として使いたいのであれば、「オリジナル画像を使う」をクリックします。

haikei7

そして、「ファイルを選択」で背景にする画像を選び、「アップロード」をクリックします。そしたら、下の方にアップロードした画像が表示されるので、その画像をクリックしたら、背景に設定されます。

4.「CSS編集用デザイン」の設定方法

上述のように「CSSの編集をする」をクリックした後の画面の中で、ローマ字がたくさん書かれている部分があると思います。今回は、そこの部分をいじって、ブログの背景を設定していきます。

haikei8

まずは、ローマ字が書かれた部分を下にスクロールしていき、真ん中あたりにある、この文字を見つけましょう。そして、この部分を消して、代わりに下の文字をコピーして貼り付けましょう。

/* skinBody ボディ */
.skinBody{background-color:#f2f2f2;}/* ←ブログ全体に背景を敷きたいとき */

.skinBody2{}

.skinBody3{}

上手くできたら、以下のようになるはずです。

haikei9

そして、画面下にある「保存」をクリックすると、背景が変わっています。今回の例では、薄い灰色にしましたが、もし、他の色にしたければ、「f2f2f2」の部分を変えます。

こちらのリンクに様々な色のコードがあるので、お気に入りの色が見つかったら、「f2f2f2」の部分を変えると、背景をその色にすることができます。

スポンサーリンク

この記事をシェアする

スポンサーリンク

この記事と関連がある記事

スポンサーリンク