サイドバーのタイトルの背景を画像に変更する
初心者さん向け カスタム可能（ベーシック）での説明です。
【この時点までにしておくこと】
使いたい背景画像を画像フォルダーにアップロードしておく。
サイドバーのタイトルと同じ横幅の画像を用意してください。
（画像のアップロードはアメブロのヘルプに説明があります）
別窓を開けたりするのが苦手な人は画像のURLをテキストなどにコピペしておく。
画像のURLの表示の仕方はコチラ
戻したくなったリ編集中にエラーが出る場合があるのでCSSを少しでも変更してある場合は、
編集にテキストなどにコピペして保存しておく。
◆◇ サイドバーのタイトルの背景を画像に変える◇◆
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
※ここに下の青文字をコピーして貼付ける。
}
background:url(ここに画像をのurlをコピーして貼付け) no-repeat;
height:25px; /*- サイドタイトルの高さ -*/
↓こうなります
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
background:url(ここに画像をのurlをコピーして貼付け) no-repeat;
height:25px; /*- サイドタイトルの高さ -*/
}
次に緑の部分(ここに画像をのurlをコピーして貼付け)に画像のURLをコピーして貼付けます
↓こうなります
/*１０）サイドバーの見出し背景色を変更する*/
h4.menu_title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
background:url（http：//stat001.ameba.jp/user_images○△画像のURL○△□
) no-repeat;
height:25px; /*- サイドタイトルの高さ -*/
}
最後に表示を確認しながら ピンクの数値を画像の高さに合わせて調整
※水平方向のタグは今回は入れていません
必ず表示を確認してください
表示を確認してOKなら保存です
CSS編集はいろいろなやり方がありますが、CSS面倒だな・・と思う程度の知識の私がとりあえずココが変わればいいや的なノリでやっているのでカスタマイズは自己責任でお願いします。もっと簡単なやり方を説明されてるサイト様もあるので探してみるのも良いかと・・・あくまでもりゅね流・・・・
記事タイトルの文字の位置を変える
初心者さん向け カスタム可能（ベーシック）での説明です。
CSS面倒だな・・と思う程度の知識の私がとりあえずココが変わればいいや的なノリでやっているので
カスタマイズは自己責任でお願いします。万が一のためCSS編集前にテキストへの保存をしてください。
ベーシックスキンを使用しての説明となります。
◆◇ 記事タイトルの文字の位置を変える ◇◆
マイページの上にあるクイックリンクからスキンCSS編集を開いて
/*■記事 - デザインカスタマイズ - メインカラム*/
の項目を見つけてください
/*記事タイトル*/
.entry h3.title{
font-size:1.5em;
font-weight:bold;
line-height:1.1;
※ここへ青文字をコピーして貼付け。
}
padding-left:55px; /*- 文字の水平位置 -*/
line-height:27px; /*- 文字の垂直位置 -*/
↓こうなります
/*記事タイトル*/
.entry h3.title{
font-size:1.5em;
font-weight:bold;
line-height:1.1;
padding-left:55px; /*- 文字の水平位置 -*/
line-height:27px; /*- 文字の垂直位置 -*/
}
ピンク数値を変更して位置を変えていきます。
文字の水平位置→右へ移動させたい時は数値を大きく
文字の垂直位置→下に下げたいときは数値を大きく
表示を確認しながら位置の調整をしてください
表示を確認してOKなら保存してください。
文字の色や大きさはCSS編集の上のほうにあるかんたんCSS編集で変更できます。
記事タイトルの背景を画像に変える
初心者さん向け カスタム可能（ベーシック）での説明です。
【この時点までにしておくこと】
使いたい背景画像を画像フォルダーにアップロードしておく。(記事タイトルの横幅と同じもの）
（画像のアップロードはアメブロのヘルプに説明があります）
別窓を開けたりするのが苦手な人は画像のurlをテキストなどにコピペしておく。
画像のURLの表示の仕方はコチラ
戻したくなったリ編集中にエラーが出る場合があるのでCSSを少しでも変更してある場合は、
テキストなどにコピペして保存しておく。
※TOPの画像変更については横幅８００まではアメブロのヘルプに説明があります。
◆◇ 記事のタイトルの背景を画像に変える（使用スキンはベーシックです。） ◇◆
/*7) 記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
※ここへ 下の青文字をコピーして貼りつける
}
background:url(ここに画像をのurlをコピーして貼付け) no-repeat;
height:30px; /*- 記事タイトルの高さ -*/
↓こうなります
/*7) 記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
background:url(ここに画像をのurlをコピーして貼付け) no-repeat;
height:30px; /*- 記事タイトルの高さ -*/
}
次に緑の部分(ここに画像をのurlをコピーして貼付け)に画像のURLをコピーして貼付けます
↓こうなります
/*7) 記事タイトルの背景色を変更する*/
.entry h3.title{
background-color: #EFEFEF; /*-- 薄いグレー --*/
background:url(http：//stat001.ameba.jp/user_images○△画像のURL○△□) no-repeat;
height:30px; /*- 記事タイトルの高さ -*/
｝
最後に表示を確認しながら ピンクの数値を画像の高さに合わせて調整
必ず表示を確認してください
表示を確認してOKなら保存です
CSS編集はいろいろなやり方がありますが、CSS面倒だな・・と思う程度の知識の私がとりあえずココが変わればいいや的なノリでやっているのでカスタマイズは自己責任でお願いします。もっと簡単なやり方を説明されてるサイト様もあるので探してみるのも良いかと・・・あくまでもりゅね流・・背景が色なので困らないのかも・・・。とにかく初めてCSS編集した場合はコレでいいかと・・・。
画像の保存の仕方
素材などは縮小したサンプル画像が表示されていることが多いので、クリックしてオリジナルサイズの画像を保存します。保存した画像がどこにあるのか分からなくならないように新しいフォルダを作成して保存するやり方を説明しています。OSによって説明画面と違う場合がありますが基本は同じです。
画像の保存方法
◇◇◇保存したファイルやフォルダが見つからない場合◇◇◇
■XPの場合 〔スタート〕→〔検索〕→〔ファイルとフォルダのすべて〕→〔ファイル名のすべてまたは一部〕（ここに探したいファイル名を入れて検索〕
■vista・windows7の場合 スタートをクリックして開いたメニューの一番下の〔検索〕に探したいファイル名を入れて検索