*

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

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

そこで!

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


【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

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

ライブドアブログの閉鎖

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

記事を読む

no image

ライブドアのヘッダー広告HTMLを一番下に配置する方法

このカスタマイズは、ブログの管理画面の「デザイン設定」右下「カスタマイズ」にて行います。 デザイン変

記事を読む

no image

個別記事にサイドバーをつける……デザインがズレた?!

前回、個別記事にサイドバーをつけるコツをお知らせしたのですが、 どうやら、デザインが横にズレてしまう

記事を読む

no image

独自ドメインにする…ムームードメイン×ライブドア

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

記事を読む

no image

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

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

記事を読む

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
Hello world!

WordPress へようこそ。これは最初の投稿です。編集もしくは削除

おすすめ記事

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑