● 内容
① ヤフー検索ボックスの設置 の記事の追記。
② 全体の大きさを小さくする方法の紹介。
● 大きさを半分にする例
・ 半分の大きさの例
![リアナのカスタマイズ日記(CSS編集用デザイン)](https://stat.ameba.jp/user_images/20130825/18/new-blue-777/dd/ba/p/o0308020212661145152.png?caw=800)
① 下記を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; /* 右からの位置 */
}
/* ------------------------------------------------------------------ */