6

Googleウェブマスターツールを使用して、自分のウェブサイトの検索エンジンを作成しました。次に、CSEによって提供される結果の形式をカスタマイズしたいと思います。GoogleはCSSファイル全体をダウンロードするように提案していますが、headセクション内のPHPドキュメントに添付しても、何も起こりません。カスタムスタイルは機能しません。

Googleのスタイルをbodyタグの中に入れると、すべてが正常に機能しましたが、問題は、この方法がWorld Wide Web Consortiumの規則に準拠していないことです。さらに、このようなものを挿入すると、コードが非常に「汚く」乱雑になります。私のページの本文内のCSSコードの長いブロック。

外部スタイルシートで検索エンジンのデフォルトの外観を変更するにはどうすればよいですか？

4

3 に答える 3

6

外部のCSSスタイルシートをカスタムGoogle検索ボックスに使用できるかどうかを理解できましたか？

これは私が今日行ったことであり、W3Cバリデーターで検証されます。

このリンクをチェックしてください： Googleカスタム検索と外部スタイルシートを備えたホームページ。

ソースを表示すると、「コードの取得」ページのリンクからGoogleカスタム検索の「ソースCSS」をダウンロードしたことがわかります。次に、それを自分のWebサイトのサーバーにアップロードしました（CSSを好みに変更した後）。

次に、「コードの取得」ページからコードのスクリプト部分を取り出して、ホームページのHTMLに貼り付け、フレーズを変更しました。

google.load('search', '1', {language : 'en', style : google.loader.themes.MINIMALIST});

これに：

  google.load('search', '1', {language : 'en', style : src="http://hoodexc.com/css/google-search.css"});

Javaスクリプトを知っている人がもっと良い方法を教えてくれるなら（これが機能しているからといって、それが最善の方法であるとは限りません）、私に知らせてください。 外部スタイルシートを使用したGoogleCSE 外部スタイルシートを使用したGoogleCSE

于 2011-04-10T04:43:21.077 に答える
6

Googleカスタム検索をロードするときに追加のパラメータ「nocss：true」を指定するだけで、Googleが検索用のcssをロードしないようにすることができます。これにより、干渉なしにすべてのgcse- 、gs-などのcssクラスを自分で定義できます。

nocss：通常はコントロールに関連付けられているスタイルシートをロードするかどうかをAPIに指示するブール値。デフォルトのCSSを使用する予定がない場合は、これをtrueに設定することで、読み込み時間を短縮できます。デフォルト設定はfalseです。

https://developers.google.com/loader/#DetailedDocumentation

コード： 

google.load('search', '1', { 
    callback: OnGoogleSearchLoad,
    language : 'en',
    nocss: true,
    style : src="http://example.com/assets/css/gcse.css"
});

結果（サイトのデフォルトルールを除いて、cssはありません）：

GCSEテーマの代わりに私のサイトcssを使用して検索し、好きなようにカスタマイズする準備ができています。

GCSのcssファイルの例：

.gsc-tabsAreaInvisible,
.gsc-resultsHeader,
.gsc-branding,
.gcsc-branding,
.gsc-url-top,
.gs-watermark,
.gsc-thumbnail-inside,
.gsc-url-bottom {
    display: none;
}

.gsc-result {
    padding: 20px 0;
    border-bottom: 1px solid #E1E1E1;
}


.gs-image-box {
    width: 140px;
    height: 80px;
    overflow: hidden;
}

img.gs-image {
    min-height: 80px;
}

td.gsc-table-cell-thumbnail {
    vertical-align: top;
    padding: 0;
    width: 140px;
    display: block!important;
}

td.gsc-table-cell-snippet-close {
    vertical-align: top;
    padding: 0;
    padding-left: 20px;
}

.gsc-wrapper {
    font-size: 16px;
    line-height: 20px;
}

.gsc-control-cse a {
    color: #202020;
    font-family: HelveticaNeueLTPro-Cn, Helvetica, Arial, sans-serif;
}

.gs-snippet {
    color: #777;
    margin-top: 10px;
}

b {
    font-weight: normal;
}
.gsc-cursor {
    width: 100%;
    height: 20px;
    text-align: center;
}

.gsc-cursor-page {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
    margin: 20px 0;
}


form.gsc-search-box {
    background: #d9dadd;
    border: 20px solid #d9dadd; 
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */    
}

table.gsc-search-box {
    width: 100%;
}

td.gsc-search-button {
    vertical-align: middle;
    padding-left: 20px;
} 

td.gsc-input {
    vertical-align: top;
    width: 100%;
}

input.gsc-input {
    margin:0;
    width: 99%;
}

結果（カスタムスタイルを使用）：

カスタムスタイルのみのGoogleカスタム検索。

于 2013-06-06T12:31:52.687 に答える
0

GniewomirとKrisに感謝します。

V1コードを使用して、2ページのレイアウトのグーグルカスタム検索をワードプレスのブログにインストールしています。検索ボックスに<div id="cse-search-form">Loading</div>は、テキストウィジェットを貼り付け、残りのスクリプトをヘッダーに貼り付けました。

この部分を変更しました

google.load('search', '1', {language: 'en', style: google.loader.themes.GREENSKY});

に

google.load('search', '1', {language: 'en', nocss:true, style:"http://www.domain-name/wp-content/themes/theme-name/css/gcse.css"});

同時に、GREENSKY.cssをダウンロードして、サーバーにアップロードした「gcse.css」として保存しました。

GTMETRIXを介してこれを実行すると、HTTPリダイレクトに関する警告が表示されなくなります。

于 2016-03-29T19:10:43.593 に答える