Googleカスタム検索の横幅を狭めて設置する方法

2015年5月17日

Tumblr(大津一城のTumblrで普通のブログ)のthemeをなんとなくな気分でVenusからELISEへ変更しました。

私が作成したブログで初めてのシングルカラムです。

過去の記事を検索できるようにGoogleカスタム検索をフッター部分に設置しました。

しかし、初期状態ではブログの横幅一杯に広がり、あまりバランスがよくありません。

Googleカスタム検索の横幅を狭くするには?

スタイルシートを使って横幅をピクセル単位で指定します。
Tumblrの「テーマの編集」>「詳細設定」>「カスタムCSSを追加」の中に

#search {
width: 300px;
margin: 0 auto;
}

を追加します。
横幅を300ピクセルにして、センタリングするという意味になります。
Tumblrの「テーマの編集」>「HTMLを編集」から
検索ボックスを設定したい場所へ

<div id=”search”>
Googleカスタム検索のコードを貼り付け
</div>

を入力します。
幅が狭くなり、センタリングされました。
このElise テーマ、見栄えはとても良いのですが、実はiPadやiPhoneのSafariでは、過去の記事をどんどん読み込んでいくと次第にクラッシュしてしまいます。
別のテーマに変更するまで一部の方には暫くの間、ご迷惑をおかけいたします。2015年4月27日追記
4月25日にEliseテーマがversion1.4Cになりました。

以前のバージョンではPagination styleを「Next/Previus」にすると2ページ目以降ではボタンが消えるバグがあり、使用することができませんでした。
しかし、この点が改善され、Pagination styleを「Next/Previus」にして、常時指定した記事数のみ読み込むことができるようになり、iPadやiPhoneのSafariでも強制終了しなくなりました。