*

ページトップの画像を変更する

既存のデザインも、トップの画像を差し替えるだけで、
随分と、印象が変わります☆

そこで!

トップの画像だけを変更する方法をお伝えしますねっ!


【1】
まずは、もとの画像と同じサイズの差し替えたい画像を用意します。

お手持ちの写真やイラストと入れ替えたい場合は、
画像ソフトでサイズを【あらかじめ】変更しておいてくださいねっ

元の画像のサイズが知りたい場合は、その画像の上にマウスカーソルを置いて右クリック。
メニューが出てきたら、一番下の「プロパティ」をクリック。

すると、画像についての詳しい情報が出てきます。

「大きさ」というところに、サイズが出ています。

800×360ピクセルと出ていたら、
横幅が800ピクセル、縦が360ピクセルの画像だということです。

この大きさに合わせて、画像を作ってくださいね。

【2】
用意した画像を、[ブログの管理画面]-[ファイルのアップロード]から、アップロードします。

ファイルのアップロード画面で「ファイルをアップロードする」リンクをクリックします。

サムネイルは必要ないので、チェックをはずしてください。

左メニューの「ファイルのアップロード」をクリックして画面を開きなおします。

一番上にある、アップロードした画像に横にある、青色の「投稿する」ボタンをクリックしてみてください。

すると、ブログの記事投稿画面になるのですが…
その中から、その画像のURLだけをコピー(Ctrl + c)してください。

例)
<img src=”http://image.blog.livedoor.jp/moteblog/
imgs/a/6/a600f8f9.JPG
” width=”800″ height=”360″ border=”0″ alt=”トップ画像” hspace=”5″ class=”pict” align=”left” />

この、太字のURL部分だけを抜き出します。
※表示上URLが折り返してますが、1行で書いてくださいね!

【3】
次に、ブログの管理画面上部メニューにある「カスタマイズ/管理」をクリックします。
続いて、左の縦メニューにある「デザインの設定」をクリックして、
画面が切り替わったら、一番下の右端にある「カスタマイズ」をクリックします。

すると、カスタマイズ画面です☆

一番初めは、「スタイルシート(CSS)」が開いているので、そのまま編集に入ります。

さて。その中にある【 #banner 】というところの
【 background 】を編集します。

例>
 #banner{
  width:800px;
  height:360px;
  text-align:left;
  margin:0 auto;
  background:url(http://parts.blog.livedoor.jp/
img/usr/wonderland01/header.jpg
) no-repeat 50% 0;
 }

このbackgroundのURLで、画像の場所が指定してあるんですね。
そこを、自分でアップロードした画像のURLに書き換えてやります。
※表示上URLが折り返してますが、1行で書いてくださいね!

 #banner{
  width:800px;
  height:360px;
  text-align:left;
  margin:0 auto;
  background:url(http://image.blog.livedoor.jp/moteblog/
imgs/a/6/a600f8f9.JPG
) no-repeat 50% 0;
 }

※表示上URLが折り返してますが、1行で書いてくださいね!

URLだけを変更してくださいね!
他はいぢっちゃ、ダメですよ!!

続いて、そのページの一番下にある「この内容で保存する」ボタンを押してください。

その後、左メニュー上にある「ブログに設定を反映(再構築)」リンクをクリックして、「デザイン(CSS)」を選んでブログを再構築してください☆

IE以外のブラウザで確認したときに、
どうも表示がうまくいかない…という場合は、以下のようにしてください。

#banner{
 background-image:url(http://***.jpg);
 background-position:50%;
 background-repeat:repeat-y;
}

これは、さっき1行で設定してたのを、バラしたやつ。

関連記事

no image

トップページの個別記事のタイトルをリンク文字にする

トップページから、個別記事へと移動するときに、 10:51 といった時間や、 Comment(0)と

記事を読む

no image

トップページに目次を作る

トップページに目次を用意しましょう。 たくさんの記事を書いていると、 サイドバーに表示される「最新

記事を読む

no image

ライブドアブログの閉鎖

事情があり、ブログの閉鎖をされたい方もいると思います。 ですので、その方法をば… ブログの記事を

記事を読む

no image

独自ドメインにする…バリュードメイン◎ライブドア

この「モテるブログ」は、もともと、 http://blog.livedoor.jp/moteblog

記事を読む

no image

ライブドアブログ上部の広告について

「儲かるキーワード発掘法」の音声を聞いていて、ムカッ腹が立ったので、 記事を書きます(笑) ちなみ

記事を読む

no image

デザインカスタマイズが楽に

ブログテンプレートを編集しようとすると わりと面倒な画面遷移が必要だったのですが とうとう!管理画面

記事を読む

no image

個別記事にサイドバーをつける……コツだけ!紹介

リニューアル前のデザインでは、個別記事・カテゴリ別・月別には、サイドバーがありませんでした。 そこで

記事を読む

no image

ブログのデザインがちゃんと反映されていないとき

ブログのデザイン変更をしたり、カスタマイズをしてみた後に、自分のブログを見てみても……なんだか、変わ

記事を読む

no image

管理画面説明

トップ画面の様子です。 この画面では、以下の項目が確認できます。 ブログのタイトル利用中のサービ

記事を読む

no image

ライブドアブログの限界

リニューアル後のライブドアブログの限界について、語っています。 ※「ブログの設定/管理」の画面を

記事を読む

Comment

  1. ゆめき より:

    琉海さんへ
    こんばんわ。
    時々のリニューアルはいいですよね♪
    あまりされると迷子になったかと思いますが……。
    新鮮っていいですよねぇ。
    これからもがんばってください。
    私もがんばります。
    では応援ポチっとして帰ります。^^

  2. 五嶋博文 より:

    琉海さん、ありがとー!!
    自社のブログを立ち上げたのですが、どうも味気ない。そんなときに、この記事は助かりました。
    ありがとーーーー!!
    PS.頑張っていますね。私の会社は3月16日に「エクステリア&ガーデン」誌に見開き2頁で掲載されます。小冊子も作ったし、7回ステップメールも作ったし、封筒や振込み用紙やその他の準備も終わりました。集客を地道に進めていきます。

  3. tac@INFO.GARDEN より:

    夏樹さんの大ファンです。
    僕も、ライブドアにサイトをつくって、
    カスタマイズに挑戦しようかなあ。。。
    体に気をつけて頑張って!!

  4. 琉海 より:

    >tac@INFO.GARDENさんへ
    ……うぅ、琉海となつきさんは、
    別人ですよぅ(涙

  5. tac@INFO.GARDEN より:

    申し訳ありません。
    てっきり・・・・
    お許しを!
    ところで・・・・・
    私、瑠海さんの大ファンです・・・・軽薄か・・・。
    それにしても、すごいブログですね。
    うらやましい・・・・

  6. yoshi より:

    こんにちは。検索でやってきました。親切な解説が参考になりました。ありがとうございます。

  7. CSSの中に#bannerが
    見つかりません・・・
    どこにあるんでしょうか?

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

おすすめ記事

【モテるブログ】総合メニューモテるブログ ■ライブドアブログカスタ

no image
他人が書いた不都合な記事を検索結果から削除する方法

琉海も過去に何度か「記事内容を削除してください」という依頼を受けて削除

no image
ブログをアクセスアップさせる裏技

私自身は「やりません」が、アクセスアップに効果があるのでご紹介しておき

no image
有料ライブドアブログからMTへお引越しする方法

このブログもそうなのですが、 独自ドメイン&有料ライブドアブログPRO

no image
アクセスを集めるのは簡単?

→もっと見る

PAGE TOP ↑