サイドメニュータイトルを画像に | 新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

アメブロの新スキン(CSS編集用デザイン)のカスタマイズ
アメーバブログをCSSでカスタマイズして自分だけのオリジナルなデザインでアメブロを楽しんでください

サイドバーにメニュータイトルを画像にします

メニューごとに違う画像を使用したり
文字の書体を特別なものにしたり
タイトルを英文にしたりするには
メニューをそれぞれ別の画像を作りCSSで設定していきます
画像サイズはばらばらでも可能です・・横幅はサイドの幅以下にしてください


CSS編集用デザインはサイドバーの幅が違いますので
サイドバーの幅の狭いほうに配置している項目(横幅180px以下で作成)と幅の広いほうに配置している項目(横幅300px以下で作成)で画像の幅が変わりますから注意ください




こんな↓画像を作ります(見本で狭い画像広い画像全部作ってありますが配置にあわせて作ってください)

サイドバーの横幅が狭いほうに使う画像(横幅180px以下で作成)

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


サイドバーの横幅が広いほうに使う画像(横幅300px以下で作成)

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ

(持ち帰り自由です)




では・・CSSです
最初に元の枠を消します・・・

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ



/*サイドバーメニュータイトル*/
.skinMenuHeader{
background-color:transparent;/*元のメニューヘッダー背景を消す*/
}
.skinMenu{
background-color:transparent;/*元のブロック枠を消す(注)*/
}
.skinMenuHeader{
margin: 0;
padding: 0;
text-indent:-9999px;/*メニュータイトルを消す*/
background-position:center;
background-repeat:no-repeat;
}

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


元の枠やタイトルを消したらそれぞれのメニュー画像を設定します


.recentEntriesMenu .skinMenuHeader{/*最新の記事*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.calendarMenu .skinMenuHeader{/*カレンダー*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.themeMenu .skinMenuHeader{/*テーマ*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.archiveMenu .skinMenuHeader{/*月別*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.rankingMenu .skinMenuHeader{/*ランキング*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.bookmarkMenu .skinMenuHeader{/*ブックマーク*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.favoriteMenu .skinMenuHeader{/*お気に入りブログ*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.profileMenu .skinMenuHeader{/*プロフィール*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.readerMenu .skinMenuHeader{/*このブログの読者*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}
.recentCommentMenu .skinMenuHeader{/*最近のコメント*/
background-image:url(画像のURL);
height:28px;/*画像の縦*/
}


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ




もし・・・これじゃ寂しい?枠もあったほうが・・・

って~方は・・

新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


.skinMenu{
background-color:transparent;/*元のブロック枠を消す
(注)*/
}

↓この部分で枠を消さないで枠の色を設定します


.skinMenu{
background-color:#F3E2D2;/*ブロック枠の色(注)*/
}



あるいは・・線にしちゃいたいって場合はCSSに付け加えます


新・アメブロ向上企画書 アメブロの「CSS編集用デザイン」のカスタマイズ


.skinMenuBody {
margin:2px;
border:4px double #ff00ff;/*線の太さ 線種 線の色*/
background-color:#ffccff;/*枠内の背景色*/
}


枠線の種類は メッセージボード 線と背景色  を参考にしてください