ページトップの画像を変更する
公開日:
:
ブログ全体の設定・カスタマイズ
既存のデザインも、トップの画像を差し替えるだけで、
随分と、印象が変わります☆
そこで!
トップの画像だけを変更する方法をお伝えしますねっ!
【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行で設定してたのを、バラしたやつ。
関連記事
-
-
ライブドアブログ上部の広告について
「儲かるキーワード発掘法」の音声を聞いていて、ムカッ腹が立ったので、 記事を書きます(笑) ちなみ
-
-
デザインカスタマイズが楽に
ブログテンプレートを編集しようとすると わりと面倒な画面遷移が必要だったのですが とうとう!管理画面
-
-
ブログのデザインがちゃんと反映されていないとき
ブログのデザイン変更をしたり、カスタマイズをしてみた後に、自分のブログを見てみても……なんだか、変わ
-
-
ライブドアのヘッダー広告HTMLを一番下に配置する方法
このカスタマイズは、ブログの管理画面の「デザイン設定」右下「カスタマイズ」にて行います。 デザイン変
-
-
独自ドメインにする…バリュードメイン◎ライブドア
この「モテるブログ」は、もともと、 http://blog.livedoor.jp/moteblog
-
-
独自ドメインにする…ムームードメイン×ライブドア
この「モテるブログ」は、もともと、 http://blog.livedoor.jp/moteblog
-
-
個別記事にサイドバーをつける……コツだけ!紹介
リニューアル前のデザインでは、個別記事・カテゴリ別・月別には、サイドバーがありませんでした。 そこで
-
-
ブログ全体の文字を、ワンサイズ大きく・小さくするには?
ブログの文字、ちょっと小さい方がデザイン的にはちょっとかっこよく見えます。 でもね、誰もが小さい文字
-
-
トップページに目次を作る
トップページに目次を用意しましょう。 たくさんの記事を書いていると、 サイドバーに表示される「最新
-
-
ライブドアブログの閉鎖
事情があり、ブログの閉鎖をされたい方もいると思います。 ですので、その方法をば… ブログの記事を
- PREV
- 個別記事の最後に固定の文章・HTMLをつける
- NEXT
- アフィリエイトの基本
Comment
琉海さんへ
こんばんわ。
時々のリニューアルはいいですよね♪
あまりされると迷子になったかと思いますが……。
新鮮っていいですよねぇ。
これからもがんばってください。
私もがんばります。
では応援ポチっとして帰ります。^^
琉海さん、ありがとー!!
自社のブログを立ち上げたのですが、どうも味気ない。そんなときに、この記事は助かりました。
ありがとーーーー!!
PS.頑張っていますね。私の会社は3月16日に「エクステリア&ガーデン」誌に見開き2頁で掲載されます。小冊子も作ったし、7回ステップメールも作ったし、封筒や振込み用紙やその他の準備も終わりました。集客を地道に進めていきます。
夏樹さんの大ファンです。
僕も、ライブドアにサイトをつくって、
カスタマイズに挑戦しようかなあ。。。
体に気をつけて頑張って!!
>tac@INFO.GARDENさんへ
……うぅ、琉海となつきさんは、
別人ですよぅ(涙
申し訳ありません。
てっきり・・・・
お許しを!
ところで・・・・・
私、瑠海さんの大ファンです・・・・軽薄か・・・。
それにしても、すごいブログですね。
うらやましい・・・・
こんにちは。検索でやってきました。親切な解説が参考になりました。ありがとうございます。
CSSの中に#bannerが
見つかりません・・・
どこにあるんでしょうか?