ブロックウィジェットでのgoogle検索

[komori0321]

■ WordPress のバージョン
5.8.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
14.11.4

■ Pro Unit のバージョン
0.12.0

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
正常な表示

■ 自分で試した事
可能な限りのプラグインの停止

■ 症状が発生するブラウザ
Edge Chrome safari（iphone)

■ 実際の症状
ページにより
検索文字の入力領域以外に枠が表示されてします
TOPﾍﾟｰｼﾞとtop直下のページは正常と思われる
3層目以降の表示で意図しない表示になります

画像を添付します
回避方法をご助言願えれば幸いです
よろしくお願いします

• このトピックはkomori0321が2年、 6ヶ月前に変更しました。
• このトピックは石川＠Vektor,Inc.が2年、 6ヶ月前に変更しました。

Attachments:

You must be logged in to view attached files.

---

該当URL : https://*********

※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

[うなこ]

テーマ側のtableの装飾のcssが入ってしまっているようでした。
以下のCSSを子テーマや追加CSSなどに追記しますと、消えますか？

.gsc-search-box td{
border: none;
padding: 0;
}
.gsc-search-box .gsc-input{
margin-bottom:0;
}

githubのLightningのissueをたてました

• この返信は2年、 6ヶ月前にうなこが編集しました。

[komori0321]

うなこ様

いつもありがとうございます
子テーマのcssに追記しています

表示は統一されましたが
やけに細くなりました
確認願います

＞githubのLightningのissueをたてました
了解しました

• この返信は2年、 6ヶ月前にkomori0321が編集しました。

[うなこ]

ほんとですね、、tableが入子になっているようで、　中のtd全体のpaddingを０にしてしまっていました。
以下のCSSでいかがでしょうか。まだ変でしたら教えてくださいmm

.gsc-search-box td{
border: none;
}
.gsc-search-box td.gsc-input{
margin-bottom: 0;
padding: 0 12px 0 0;
}

• この返信は2年、 6ヶ月前にうなこが編集しました。

[komori0321]

うなこ様

何度もすみません
頂いたcssに修正したところ
cssを追加しないときと同じようになります。
現在、下記を追記した状態です

データ消去装置 PRO-S01

追加scc
>.gsc-search-box td{
>border: none;
>}
>.gsc-search-box td.gsc-input{
>margin-bottom: 0;
>padding: 0 12px 0 0;
>}

[うなこ]

こちらこそすみません！同じクラス名がついているので、間違えてしまいました。。m(_ _)m
おそらく以下のCSSで大丈夫だと思います。

.gsc-search-box td{
border: none;
}
.gsc-search-box td.gsc-input{
padding: 0 12px 0 0;
}
.gsc-search-box table.gsc-input{
margin-bottom: 0;
}

• この返信は2年、 6ヶ月前にうなこが編集しました。

[komori0321]

うなこ様

お世話になります
うまく表示されるようになりました
お手数をおかけしました。
ありがとうございます

＞githubのLightningのissueをたてました
修正可能でしたら　よろしくお願いします

[komori0321]

うなこ様

お世話になります
今気が付いたのですが
もともと表示が大きくなっていたページでは
検索文字を入力した瞬間に、厚みが倍近くに変化します

文字入力後　厚みがますページ

データ消去装置 PRO-S01

正常ページ

HOME

ご連絡まで

[石川＠Vektor,Inc.]

追加した検索関連CSSを削除した上で、
新規に作成した空のページで症状は発生しますか？

[komori0321]

石川様

お世話になります

＞追加した検索関連CSSを削除した上で、
＞新規に作成した空のページで症状は発生しますか？

別のtestサイトで試してみました
新規で２ページほど作成してみましたが今のところ正常表示です
現象の出るページを再作成の必要があるのでしょうか？

testサイト

• この返信は2年、 6ヶ月前にkomori0321が編集しました。

[石川＠Vektor,Inc.]

症状の出るページの中身に問題がある可能性があります。

新規作成して正常に表示されているページに症状の出ているページの中身を貼り付けてみて、不具合が発生するか確認してみてください。

発生する場合は再度中身を削除して 少しずつ追加してみて、原因となるブロックを特定してみてください。

[komori0321]

石川様

お世話になります
＞新規作成して正常に表示されているページに症状の出ているページの中身を貼り付けてみて、不具合が発生するか確認し＞てみてください。
＞発生する場合は再度中身を削除して 少しずつ追加してみて、原因となるブロックを特定してみてください。
→私の時間的な問題で、作業は来週になると思います
結果　連絡します

とりあえずは　うなこ様に教えていただいたcssで回避しておこうと思います

うなこ様、石川様

お手数をかけました。ありがとうございます

小森

[komori0321]

石川様
うかこ様

お世話になります
少し時間ができたのでtestしてみました
結果
通常のテーブルブロックを使うとこの現象は起こるようです
テーブルブロックを削除すると正常表示です
下記参考testページ（テーブルブロック組込中）

データ消去装置 PRO-M02

よろしくお願いします
尚　
ページを新規で作成しても同様です

testサイト

• この返信は2年、 6ヶ月前にkomori0321が編集しました。

[石川＠Vektor,Inc.]

原因としては

* google検索が table タグで構成されている
* Lightning が table タグに対して余白を設定している
* CSS最適化を有効化していると table が存在しないページでは table タグに余白を付与する CSS が出力されない → Google検索の表示が正常に見える

という現象でした。

ただ、 Google 検索については Lightning のユーザー全員が設置するものではないので、
Lightning側での対応ではなく、下記のCSSを追加CSSなどに記載してご利用お願いいたします。

body .gsc-control-cse{
padding:0;
}
.gsc-search-box td{
border: none;
}
.gsc-search-box td.gsc-input{
padding: 0 12px 0 0;
}
.gsc-search-box table.gsc-input{
margin-bottom: 0;
}
.gsc-search-box td.gsc-search-button{
padding:0;
}

• この返信は2年、 6ヶ月前に石川＠Vektor,Inc.が編集しました。

[komori0321]

石川様

お世話になります
お手数をおかけしました

＞ただ、 Google 検索については Lightning のユーザー全員が設置するものではないので、
＞Lightning側での対応ではなく、下記のCSSを追加CSSなどに記載してご利用お願いいたします。

了解しました。ありがとうございます

sccをはめ込んでの表示結果
・テーブルブロックを使ったページでgoogle検索を設置した時、検索文字入力エリアに罫線が表示され大きくなる
→上記現象はなくなり、通常の表示になりました
・検索文字を入力した瞬間に、厚みが倍近くに変化します（テーブルブロックを使った時）
→うなこ様にいただいたcssと同様に厚みは変化します

結果　弊社のページでの表示は、うなこ様にいただいたcssと同様の表示です。

報告まで　ありがとうございました

[投稿者]

投稿