サービス

WING(AFFINGER5)でサイドバーにGoogleカスタム検索を導入する方法

タルシャン

本業は、IT企業のエンジニアです。 私の正体を知っている方はそっと見守っていてください...

以前、WordPressテーマ「Cocoon」にてGoogleカスタム検索を導入する方法を紹介しました。

今回は、「WING(AFFINGER5)」においてGoogleカスタム検索を導入する手順を紹介したいと思います。

Cocoonでのカスタムスタイルシート(CSS)の調整がそのままでは、うまくいきませんでした。ググって色々調べてみましたが、STINGER用の古い記事しか見つかりませんでしたので、トライアンドエラーで調整した苦労の塊をシェアしようと思い、この記事を書いています。

Cocoonからの差分をまとめているので、Googleカスタム検索の最初の導入は以下の記事を確認してください。

「Cocoon」での設定方法はこちら

CocoonでAdSense(アドセンス)検索向け広告をサイドバーに設定する - タルシャンIT
CocoonでAdSense(アドセンス)検索向け広告をサイドバーに設定する - タルシャンIT

talushan.com

実際の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)」

AFFINGER PACK3(WING対応)

WordPressテーマランキング

(ACTION)AFFINGER6

当ブログでもメインで使用しているWordPressテーマですよ。

SWELL

初心者でもおしゃれなウェブサイトが作れる。

THE・THOR

他を圧倒するようなおしゃれなサイト制作をしたいならこちら。

  • この記事を書いた人

タルシャン

本業は、IT企業のエンジニアです。 私の正体を知っている方はそっと見守っていてください...

-サービス