CSS・サブタイトルを画像に

リクエスト記事です。

サブタイトル画像を作るの続きで、
CSSを編集してブログに反映させるまで分です。

前記事も併せてご覧くださいね。


サブタイトル画像を作ったら、これをアメブロにUPします。

画像と文字　英語表記/日本語表記 　Profile/プロフィール 　Recent comments/最近のコメント 　Recent entries/最近の記事 　Ranking/ランキング 　Readers/読者一覧 　Theme List/テーマ一覧 　Calender/カレンダー 　Archives/アーカイブ 　Favorites/お気に入りブログ 　Search/ブログ内検索 　Bookmarks/ブックマーク一覧 　Public Reletions/サイドPR この枠内の画像のみ、ご自由にお持ち帰りください。 そのほかの画像は無料素材ではありませんので、 ご利用にならないようお願いいたします。

UPしたら、画像URLの取得方法を参考に、
画像URLをコピーします。


次にCSSに画像URL挿入となるのですが、
結構細かいので、あらかじめ↓下の枠内をコピーして
メモ帳に貼り付けて適当な名前をつけて保存しておきます。
メモ帳を開いたまま、アメブロの画像フォルダから
該当部分の画像URLを拾ってコピペしていきます。

/*サイドメニュータイトル*/ .mainMenu{ width:170px;/*サイドの幅*/ margin:10px 5px 0 0;/*基本の位置*/ } .menu_title{ margin: 2; padding: 1; border:none; background-position:0px 0px; text-indent:-9000px; background-repeat:no-repeat; width:160px;/*画像の横*/ height:30px;/*画像の縦*/ } #profile .menu_title{/*プロフィール*/ background-image:url(画像URL ); } #calendar .menu_title{/*カレンダー*/ background-image:url(画像URL ); } #reader .menu_title{/*このブログの読者*/ background-image:url(画像URL ); } #theme_list .menu_title{/*ブログテーマ一覧*/ background-image:url(画像URL ); } #recent_entries .menu_title{/*最近の記事一覧*/ background-image:url(画像URL ); } #search .menu_title{/*ブログ内検索*/ background-image:url(画像URL ); } #archives .menu_title{/*アーカイブ*/ background-image:url(画像URL ); } #favorite .menu_title{/*お気に入りブログ*/ background-image:url(画像URL ); } #bookmark .menu_title{/*ブックマーク*/ background-image:url(画像URL ); } #recent_comment .menu_title{/*最近のコメント*/ background-image:url(画像URL ); } #ranking .menu_title{/*ランキング一覧*/ background-image:url(画像URL ); } #defaultAd .menu_title{/*サイドＰＲ*/ background-image:url(画像URL ); }

メモ帳に入力し終わったら、一旦保存してしまいましょう。
間違って消したときにそのファイルを開けば元に戻せますよ。


メモ帳内をすべてコピーし、
CSS編集の一番最後の部分にペーストして追加します。

プレビューを押し、表示が正しくできていれば保存してください。
間違っていたら、その部分を訂正しましょう。

width:160px;/*画像の横*/ height:30px;/*画像の縦*/

↑の部分は、作った画像サイズに合わせて
直してくださいませ。


自分らしいBlogつくり。がんばってくださいね♪