【第1回】トップの文字を消して、トップの画像を変えたい！

※責任は負いかねますので自己責任でやってください！

アメブロってトップに

ブログのタイトルと、ルーム｜ブログ　っていう文字が入っちゃってますよね。

オリジナルのタイトル画像を入れたのに、文字と画像がかぶってしまう・・・

アメーバの芸能人オフィシャルブログのように、ここの文字消したい！

そしてオリジナルのタイトル画像を表示させたい！

そんな時は次のようにやってみてください。

　　※　ここの文字を消せるのは特定のスキンだけに限ります。

　スキンCSSの編集を開く

「デザインの変更」から「スキンCSSの編集」を開きます。

英語やら数字やらが書いてあるものが出てきます。

ここでタイトルはこの画像、ここの色はこの色だの

ブログを表示するのに必要な情報が入っています。

逆にいえば、ここを間違えていじったら今までの表示を損ねる恐れがあります。

なので必ず元の状態に戻せるように一旦保存します。

英語がいっぱい出ているところ(以下CSS)のどこか空白部分で

　　　　　　　　右クリック　→　すべて選択

このように、CSSが全部青く選択されます。

青い部分のどこかで

　　　　　　　　右クリック　→　コピー

パソコン内のどこかに「新規テキストを作成」して

コピーしたものを貼り付け、テキストを保存しておきます。

　CSSの中に次の指示を貼り付ける

先ほどのデザインの変更→スキンCSSの編集の画面で

CSS部分の一番下までスライドを持っていきます。

CSSの一番下でクリックして、カーソルを点滅させます。

そこに次のものをそのままコピー＆ペーストしてください。

/* ヘッダーを芸能人仕様にする */

#header h1,
#header h2{
margin:0;
padding:0;
text-indent:-9999px;
}

#header h1 a{
display: block;
width: 800px;/*画像の横*/
height:400px;/*画像の縦*/
}
#header {
background-image: url(タイトル画像のURL);
background-repeat:repeat-x;
}

body {
background-color: #FFFFFF;
}

　タイトル画像のURLを取得する

ブログで写真や画像をアップロードするのと同じように

タイトルにしたい画像をアップロードします。

アップロードした画像は

「アメブロを書く」の中の「画像フォルダ」をクリックすると見れますよね。

そこでタイトルにしたい画像をクリックします。

このように画像が表示されます。

その出てきた画像を

　　　右クリック　→　プロパティ

画像のプロパティが出てきます。

そこにアドレスが書いてあるので、これをコピーしてください。

そしてさっきCSSの一番下に貼ったところを見てください。

/* ヘッダーを芸能人仕様にする */

#header h1,
#header h2{
margin:0;
padding:0;
text-indent:-9999px;
}

#header h1 a{
display: block;
width: 800px;/*画像の横*/
height:400px;/*画像の縦*/
}
#header {
background-image: url(タイトル画像のURL);
background-repeat:repeat-x;
}

body {
background-color: #FFFFFF;
}

タイトル画像のURLという文字を消して

今コピーしてきたアドレスをここに入れます。

background-image: url(タイトル画像のURL);

↓

background-image: url(例：http://http://stat.ameba.jp/user_images/20090728/01/gurenren/o0899.jpg );

のようになります。

ここでプレビューを押してみてください。

トップの文字が消えて、タイトル画像が出てるでしょ？

出来てたら保存を押します。

これで完成です！

もし、表示が変になってしまって保存してしまった場合は