自由でクリエイティブな暮らしを応援!
Search

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カスタム検索エンジンについて学ぶ

 

いいね、シェア、フォロー歓迎!2020テーマは「自然から学び自然と共に生きる」

EVAHKS

運営:嶋耕作(しまこうさく)『相場の熊さん』の愛称で親しまれているFX裁量トレーダー、ライター。自然が好きで日本国内に山所有。ひいお爺様は外交官。20代前半に教育関連事業にて年商3億円達成。その後、肺炎で臨死体験。世界人口4%の性格タイプを持つ。自由と安定。混乱と静寂。異なる性質のふたつを併せ持っている。趣味は読書、映画、アニメ、PUPG、人狼ジャッジメント、バスケ、音楽。好きな場所は、海、森、温泉、猫の肉球。漫画の島耕作はサラリーマンですが、サラリーマンはこの世で一番やりたくない仕事です。

5 Comments
  1. […] Googleカスタム検索のデザインを変更する方法 […]

  2. […] 02.06.16 Googleカスタム検索のデザインをカスタマイズする方法 […]

  3. […] 以前書いた記事「Googleカスタム検索のデザインをカスタマイズする方法」で、htmlだけでもなかなかカッコイイデザインが出来たと思っていたのですが、WordPressのテーマを変更したことで […]

  4. […] 詳しい記事の内容はこちらをご覧ください→ Googleカスタム検索のデザインをカスタマイズする方法 […]

  5. […] 以前書いた記事「Googleカスタム検索のデザインをカスタマイズする方法」で、htmlだけでもなかなかカッコイイデザインが出来たと思っていたのですが、また一から検索エンジンを作りま […]

Leave a Comment

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