【Blogger Contempoカスタマイズ】サイドバー「このブログを検索」の文字を見やすくする

BloggerのContempoを使っているのですが、検索欄に入力した文字が見にくかったので設定を変更してみました。

方法を忘れないように残しておこうと思います。

初期設定だと入力文字がほぼ見えない

beforeの矢印部分が初期設定の入力欄です。
赤丸の部分が入力欄で「あいうえお」と白字で書かれています。

背景色と明るさが近いため入力した文字が見えません。

どうやら、「入力文字の色=ブログのタイトルの文字色(白)にする」という設定になっているようです。

before

このままではわかりにくいため、

・文字色を黒にする
・入力欄を枠で囲う

という変更を加え、afterのように変更します。

after

文字を見やすくする設定方法

「CSSを追加」に追記をします。

1.テーマ(刷毛のアイコン)をクリックし、マイテーマの、
「カスタマイズ」をクリック

2.「詳細設定」をクリック

3.リストボックスから「CSSを追加」を選択

4.【検索入力欄を見やすくするCSS】の下のピンク枠の中をコピーして、下記画面の赤枠部分に貼り付ける。 (この画像は貼り付けた後の物です。)

*検索入力欄を見やすくするCSS*
/*検索入力欄を見やすくstart*/
.sidebar_bottom .search-input input {
color: #000000;    /*文字を黒に*/
outline: 1px inset; /*入力欄を枠で囲む*/
height: 35px;         /*枠の高さを調整*/
}
/*検索入力欄を見やすくend*/

これで入力文字がわかりやすくなりました。

もっとスマートな方法がありそうですが、まあいいか!HTMLがよくわからない私にはこれで十分かなと思います。

ブログランキングに参加しています。
クリックしていただけると励みになります!

ブログランキング・にほんブログ村へにほんブログ村

人気ブログランキング人気ブログランキング

コメント

タイトルとURLをコピーしました