あめつくのブログ

  • このエントリーをはてなブックマークに追加

アメブロカスタマイズ ブログの背景画像を変更する(css)

広告

ここでは、アメブロのcssを編集して「ブログの背景画像を変更する方法」を説明します。なお、cssを編集するにはブログデザインを「CSS編集用デザイン」にする必要があります。ブログのデザインをCSS編集用デザインにする方法は、「アメブロのcssを編集するための設定」を参考にしてください。

【変更前】

【変更後】

広告

アメブロのブログの背景画像を変更する方法

マイページ右上の「アメーバのサービス一覧」をクリックします。
サービス一覧(PC編)

[デザインの変更]をクリックします。
デザインの変更(PC編)

[cssの編集]をクリックします。

cssの編集画面が表示されます。ここから、ブログの背景画像を変更するためのcssの編集に入ります。

[参照]ボタンをクリックしてアップロードする画像を選択します。(ブログの背景画像を変更するためのcssを追加するまえに、背景画像として表示したい画像をアップロードする必要があります。)

アップロードしたい画像を選択して[開く]ボタンをクリックします。

これでアップロードの準備ができたので、[アップロード]ボタンをクリックして画像をアップロードします。

アップロードが完了すると、アップロードした画像(上の赤枠)とアップロードした画像のURL(下の赤枠)が表示されます。アップロードした画像のURL(下の赤枠)は後で利用します。

下の赤枠の内容をコピーします。これがブログの背景画像を変更するためのcssです。赤文字の部分をアップロードした画像のURLに書き換えて利用してください。

なお、背景画像は表示位置や表示方法を変更することができます。位置や表示を変更したい場合は、つぎの記事を参考にしてください。
CSSで背景画像の表示位置を指定する方法
CSSで背景画像の繰り返しを指定する方法

body{
background-image:url(http://example.com/hogehoge.jpg);
}

コピーした内容はcssの一番下の部分に貼り付けます。
貼り付けが終わったら、[保存]ボタンをクリックして追加したcssを保存します。

保存できたらブログを表示し、ブラウザの更新ボタンをクリックします。
(古いデータが残っていると変更したcssが反映されませんので、ブラウザの更新ボタンをクリックして最新の状態に更新します。)

これで、ブログの背景画像の変更は完了です!

ここまでの内容を動画でも確認できます。
よかったら、参考にしてください!
ブログの背景画像をCSSで変更する

広告

関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

カテゴリー