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

Googleカスタム検索使い方




LINEで送る
Share on LinkedIn
Pocket

2016年2月1日

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

 

そこで、また一から検索エンジンを作りましたので紹介したいと思います。

こちらの記事と合わせて読んでいただくことで、Googleカスタム検索エンジンのデザインをオシャレに自分好みに変更できると思います。

 

 

 

初心者用(コードを貼る場所の説明)

ワードプレスを最近はじめた方やブログのcssを最近いじり始めた方など、実際どこに何を貼ればいいのかとかわからないと思いましたので、Googleカスタム検索エンジンのhtmlのコードとcssをどこに貼れば表示されるか簡単にですが説明します。

 

WordPressでカスタム検索エンジンを運用する場合は、このhtml コードを「単一記事の投稿(single.php)」や「固定ページテンプレート(page.php)」や「テーマヘッダー(header.php)」な ど好きな場所に貼ってください。コードを貼ったページでカスタム検索エンジンが表示されるようになります。投稿ページ、や固定ページでテキスト入力で Googleカスタム検索のコードを貼っても表示させることができます。

WordPress以外のサイトの場合も同様に、index.php、ヘッダー、フッターなど、検索エンジンを表示させたい部分にコードを追記すれば表示されます。

 

 

Googleカスタム検索のhtml

Googleカスタム検索のhtml部分のコードです。

上のコードをコピペする際には、partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx の部分は「検索エンジンID」を入力してください。

 

検索エンジンIDはGoogleカスタム検索エンジンのコントロールパネルから調べることができます。

Googleカスタム検索:検索IDの場所キャプチャー

Googleカスタム検索「検索ID」の書いてある場所

 

 

注意事項:検索エンジンIDとアドセンスID

google-400error

※以前までは、partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx の部分にアドセンスIDを入れても出来たようですが今は出来ないようです。検索エンジンごとにIDが振られているので、検索エンジンIDを入力するようにしましょう。アドセンスIDを入力してカスタム検索エンジンを作ると400エラーになって検索結果が表示されませんのでご注意ください。

 

カスタム検索エンジンをアドセンスに紐付けて収益化する方法はこちらをご覧ください。

 

 

Googleカスタム検索のCSS

Googleカスタム検索エンジンのcssに貼り付けるコードになります。

これだけでカッコよく表示されていれば良いのですが、私の場合はこのコードのままではダサかったので、こちらの記事も参考に自分のサイトに合うように変更しました。

 

そのcssがこちら(・人・)

 

 

 

 

 

「検索ボタン」を好きな画像に変更する方法

Googleカスタム検索バーの横の「検索ボタン」を自分の好きな画像に変更する方法を紹介しています。

Googleカスタム検索の検索ボタンを好きな画像に変更する方法

 

 

 

検索結果画面のロゴデザインを変更する方法

Googleカスタム検索の検索結果の画面に出てくるロゴデザインを好きな画像に変更する方法についてご紹介しています。

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

 

 

Googleカスタム検索エンジンの作成方法やデザイン変更についてまとめてあります。

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

LINEで送る
Share on LinkedIn
Pocket

よく読まれている記事




Googleカスタム検索使い方

2 件のコメント

  • コメントを残す

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

    ABOUTこの記事をかいた人

    嶋耕作

    ライター、自主制作アニメも作ったりしている。自身が主催してきたイベント企画で培った集客運営等のノウハウを使ってサイトやYouTubeなどメディア運営のサポートを行っている。