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

Googleカスタム検索使い方




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

 

 

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

 

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

 

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

 

検索バーのコード

 

 

↓この部分を、

 

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

 

 

 

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

 

 

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

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

 

 

 

 

 

検索結果画面のロゴデザインをカスタマイズする方法

Google検索結果ロゴデザイン変更する方法

 

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

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

 

 

 

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

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

 

手順

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

 

・左にある「デザイン」をクリック

・「レイアウト」

・「Googleがホスト」を選択

・「新しいウインドウ」を選択

・「カスタマイズ」

・「ロゴの画像URL」にロゴとして使用したい画像が置いてあるURLを入力

・「ロゴのリンク先」ロゴをクリックした時に飛ばしたいページのURLを入力

 

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

 

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

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

 

 

 

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

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




よく読まれている記事

Googleカスタム検索使い方

2 件のコメント

  • コメントを残す

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