動画素材.com/ブログ

動画素材ダウンロード配布・VJ 4K2K CG・書籍「動画素材123」、PV・MV、映像制作関連、Mac・iPhone・iPad。動画素材.com/ブログ

Googleカスタム検索 Yahoo!カスタムサーチ

限定的なレシピ検索ページをつくってみた【Yahoo!カスタムサーチ・Googleカスタム検索】

投稿日:2017年1月28日 更新日:


自炊をする事が多く、ネットでレシピ検索をする事があるのですが、
あまりクックパッドや楽天レシピなどは使いません。

なので検索した時にクックパッドが上位に沢山出るのがだいぶ鬱陶しいのです。
検索語句で「-cookpad.com」とか付ければクックパッドは検索から外れますが毎回それも面倒くさいです。

なので自分専用のレシピ検索ページをつくってしまおうという事で今回は

限定的なレシピ検索ページをつくってみます。

自分がレシピ検索でよく使うサイトだけを検索してみるページをつくります。
Yahoo!カスタムサーチGoogleカスタム検索を使用。


なお今回つくったページはこちら。


【個人的レシピ検索ページ】
「きょうの料理」「キッコーマン」「味の素」「キユーピー」から検索します。
http://xn--hhro09bn9j8uh.com/Recipesearch.html

【クックパッドからレシピ検索】
クックパッドからレシピを検索します。普通に検索するよりかは人気順で出るかと思います。
http://xn--hhro09bn9j8uh.com/Recipecook.html


Yahoo!カスタムサーチで限定的なレシピ検索ページを作成する。

今回は自分がレシピ検索でよく使うサイト

「きょうの料理」
www.kyounoryouri.jp

「キッコーマン」
www.kikkoman.co.jp

「味の素」
park.ajinomoto.co.jp

「キユーピー」
recipe.kewpie.co.jp

のサイトのみから検索できるように設定します。



Yahoo!カスタムサーチのページにアクセス

https://custom.search.yahoo.co.jp/

「新規設定」をクリックします。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】1

必要最低限の設定をしていきます。

「設定名」は後から判別できるように何か適当な名前を入力。


検索対象から「デフォルトの検索タイプ」を「ウェブ検索のみ」
限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】2

デザインに関してはデフォルトでもなんでも。後から変える事も可能なので。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】3

「プロトコルの選択」はhttpsが良いんじゃないかな。
文字コードは掲載したいサイトに合わせますが今は大抵「UTF-8」じゃないでしょうか。
検索結果を別ウィンドウで表示したい場合はチェックを入れてください。

設定が終わったら「検索設定へ」をクリック

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】4

次のページの下の方に「検索対象ドメイン」というのがあります。

検索対象ドメインの欄に検索したいサイトのドメインを入力します。

ここでは
「きょうの料理」
www.kyounoryouri.jp

「キッコーマン」
www.kikkoman.co.jp

「味の素」
park.ajinomoto.co.jp

「キユーピー」
recipe.kewpie.co.jp

の四つを入力。いずれも「http://」は外してください。
入力したら「検索結果ページデザインへ」で先に進んでください。

追記:これはこれで検索結果が味の素ばっかりになります。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】5

レイアウトを選択します。

ここでは「インラインタイプ」を選択しましたが「標準タイプ」や「ブログタイプ」の方が設置が楽かもしれません。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】6.1

「画像付き検索結果」ですが、「画像を表示しない」にチェックを入れてください。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】6.0

というのも画像を表示させるとまったく関係無い画像がずらっと表示される事もあってなんか不安定です。

追記:後でまたちょっと確認してみたんですが、今のところ大丈夫そうなのでまあお好きなように設定してください。



検索結果の幅は特に指定しなくて良いかと思います。
限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】7

先のレイアウトでインラインタイプを選んだ場合は表示したいURLを入力します。

自分の場合は「http://xn--hhro09bn9j8uh.com/Recipesearch.html

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】8

その他はデフォルトのまんまでやりましたがお好きなように。こちらではロゴ画像も設定していません。

設定したら「HTMLソース確認へ」のボタンを押してください。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】9

HTMLソースが表示されるのでそれぞれコピーして自分のサイトページに貼り付けてください。

下の場合はインラインタイプなので2つのソースがありますが両方同じページに貼り付けています。
http://xn--hhro09bn9j8uh.com/Recipesearch.html

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】10

Yahoo!カスタムサーチでいくつかのサイトに限定して検索するページをつくるのは以上です。



Yahoo!カスタムサーチの良い点

・検索結果に広告表示が無い。


Yahoo!カスタムサーチの良くない点

・検索結果に画像を表示させるとまったく関係ない画像がずらっと表示されたりするなど不安定。
・モバイル表示に対応していない。
・今回のようにいくつかのサイトに限って検索したい場合、追加できるサイトは5つまで。

モバイル表示に対応していないのはかなり痛いですね。
それとここ数年アップデートされていない感じなのでそこらへん不安を感じます。




Googleカスタム検索でクックパッド内からレシピ検索ページを作成する。

クックパッド内のページだけから検索するページをつくります。


https://cse.google.co.jp/ にアクセスします。

「新しい検索エンジン」をクリックして「検索するサイト」に「cookpad.com/recipe」と入力します。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】11

言語を日本語にして検索エンジンの名前を適当に入力

作成をクリックしてください。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】12

作成が完了がします。

とりあえず確認で「公開URL」をクリックして、適当に何か検索してください。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】13

cookpad.com/recipeから検索できているのが確認できます。

限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】14

サイトに貼りたい場合は「コードを取得」をクリックしてコードをコピーして適当に貼り付けてください。
限定的なレシピ検索ページをつくってみた【Yahoo-カスタムサーチ・Googleカスタム検索】15

検索結果のデザインを変えたい場合は「デザイン」から選んでください。

ちなみにコンパクトはお勧めしません。表示がコンパクトなのかと思ったら検索結果が5件までしか出ないのがコンパクトという事のようで。




Googleカスタム検索の良い点

・キーワードやサイトなど沢山追加できる。


Googleカスタム検索の良くない点

・広告あるのは良いが広告が占める幅がでかい。
・文字が小さい。いくらなんでもページナンバーのあの数字は小さすぎる。
・モバイルにも対応してはいるが文字が小さいので使いやすいとは言えない。
・なぜかiOSのSafariでは検索欄そのものが表示されない。



以上です。

レシピ検索以外にももちろん使えますので色々な事に活用してくださいまし。











-Googleカスタム検索, Yahoo!カスタムサーチ

CLOSE
CLOSE

Copyright© 動画素材.com/ブログ , 2019 All Rights Reserved.