【Gushカスタマイズ】Googleカスタム検索のデザインを変更する方法

前回の記事【Gushカスタマイズ】Googleカスタム検索をサイドバーに設置に引き続いて、Googleカスタム検索のデザインを変更します。
デザイン変更の方法については以下のページを参考にしました。

Googleのカスタム検索バーを自分のサイトに合わせてカスタマイズする方法解説します！ | iPhone・Macの情報発信ブログ “NUMBER333”

CSSでデザイン変更

参考までに僕の設定を紹介します。といっても上のページから自分のサイトに合わせてちょこっと数字を変えただけですが。

/*--------------------------------------
  Google Custom Search
--------------------------------------*/
#cse-search-box {
    width: 252px !important;
    float: left;
    margin-bottom: 24px;
    margin-left: -17px;
}
#cse-search-box table.gsc-search-box td.gsc-input {
    padding: 0 !important;
}
#cse-search-box input[type="text"] {
    border-radius: 5px 0 0 5px;
    height: 25px;
    padding: 0 !important;
    width: 189px;
    float: left;
    margin-left: 18px;
}
#cse-search-box input[type="submit"] {
    background-color: #444;
    border: 1px solid #444;
    border-radius: 0 5px 5px 0;
    color: #FFF;
    float: right;
    height: 28px;
    margin-left: 0 !important;
    width: 40px;
}

適用後の表示を確認すると、カスタム検索以降のサイドバーのパーツが回りこんでしまっています。

マージンを変更して直ったと思いきや、ブラウザの幅を変えると表示がおかしくなったりと苦労しましたが、調べたらCSSに1行追加するだけで簡単に直すことができました。

#sub .side_contents ul li {
	margin-bottom: 0.3em;
	/*回りこみを抑制するため1行追加*/
	overflow: auto;
}

しばらくはこれで様子を見て、気になったらまた変更したいと思います。