クイックヒント：Googleカスタム検索のスタイルを手動でスタイリングする方法
コアポイント
- 検索フォームを手動でレンダリングすることで（特別なGCSEタグを使用する必要がなく）、Googleカスタム検索エンジン（GCSE）を手動でスタイリングすることができ、それにより、検索入力フィールドをより適切に制御し、それらをより簡単に見せることができます。
- GCSEコールバック関数は、入力プロパティを変更する前に入力がロードされるようにします。このメソッドは、
setTimeoutメソッドを使用するよりも信頼性が高くなります。 - Google検索APIを使用して、検索ボックスと結果ボックスを作成できます。アクティブなクエリが存在する場合、結果ボックスも作成されます。その他のカスタマイズは、ドキュメントを調べることで実現できます。
- カスタムスタイル関数は、さらにカスタマイズするために検索DIVに追加できます。この関数は、プレースホルダーを変更し、背景を削除し、焦点が合っていないときに背景を削除するイベントを追加するために使用できます。
この記事はマーク・ブラウンによってレビューされました。 SetePointのすべてのピアレビューアーズに感謝します。
Webサイトの所有者は、組み込みやカスタム検索機能を使用する代わりに、Google Custom Search Engine（GCSE）を使用してコンテンツを検索することを選択します。その理由は単純です - 作業がはるかに少なく、ほとんどの場合、目的を達成できます。高度なフィルターやカスタム検索パラメーターが必要ない場合は、GCSEが最適です。
このクイックヒントでは、検索フォーム（特別なGCSEタグを使用する必要はありません）と結果ボックスを手動でレンダリングする方法を示します。質問
通常、WebサイトにGCSEを追加するのは、コピーパスティングスクリプトやカスタムHTMLタグと同じくらい簡単です。特別なGCSEタグを配置する場合、入力検索フィールドがレンダリングされます。このフィールドからの入力と開始検索は、以前に構成されたパラメーターに基づいてGoogle検索を実行します（たとえば、SitePoint.comのみを検索します）。
一般的な質問は、「GCSE入力フィールドのプレースホルダーを変更する方法」です。残念ながら、提案された答えは通常間違っています。これは、信頼できないメソッドを使用してGCSEのAJAXコールが完了するのを待つ（入力がDOMに接続されていることを確認）、JavaScriptを介してプロパティを変更するためです。
また、setTimeout
GCSEアカウントを作成しますsetTimeout()
検索エンジンはオンラインで完全に構成されています。最初のステップは、GCSE Webサイトにアクセスして[追加]をクリックすることです。ウィザードに従って、検索するドメイン名（通常はWebサイトURL）を入力します。これで、高度な設定を無視できます。 「仕上げ」をクリックした後、3つのオプションが表示されます：
- 「コードを取得」。これにより、検索がウェブサイトに表示されるように、コピーしなければならないものとそれを配置する場所をガイドします。 「public url」では、セット検索の作業プレビュー
- 「コントロールパネル」は、検索をカスタマイズするために使用されます
html設定
試してみると、必要なHTMLを使用して基本的なindex.htmlと、レンダリングとカスタム検索に必要な機能を含むapp.jsファイルを作成します。
で基本的なHTMLファイルを作成し続けます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1 id="GCSE-test">GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<🎜>
</body>
</html>を追加し、特別なクラスを使用して、検索フォームと結果を提示する要素を識別しました。 <div>
マニュアルレンダリング関数
app.jsファイルを入力して、次のものを追加します。最初に、構成用のいくつかの変数を宣言します。書いたIDを前に下に置いて、構成のフィールドに入れます。ローカルindex.htmlファイルのURLを
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](div); // 传递div而不是form
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
gcseIdresultsUrl関数ページが読み込まれているかどうか、およびコールバック関数がレンダリングに責任を負います。後でドキュメントがロードされた後。
renderSearchFormsfunction configで提供されるクラスの要素を使用してDOMをクエリします。ラッパーdivが見つかった場合、検索フィールドと結果フィールドをレンダリングするために、それぞれqueryAndRender()および
queryAndRenderrenderSearch()関数は、実際の魔法が発生する場所です。 renderResults()
renderSearchレンダリング関数は、この例で提供されているよりも多くのパラメーターを受け入れるので、さらなるカスタマイズが必要な場合は、ドキュメントを確認してください。
パラメーターは正確にレンダリングするものを示します（google.search.cse.element結果
検索divまたはその両方）。 tag
さらに、ラッパー要素のデータ属性を見つけます。スタイリング機能属性が指定されている場合、範囲内の関数名を探して要素に適用します。 。これが要素をスタイリングするチャンスです。
このコードスニペットでは、GCSEがこの変数を内部で使用し、読み込み後にコールバック関数を実行できるように、グローバルスコープにコールバック変数を設定します。これにより、このメソッドは、renderSearch()ソリューションを使用して、入力フィールドのプレースホルダー（またはその他のもの）を編集するよりもはるかに優れています。
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};これまでのところ、検索ボックスと結果をレンダリングするために必要なすべてを含めました。 node.jsがインストールされている場合は、index.htmlおよびapp.jsファイルが配置され、http-serverコマンドを実行するフォルダーに移動します。デフォルトでは、これにより、LocalHostのポート8080のフォルダーに内容が提供されます。
スタイル関数
ここで、検索divにカスタムスタイル関数を追加します。 index.htmlを返し、#searchForm divにstyling-function属性を追加します：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GCSE test</title>
</head>
<body>
<h1 id="GCSE-test">GCSE test</h1>
<div id="searchForm" class="gcse-search-wrapper"></div>
<div id="searchResults" class="gcse-results-wrapper"></div>
<🎜>
</body>
</html>次に、app.jsに移動し、ファイルの上部で、構成変数宣言の下で、新しい関数を追加します。
var config = {
gcseId: '006267341911716099344:r_iziouh0nw', // 替换为您的搜索引擎ID
resultsUrl: 'http://localhost:8080', // 替换为您的本地服务器地址
searchWrapperClass: 'gcse-search-wrapper',
resultsWrapperClass: 'gcse-results-wrapper'
};
var renderSearchForms = function () {
if (document.readyState == 'complete') {
queryAndRender();
} else {
google.setOnLoadCallback(function () {
queryAndRender();
}, true);
}
};
var queryAndRender = function() {
var gsceSearchForms = document.querySelectorAll('.' + config.searchWrapperClass);
var gsceResults = document.querySelectorAll('.' + config.resultsWrapperClass);
if (gsceSearchForms.length > 0) {
renderSearch(gsceSearchForms[0]);
}
if (gsceResults.length > 0) {
renderResults(gsceResults[0]);
}
};
var renderSearch = function (div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchbox-only',
attributes: {
resultsUrl: config.resultsUrl
}
}
);
if (div.dataset &&
div.dataset.stylingFunction &&
window[div.dataset.stylingFunction] &&
typeof window[div.dataset.stylingFunction] === 'function') {
window[div.dataset.stylingFunction](div); // 传递div而不是form
}
};
var renderResults = function(div) {
google.search.cse.element.render(
{
div: div.id,
tag: 'searchresults-only'
});
};
window.__gcse = {
parsetags: 'explicit',
callback: renderSearchForms
};
(function () {
var cx = config.gcseId;
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
結論
Googleカスタム検索エンジンは、特にWebサイトが静的なHTMLである場合、簡単な検索の迅速なセットアップに非常に効果的です。少量のJavaScriptコードを使用すると、検索フォームと結果ページをカスタマイズして、ユーザーによりシームレスなエクスペリエンスを提供できます。GCSEを使用していますか、それともより良い解決策を見つけましたか？以下にコメントしてください！
Googleのカスタム検索スタイルの設定に関する
FAQ
Googleのカスタム検索エンジンの外観をカスタマイズする方法は？CSS（カスケードスタイルシート）の使用を含むカスタムGoogle検索エンジンの外観をカスタマイズします。 CSSは、HTMLで書かれたドキュメントの外観とフォーマットを説明するスタイルシート言語です。検索エンジンの色、フォント、サイズ、その他の要素を変更できます。これを行うには、プログラム可能な検索要素コントロールAPIにアクセスする必要があります。これにより、検索要素をカスタマイズできます。その後、CSSを正しいセクションに追加して、検索エンジンの外観を変更できます。
WebサイトにGoogleカスタム検索を追加できますか？
はい、Googleカスタム検索をWebサイトに追加できます。 Googleは、ゲットリクエストを送信するために使用できるカスタム検索JSON APIを提供します。このAPIは、JSON形式で検索結果を返します。その後、これらの結果を使用して、ウェブサイトにカスタム検索エンジンを作成できます。これにより、ユーザーはあなたのウェブサイトまたは指定した他のウェブサイトを検索できます。
Googleカスタム検索を使用して検索ボックスを実装する方法は？
Googleカスタム検索で検索ボックスを実装するには、プログラム可能な検索エンジンWebサイトで実行できる検索エンジンIDの作成が含まれます。 IDを取得したら、カスタム検索要素コントロールAPIを使用して検索ボックスを作成できます。その後、CSSを使用してこの検索ボックスをカスタマイズできます。
プログラム可能な検索要素コントロールAPIは何ですか？
プログラム可能な検索要素コントロールAPIは、プログラマブル検索エンジンをカスタマイズできるGoogleが提供する一連の機能です。これには、検索ボックスの作成、検索エンジンの外観のカスタマイズ、検索結果の制御が含まれます。
Googleカスタム検索で検索結果を制御する方法は？
プログラム可能な検索要素コントロールAPIを使用して、Googleのカスタム検索で検索結果を制御できます。このAPIは、検索したWebサイト、返された結果の数、および結果が表示される順序を指定できる関数を提供します。
商業目的でGoogleカスタム検索を使用できますか？
はい、商業目的でGoogleカスタム検索を使用できます。ただし、利用規約を理解する必要があります。たとえば、検索エンジンを使用して大人のコンテンツを表示したり、違法な活動を促進したりすることはできません。
Googleカスタム検索で検索結果の色を変更するにはどうすればよいですか？
CSSを使用して、Googleのカスタム検索で検索結果の色を変更できます。プログラム可能な検索要素制御APIにアクセスし、正しいセクションにCSSを追加する必要があります。テキスト、背景、その他の検索結果要素の色を変更できます。
モバイルデバイスでGoogleを使用してカスタム検索できますか？
はい、モバイルデバイスでGoogleを使用して検索をカスタマイズできます。プログラム可能な検索エンジンは、レスポンシブになるように設計されています。つまり、表示しているデバイスの画面サイズに合わせて調整されます。 CSSを使用して、検索エンジンの外観をカスタマイズして、モバイルフレンドリーにすることもできます。
Googleカスタム検索エンジンにロゴを追加する方法は？
CSSを使用してGoogleカスタム検索エンジンにロゴを追加できます。プログラム可能な検索要素制御APIにアクセスし、正しいセクションにCSSを追加する必要があります。その後、ロゴとして表示する画像URLを追加できます。
知識をコーディングせずにカスタム検索にGoogleを使用できますか？
Googleを使用して知識をコーディングせずに検索をカスタマイズできますが、検索エンジンを完全にカスタマイズするためにHTMLとCSSを特定して理解することをお勧めします。ただし、Googleは詳細なドキュメントとチュートリアルを提供して、開始します。
以上がクイックヒント：Googleカスタム検索のスタイルを手動でスタイリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1662
14
1419
52
1311
25
1262
29
1234
24
javascriptの分解：それが何をするのか、なぜそれが重要なのか
Apr 09, 2025 am 12:07 AM
JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。
JavaScriptの進化：現在の傾向と将来の見通し
Apr 10, 2025 am 09:33 AM
JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。
JavaScriptエンジン：実装の比較
Apr 13, 2025 am 12:05 AM
さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。
JavaScript：Web言語の汎用性の調査
Apr 11, 2025 am 12:01 AM
JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。
Python vs. JavaScript：学習曲線と使いやすさ
Apr 16, 2025 am 12:12 AM
Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）
Apr 11, 2025 am 08:22 AM
この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します
C/CからJavaScriptへ：すべてがどのように機能するか
Apr 14, 2025 am 12:05 AM
C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。
next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）
Apr 11, 2025 am 08:23 AM
私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか？ マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます
