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

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

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

★ グーグル検索ボックスの大きさの調整


● 内容

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


● 大きさを半分にする例

・ 半分の大きさの例


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




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









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


/* ------------------------------------------------------------------ */
/* グーグル検索ボックス   大きさのカスタマイズ(半分に縮小)    */
/* ------------------------------------------------------------------ */
#g_search_area img{ /* 画像の大きさ */
width:64px; /* 128px→64px */
}
#g_search_area{ /* 全体の幅 */
width:250px; /* 500px→250px */
}
#g_search_area input[name="q"]{/* 検索入力部分 */
width:100px; /* 幅 */
height:10px; /* 高さ */
font-size:10px; /* 文字の大きさ */
}
#g_search_area input[name="btnG"]{/* 検索ボタン */
width:60px; /* 幅 */
height:18px; /* 高さ */
font-size:10px; /* 文字の大きさ */
vertical-align:-1px; /* 縦の位置揃え */
}
#g_search_area{ /* 全体 */
font-size:10px; /* 文字の大きさ */
}
#g_search_area input[name="sitesearch"]{/* 選択ボタン */
vertical-align:-3px; /* 縦の位置揃え */
}
/* ------------------------------------------------------------------ */