livedoor ナレッジ

トップの画像を変えてみたいんです。教えてください。

超初心者です。
トップの画像を変えてみたいんです。教えてください。
トップの画像ってのは・・・ブログのタイトルのあるところの画像です。
自分の持っているpictureを使いたいんですけど・・・

お願いします。

まずはこれで練習してみてはいかがですか↓
http://temp.net-biji.com/livedoor.html

タイトルに背景があるデザインの場合は、スタイルシートを変更して、その画像を取り替えるだけで済みます。

管理ページ、投稿ページの上の

管理ページトップ|ブログの投稿 |カスタマイズ/管理|モバイル設定

の「カスタマイズ/管理」をクリックして「ブログの設定」ページを開きます。
左横にある

　　ブログの設定/管理
ブログの設定 / ユーザー情報
デザインの設定
プラグインの設定 / 新規追加
コメント / トラックバック

の「デザインの設定」をクリックすると、「デザインの設定」ページが開きます。（http://cms.blog.livedoor.com/cms/design/）
右下の「カスタマイズ」をクリックすれば、スタイルシートを編集できるページへ行けます。

デザインによって、タイトルの背景が設定してあるところが違います。

背景画像のあるところは、

background:#*** url("http://parts.blog.livedoor.jp/img/usr/***.jpg") …;

という具合の設定があるところです。
それがどういう画像かということは、中に書いてあるURLをコピーして、ブラウザのアドレス欄に入れて、enter（return）キーを押して、実際に表示させてみれば分かります。

タイトル部分の背景画像の場所は

#banner,#subbanner{

の { } の中の

background:#*** url("http://parts.blog.livedoor.jp/img/usr/***.jpg") no-repeat 50% 0;

という感じのところ

#banner{

になっているなら、その中に

background:#*** url(

が、あれば、そこ

これらにurlがない場合、少し、さかのぼって

#container{

の { } の中に

background:url(http://parts.blog.livedoor.jp/img/usr/***/titleimg.jpg) no-repeat;

という感じのものがあれば、そこ

該当するところの

url(" ")

の中のURLを自分の画像のURLに替えれば画像が変わります。

どの場合でも、URLの画像を表示させ、確認して下さい。

スタイルシートを変更したら、下の［この内容で保存する］をクリックします。
その後、左上のほうにある「ブログに設定を反映（再構築）」をクリックして再構築のページへ進み、［インデックス（トップの記事）］になっているプルダウンフォームを
［デザイン（CSS）］に合わせ、［ブログを再構築する］をクリックしてください。


この質問は何度もあるので、少し、詳しく説明してみます。字数制限があるので、この後の回答欄に続きます。

前の回答（http://knowledge.livedoor.com/22006#answer2)の続きです。

自分がアップロードした画像のURLが分からない場合は、次の記事を参考にして下さい。

livedoor Blogで、（画像）ファイルをアップロードして、記事の中以外で使うために
http://blog.livedoor.jp/horsefly/archives/50513073...


画像の大きさを合わせないとうまく行かない可能性が大きいので、画像編集ソフトがないとか、サイズの変更の仕方がわからない時のために説明しておきます。

まず、元の背景画像をブラウザで表示し、「名前をつけて保存」や「別名で保存」でハードディスクに保存します。

PIXENATE（http://pixenate.com/）へ行きます。
画像編集ができるサイトです。

左横の、
1. Choose your image to edit.
をクリックすると、ボタンが2つ現れます。

上のボタンはOSによって表示される文字が違うかも知れませんが、（例えば、Mac OS Xなら）「ファイルを選択」をクリックして、自分のハードディスクの中から元の背景画像を選択します。
ボタンの横に、ファイル名が表示されます。

その下の「Upload this image.」というボタンをクリックすると、その画像が、右に大きく表示されます。

画像に出ている

Selection: ----,----   Size: ***x***   Zoom: 100%  Position:

の

Size: ***x***のところが画像の大きさです。

これをメモして下さい。

（次の回答欄に続きます）

前の回答（http://knowledge.livedoor.com/22006#answer3)の続きです。

新しい背景画像を作ります。

自分の用意した画像を、さっきと同様にアップロードします。
自分の用意した画像が表示されます。

左横の

2. Edit your image with the following tools.

の下に並んでいるアイコンで、表示された画像の編集ができます。

カットや縮小、拡大をして、サイズを合わせて下さい。

画像の一部を切り取る場合は、上から3つ、一番左の「crop」をクリックします。

Configure Crop Tool
Aspect ratio:［free select］
preview	Rotate selection
Width: 　　　　　　［　　］
Height:　　　　　　［　　］
 　　　　［Cancel］［Apply］

横幅がWidth、縦幅がHeightです。
画像に四角いポチが付いた明るい範囲があります。
そのポチをつかむようにドラッグすると、その明るい範囲が伸び縮みします。
範囲を指定して［Apply］をクリックすれば、その範囲だけが残ります。


縮小（拡大）をするときは、上から3つ、左から2つ目の「resize」をクリックします。

Resize Image
Preserve aspect ratio:［??］
Width: 　　　　　　［　　］
Height:　　　　　　［　　］
Resize to selected area.
 　　　　［Cancel］［Apply］

「Preserve aspect ratio:」にチェックを入れておくと、縦横の比が元の画像と同じままに保たれます。（つまり、画像がつぶれません。）WidthやHeightに数字を入れて他のところをクリックするともう片方が自動的にもう片方の数字が入ります。

四角いポチをつかむようにドラッグして明るい範囲を変え、「Resize to selected area.」をクリックすると、画像が、その範囲と同じ大きさになります。

下の［Apply］ボタンをクリックすると、画像のサイズが変わります。


フロッピーディスクの絵の下に「Save to Disk.」とついたところをクリックすると、自分のハードディスクに保存できます。