Googleカスタム検索エンジンのアカウント作成方法

 

 

Googleカスタム検索エンジンの「検索ボタン」をオリジナル画像に変更する方法をご紹介します。

 

Googleカスタム検索デザインのカスタマイズ

 

検索バーの右側にある「検索」ボタンを画像に差し替える方法をご紹介します。

 

 

 

検索バーのコード

 

<div id="search-box">
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="検索エンジンID" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
</div>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

 

 

 

 

↓この部分を、

<input type="submit" name="sa" value="検索" />

 

 

 

 

↓このように書き換えます。「画像のURL」部分に好きな画像のURLを入れれば完成です。

 

 

<input type="image" src="画像のURL" width="37" height="25" alt="Search" title="Search" />

 

 

 

 

ここまでで、デザイン的に満足の場合はOKですが、まだまだカスタマイズしたい方は、CSSもいじります。

 

 

 

 

CSSでデザインカスタマイズ

↓このコードの「”submit”」を「”image”」に書き換えます。そうすることで画像のCSSをいじれます。

 

 

 

#cse-search-box input[type="submit"] {
    background-color: #333333;
    border: 1px solid #333333;
    border-radius: 0 5px 5px 0;
    color: #FFFFFF;
    float: right;
    height: 31px;
    margin-left: 0 !important;
    width: 40px;
}

 

 

 

Googleカスタム検索エンジンのhtmlとcssについては「Googleカスタム検索のデザインを変更する方法」に違うパターンの記述を紹介しています。

 

 

 

Googleカスタム検索エンジンについて学ぶ

 

Googleカスタム検索エンジンのアカウント作成方法

 

 

 

最後まで読んで頂きありがとうございます。

このブログを「いいな」と感じていただけましたら、

下のボタンをクリックしていただくととても嬉しいです^^

ブログランキングに参加しています。応援クリックよろしくお願いします!

にほんブログ村 為替ブログ FXの基礎知識へ

さらに下のボタンからSNSに拡散していただくととても嬉しいです!