#0004 WpTHK adsense カスタム検索がつぶれるのを修正する
スマホ(Textのみ)⇔PC(Display)広告自動切換えテスト中(現在スマホ以外で表示中)
WpTHK テーマに adsense カスタム検索を貼り付けると以下のように潰れて表示されます。原因は Bootstrap にあるらしいとのこと。
今現在のGoogleカスタム検索のCSSは、box-sizing が content-box として使用されるようデザインされているみたいです。Bootstrapの標準は box-sizing が border-box ですよね(Bootstrap 3の場合)。この違いが表示に影響しているようです。
また入力フォームも、あまり外部から設定されることを想定されていないようです。
とのことです。引用元は以下のリンクですので、詳しくはそちらをどうぞ
BootstrapとGoogleカスタム検索を同時に使うと、検索ボタンが小さく潰れてしまう場合の解決方法
実際に何をすれば良いのかというと次のとおりです。
1. | 『adsense カスタム検索』のコードを DIV で囲む |
ここでは以下のように class='gglesearch' 属性をつけた DIV で囲んでいます。
<div class='gglesearch' style='height:50px;margin:0; border:0;'>
~
</div>
上のコードをサイドバー等に新規に追加したテキスト・ウィジェットの中に貼り付ければ OK です。
2. | style.css もしくは Headタグ(add-header.php) にスタイルシート(css)を記述する |
以下のように、css を追加してください。
<style type="text/css">
/* adsense カスタム検索がつぶれてしまうのを回避する */
.gglesearch .gsc-control-cse * { box-sizing: content-box;}
.gglesearch .gsc-input {line-height: 1;}
</style>
これで以下のように本来の形に戻ります。
(注意)
カスタム検索のレイアウトで『オーバーレイ』を含むいくつかは上記の css 設定でうまくいくのですが、『google がホスト/新しいウィンドゥ』では駄目でした。まだ他に設定が必要なようですが、良い情報が見つからないのでとりあえずここまでとすることにしました。
wrote by tasa.
[広告]
最近の投稿
- #0018 ブログパーツ・相互RSS 貼付サンプルコード
- #0017 Windows 10 お勧め設定 – 2 : 高速化設定
- #0016 Windows 10 お勧めアプリ – 1 : Akabei Monitor & Windows ツールバーの設定方法
- グーグル翻訳で使用できる言語コード一覧 (2016/11/22 現在)
- 時事ネタ : グーグル翻訳の翻訳精度が向上した!
- #0014 JavaScript での 数値 と 文字列 (とブール型/オブジェクト型/配列型)の型変換
- #0013 WordPress テキストウィジェットの中でプラグインを使わずに PHP を実行する方法
- #0012 VMware Player 5 の安全なアンインストール方法 2016年11月版
- #0011 VMware 32bit 版のダウンロード方法 & アンインストール時の注意点
- #0010 VMware player 12 のインストールしゲストで windows 10 をインストールする
- #0009 WordPress記事 に Blogger の画像を利用する (画像拡大ライブラリ lity も使用します)
- 10/29 ~ 11/1 までタイのスパンブリーという田舎に行きます。
- #0008-3 WordPress投稿画面のボタンの削除と追加
- #0008-2 ショートタグで番号付き見出しを見やすくする。
- #0008-1 ショートタグで記事をインデントして見やすくする。
最近のコメント