Googleカスタム検索のデザインをカスタマイズする方法

 

・Googleカスタム検索のデザインを変更する方法 を一緒にご覧いただくことで、手間はかかりますがhtmlとcssで検索エンジンを好きなデザインに変更できるようになります。

 

 

 

検索ボタンをオリジナル画像に変更する方法

 

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検索結果ロゴデザイン変更する方法

 

検索結果が表示される時に、検索バーの隣にあるロゴデザインの変更方法について解説します。

上の画像の赤い四角で囲われている部分です。上の画像はロゴデザイン変更済みのものになります。デフォルトではお馴染みGoogleの画像になっています。これを自分の好きなロゴに変更できます。とっても簡単にできるので楽しんでやってみましょう!

 

 

Googleカスタム検索エンジンの「コントロールパネル」を開きます。

https://cse.google.com/cse/all

 

 

 

手順

上から順番に作業手順を解説しています。動画と合わせてご覧いただくとスムーズに作業が進められると思います。

 

 

  1. 左にある「デザイン」をクリック
  2. 「レイアウト」
  3. 「Googleがホスト」を選択
  4. 「新しいウインドウ」を選択
  5. 「カスタマイズ」
  6. 「ロゴの画像URL」にロゴとして使用したい画像が置いてあるURLを入力
  7. 「ロゴのリンク先」ロゴをクリックした時に飛ばしたいページのURLを入力

「ロゴの高さ」(縦幅に従って横幅も自動で決まります)→「保存」

 

 

 

この記事を読んでデザインのカスタマイズがうまくいかなかった方は、下記の記事を一緒に読んでみてください。

Googleカスタム検索のデザインを変更する方法

 

 

 

Googleカスタム検索エンジンの作成方法やデザインの変更方法がまとめてあります。順番に実践していただくことでカスタム検索エンジンを収益化するまで学べます。

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

 

Follow me!

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

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

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

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

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

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

5 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください