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

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

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

コメントをカスタマイズしたら・・・

次はトラックバックでしょ


って~ことで




最初はトラックバックURLの枠の色や文字色を変えてみます

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


/*トラックバック*/
.trackbackURL{
border: 1px solid #ff00ff;/*枠線色*/
background-color:#ffccff;/*枠内色*/
color:#ff00ff;/*文字色*/
}






次は コメントするボタンの色を変える と同じにトラックバックするボタンの色を変えます

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



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


↑これを画像フォルダにアップしてから

(コメントのときと同じ画像 ですからすでにアップ済みの方はそれを使ってください)




/*トラックバックするボタンを色を変える*/
.trackbackBtnArea .basicBtnS{
color:#ff00ff !important;/*文字色*/
border:1px solid #ff00ff;/*枠線 太さ 線種 線色*/
background-image:url(画像のURL);
}
.trackbackBtnArea .basicBtnS:hover{
color:#ff0000 !important;/*マウスオーオーバー時の文字色*/
}





コメントするボタンを画像に  と同じようにこっちも画像にします


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


↓こんな画像を用意します


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


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




/*トラックバックボタン*/
.trackbackBtn{
width:200px;/*画像の横*/
height:80px;/*画像の縦*/
background-image:url(画像のURL);
background-repeat:no-repeat;
background-color:transparent;
border:none;
text-indent:-9999px;
}
.trackbackBtn:hover{/*マウスオーバー時*/
background-image:url(画像のURL);
}





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


/*トラックバックする背景画像を敷き詰める*/
.trackbackBtnArea,.trackbackURLArea{
background-image:url(画像のURL);
}


どうしてもつなぎ目が出ますので目立たない背景画像を使ってください