ヤフー検索ボックスの大きさの調整 | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

アメブロ 新CSS CSS編集用デザイン 無料
カスタマイズ アメブロカスタマイズ 初心者
CSS スタイルシート デザイン
javascript jQuery

★ ヤフー検索ボックスの大きさの調整


● 内容

① ヤフー検索ボックスの設置 の記事の追記。
② 全体の大きさを小さくする方法の紹介。


● 大きさを半分にする例

・ 半分の大きさの例


リアナのカスタマイズ日記(CSS編集用デザイン)




① 下記をCSSの一番下に追加する


/* ------------------------------------------------------------------ */
/* ヤフー検索ボックス   大きさのカスタマイズ(半分に縮小)     */
/* ------------------------------------------------------------------ */
.y_search_div img{ /* 画像の大きさ */
width:42px; /* 85px→42px */
margin-top:5px; /* 縦の位置調整 */
height:auto; /* 高さ自動 */
}
.y_search_div,#y_search_area{ /* 全体の幅 */
width:250px; /* 500px→250px */
}
#y_search_area input[name="p"]{ /* 検索入力部分 */
width:100px; /* 幅 */
height:10px; /* 高さ */
font-size:10px; /* 文字の大きさ */
}
#y_search_area input[name="btnY"]{ /* 検索ボタン */
width:60px; /* 幅 */
height:18px; /* 高さ */
font-size:10px; /* 文字の大きさ */
vertical-align:-1px; /* 縦の位置揃え */
}
#y_search_area li{ /* 選択ボタン */
font-size:10px; /* 文字の大きさ */
}
#y_search_area li input[name="vs"]{/* 選択ボタン */
vertical-align:-3px; /* 縦の位置揃え */
}
.y_search_div ul{ /* 選択ボタン */
margin-left:45px !important; /* 右からの位置 */
}
/* ------------------------------------------------------------------ */




● 拡大(900pxの例)


① 下記をCSSの一番下に追加


/* ------------------------------------------------------------------ */
/* ヤフー検索ボックス   大きさのカスタマイズ(900pxに拡大)  */
/* ------------------------------------------------------------------ */
.y_search_div img{ /* 画像の大きさ */
width:170px; /* 85px→170px */
margin-top:5px; /* 縦の位置調整 */
height:auto; /* 高さ自動 */
margin-right:10px; /* 画像右の余白 */
}
.y_search_div,#y_search_area{ /* 全体の幅 */
width:900px; /* 500px→900px */
margin:auto; /* 自動中央寄せ */
height:90px; /* 高さ */
}
#y_search_area input[name="p"]{ /* 検索入力部分 */
width:500px; /* 幅 */
height:22px; /* 高さ */
font-size:14px; /* 文字の大きさ */
}
#y_search_area input[name="btnY"]{ /* 検索ボタン */
width:150px; /* 幅 */
height:30px; /* 高さ */
font-size:14px; /* 文字の大きさ */
vertical-align:-1px; /* 縦の位置揃え */
}
#y_search_area li{ /* 選択ボタン */
font-size:16px; /* 文字の大きさ */
}
#y_search_area li input[name="vs"]{/* 選択ボタン */
vertical-align:0px; /* 縦の位置揃え */
margin-right:10px; /* ボタン右余白 */
}
.y_search_div ul{ /* 選択ボタン */
margin-left:180px !important; /* 右からの位置 */
}
/* ------------------------------------------------------------------ */