以前、WordPressテーマ「Cocoon」にてGoogleカスタム検索を導入する方法を紹介しました。
今回は、「WING（AFFINGER5）」においてGoogleカスタム検索を導入する手順を紹介したいと思います。
Cocoonでのカスタムスタイルシート（CSS）の調整がそのままでは、うまくいきませんでした。ググって色々調べてみましたが、STINGER用の古い記事しか見つかりませんでしたので、トライアンドエラーで調整した苦労の塊をシェアしようと思い、この記事を書いています。
Cocoonからの差分をまとめているので、Googleカスタム検索の最初の導入は以下の記事を確認してください。
「Cocoon」での設定方法はこちら
CocoonでAdSense（アドセンス）検索向け広告をサイドバーに設定する
実際のCSSのコード
さっそく実際のコードをみていきましょう。
子テーマの「style.css」にこちらを追加することで調整が効くはずです。
「デザイン - デザインパターン」のビジネス（グラデーション縦）にて効果を確認しています。
/******************************
* Google カスタム検索
*****************************/
/* カスタム検索 全体 */
table.gsc-search-box tr {
background-color: #fff;
line-height: 0px;
}
form.gsc-search-box.gsc-search-box-tools {
margin-bottom: 0em;
}
table.gsc-search-box {
position: relative;
}
table.gsc-search-box tr {
background-color: transparent;
}
/* カスタム検索 入力欄 */
.gsc-search-box-tools table.gsc-search-box .gsc-input {
padding: 0;
}
table.gsc-search-box .gsc-input-box {
border-radius: 4px;
background-color: #fff;
}
table.gsc-search-box .gsib_a {
padding: 11px;
}
table.gsc-search-box .gsib_b {
padding-right: 36px;
}
/* カスタム検索 検索ボタン */
table.gsc-search-box .gsc-search-button {
position: absolute;
padding: 0;
border-style: none;
width: 36px;
top: 1px;
right: 1px;
bottom: 1px;
}
/*検索ボタン修正*/
input.gsc-search-button {
box-sizing: content-box;
}
.gsc-search-button-v2 {
font-size: 27px !important;
}
table.gsc-search-box td {
border-bottom-style: none;
border-left-style: none;
}
table.gsc-search-box button.gsc-search-button:hover {
cursor: pointer;
}
table.gsc-search-box svg {
width: 21px;
height: 21px;
}検索ボタン修正より下を調整すれば自分のお好みにできるはずです。
デフォルトだと崩れてしまうレイアウトの微調整に留めています。
まとめ
今回、CSSの調整を紹介しました。
こちらを参考によいブログライフを送ってはいかがでしょうか。
それでは〜。
WordPressテーマ 「ACTION（AFFINGER6）」
