アメブロをカスタマイズしよう!

最近、サイトの見栄えやSEO対策により、アクセスアップを図ろうとする傾向が顕著になってきました。そこで、その解決策の一つとして、アメブロのカスタマイズを研究してみようと思います。あなたのブログのご参考にしてくださいね。


テーマ:
ご訪問ありがとうございます。
ブログランキングの応援
をして頂けると励みになります。

ここをクリックしてくださいね。
      ダウン
宝石赤人気ブログランキング
宝石ブルーFC2ブログランキング



今回は、ブログ全体の背景画像を固定してみましょう。


【1】画像の保存

まず、背景画像を用意します。
デジカメで撮った写真を任意のフォルダに保存しました。


【2】CSS編集画面の表示

[マイページ]→[クイックリンク]→[スキンCSSの編集]の順にクリックすると、
CSSの編集画面が開きます。

(注意)アメブロは、どんどん改良されていて、現在は次のようにして下さいね。

[マイページ]→[デザインの変更]→CSS編集用デザインの[CSSの編集]の順にクリックすると、CSSの編集画面が開きます。


【3】画像のアップロード

[ブログデザインヘッダ・背景用画像の追加]の[参照]ボタンをクリックして、
使用する画像を選択し、[アップロード]ボタンをクリックします。

すると、次の通り、アップロードできました。

アップロードした画像


【4】CSSの追加

CSSの編集画面の一番最後の次に下記のCSSをコピペします。

/* ■ブログ全体の背景画像■ */
.skinBody{
background-image:url(上記【3】の赤枠内の画像のパスをここにコピペする);
background-repeat:no-repeat;/* 繰り返さない */
background-attachment:fixed;/* 固定 */
background-position:left top;/* 位置を左上に */
}

これで背景画像が設置できない場合は、次のCSSをコピペしてみてください。

/* ■ブログ全体の背景画像■ */
.skinBody{
background-image:url(上記【3】の赤枠内の画像のパスをここにコピペする) !important;
background-repeat:no-repeat !important;/* 繰り返さない */
background-attachment:fixed !important;/* 固定 */
background-position:left top !important;/* 位置を左上に */
}



【5】背景画像の設置完了

以上で背景画像の設置が完了しました。
PR
いいね!した人  |  コメント(72)

[PR]気になるキーワード