フォーラム

トピックを立てる前にチェック
  1. フォーラムガイドライン」に必ず目を通してください。
  2. バージョンアップデート後に表示がおかしくなった場合は、
    「SWELL設定」>「リセット」からキャッシュクリアを先にお試しください。
  3. フォーラム内検索で過去に同じようなトピックがないか検索してみてください。
PC/SPともに背景色が白ではなく、薄...
 
通知
すべてクリア

[解決済] PC/SPともに背景色が白ではなく、薄いブルー表示されてしまう

15 投稿
4 ユーザー
20 Likes
383 表示
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 

こんにちは。
Swellを導入して始めてブロックエディタを使いました。

1ページだけ背景色に薄いブルーが入るようになってしまいました。(気が付いたらこうなってました)

CSSの閉じタグ抜けなど考えられるのですが、基本ブロックのみしか利用していません。

テーブル背景色など心当たりのことをしましたが、解消されません。

この場合、何が原因かわかりますでしょうか?

スクリーンショット 2022 07 27 11.14.12

 よろしくお願いいたします。

確認項目
利用規約に同意します*, ガイドラインを読み、内容を把握しています*, よくある質問を先にチェック済みです*, 過去に同じようなトピックがないか検索済みです*, Googleなどでも検索してみました, 自分で追加したコードに問題がないかチェック済みです
問題が確認できるページのURL
利用中のSWELL本体のバージョン
2.6.2
利用中のPHPバージョン
PHP7.4.28
OS
Mac OS
利用中のWordPressバージョン
5.9.3
利用中のサーバー会社
Xサーバー
ブラウザ
Chrome
利用中のプラグイン一覧

Ad Invalid Click Protector
Akismet Anti-Spam (アンチスパム)
Broken Link Checker
Change Last Modified Date
Code Snippets
Companion Sitemap Generator
Contact Form 7
FileBird Lite
Instant Indexing
Pochipp
Pochipp Assist
SEO SIMPLE PACK
UpdraftPlus - バックアップ/復元
Useful Blocks
Wordfence Security
WP Content Copy Protection & No Right Click
WP Multibyte Patch
WP Revisions Control
Yoast Duplicate Post

 
投稿済 : 27/07/2022 11:33 am
es
 es
(@es)
投稿: 24
メンバー
 

ソースコードを拝見するかぎり、

/*---------------------------------------------
  カエレバ・ヨメレバ・トマレバ
---------------------------------------------*/

以降かなりCSSを記述されているようですが、おっしゃっているのはURLを貼られているページのことですよね?
CSSの検証はしていませんが、やはりご自身でCSSかプラグイン等の設定で指定されているんじゃないかな?と思いますので、今一度ご確認いただくとお気付きになるかもです。

This post was modified 2か月前 by es
 
投稿済 : 27/07/2022 1:11 pm
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 

みていただき、ありがとうございます。

このページのみで今日確認するまでは、このような現象はありませんでした。

どこでいつこうなったのか不明です。

一回、このページをそのまま複製して、一つづつ反映しながら確認するしかないかなと思っています。

とはいえ、なんらかの不具合があるように見えます。。

 
投稿済 : 27/07/2022 5:14 pm
es reacted
es
 es
(@es)
投稿: 24
メンバー
 

@anya さん
薄い青色になった部分をキャプチャし、色コードを調べたら『#f3f8fd』でしたので、ソースコードを『#f3f8fd』で検索したところ、この色コードが出てくるのは
<style id='swell_custom-inline-css' type='text/css'>~</style>の中だけでした。
これがどういうものかまでは確認できていませんが、思い当たる節や、他の方の見解のきっかけになれば幸いです。

 
投稿済 : 27/07/2022 5:34 pm
es
 es
(@es)
投稿: 24
メンバー
 

その後もどうも気になったのでテストを含め色々と調べてみたのですが、個別ページのカスタムCSSに記述していないとなると何が原因なのか、私の技量ではコレというものにたどり着けませんでした。
ご使用中のプラグインも、特に個別ページごとの背景カラーを指定するようなものはなさそうですものね。
お役に立てず申し訳ないです。

 
投稿済 : 27/07/2022 8:43 pm
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 

再度、みていただきありがとうございます。

バックアップをとって、ひとつの段落ごと反映して表示確認しました。
「※テキスト〜」という赤文字の注釈が表下につけておりましたが、こちらを削除したら薄いブルーの背景色がなくなりました。。

この文章はページ初期の段階からあったのですが、、
ここはよくわからないです。

確認いただき、ありがとうございます

 
投稿済 : 27/07/2022 10:49 pm
es reacted
es
 es
(@es)
投稿: 24
メンバー
 

経緯はともかく、無事解決されたのであれば何よりです!

いっちょかみしたのに何も良い方向を示せず気掛かりでしたのでホッとしました。。

 
投稿済 : 27/07/2022 10:56 pm
anya reacted
しらこ
(@96ssbike)
投稿: 513
メンバー
 

横槍失礼します。解決されて良かったです…!

「※テキスト〜」という赤文字の注釈が表下につけておりましたが、

この文章はページ初期の段階からあったのですが、、

という部分から、おそらくですが、記事編集中に作成した一部分のブロックに何らかの不具合(コードが欠落?)が発生したのかなと想像します。
原因となる部分はある程度推測(確定?)できましたので、
詳しくは、記事のリビジョンからコードを追うことで具体的な内容は見る(診断する)ことができるかと思います。

SnapCrab NoName 2022 7 27 23 17 0 No 00
SnapCrab NoName 2022 7 27 23 17 13 No 00

こういうのですね。

詳しく見る(診断する)際は、こういうのを見て追っていくこともできますので、よろしければご参考ください(既に必要ないかもしれませんが。。。)


@es さん、はじめまして。フォローをしていただき、ありがとうございます。

本題とは異なりますが、やり取りの中で出ました

<style id='swell_custom-inline-css' type='text/css'>~</style>

ですが、こちらは主にカスタマイザーで設定した内容のCSSが含まれるかと存じます。

たとえば、この中の一番最初のCSSを追っていくと、フォント指定を行っています。
具体的には、この設定場所は外観>カスタマイズ>サイト全体設定>基本デザイン>■フォント設定、になるかと思います。

SnapCrab NoName 2022 7 27 23 15 51 No 00
SnapCrab NoName 2022 7 27 23 16 19 No 00
This post was modified 2か月前 2回 by しらこ

SWELLカスタマイズ向けの非公式サイトを作りました。何か見つかるかも?→ https://tecchan.jp/swell-tips/
上記以外のWordPress全般向けのナレッジはこちら→ https://tecchan.jp/
疲れたら癒やされてくださいにゃーん (ΦωΦ)

 
投稿済 : 27/07/2022 11:21 pm
anya and es reacted
es
 es
(@es)
投稿: 24
メンバー
 

@96ssbike しらこさん
ありがとうございます。なるほど、そうなのですね。確かにそのstyleの文頭は:root~でのフォントファミリーになっていましたね。
またこちらのフォーラムでも色々と勉強をさせていただきたいと思っていますので、今後ともよろしくお願いいたします。^^

 
投稿済 : 27/07/2022 11:29 pm
anya and しらこ reacted
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 

@96ssbike 

しらこさん、ありがとうございます。

現行ページから辿るとわからなくなりましたので、一旦コピーとってひとつづつ検証したページで辿ってみました。

↓この部分で背景薄いブルーになっていました。

<p>※<span class="swl-cell-bg has-swl-pale-02-background-color" data-icon-size="l" data-icon-type="bg" data-text-color="black" aria-hidden="true">&nbsp;</span><span class="u-nowrap"><span class="swl-cell-bg has-swl-pale-02-background-color" data-icon-size="l" data-icon-type="bg" data-text-color="black" aria-hidden="true">&nbsp;</span><span class="u-nowrap">Premiere Pro</span>と<span class="u-nowrap">After Effects</span>は動画編集をしない場合は考えなくてOK</span>
</p>

中盤の

<span class="u-nowrap"><span class="swl-cell-bg has-swl-pale-02-background-color" data-icon-size="l" data-icon-type="bg" data-text-color="black" aria-hidden="true">&nbsp;</span>

の閉じタグが一つなくなっているので、ここが原因だったのかなと思われます。

ブロックエディタもSwell自体もまだまだ使い始めで、わからないことが多いです。

また、勉強させていただきます。

よろしくお願いいたします。

 
投稿済 : 28/07/2022 5:48 am
しらこ and es reacted
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 

@es さん

ありがとうございます。

ブロックエディタもSwell自体もまだまだ使い始めで、わからないことが多いです。

今回初めてフォーラム使わせていただき、返信いただけて嬉しかったです。

また、勉強させていただきます。

よろしくお願いいたします。

 
投稿済 : 28/07/2022 5:50 am
es reacted
skillsharejp
(@skillsharejp)
投稿: 431
SWELL高速化顧問
 

解決したみたいなので解決済みへ変更してください。

WordPress高速化と保守管理の専門家
SWELLに高速化ノウハウ提供しています。個別依頼の対応可能。
- 定期契約不要のスポットWordPress保守管理(改ざん検知駆除込)
- 移行、HTTPS化、マルウェア駆除、各種設定代行、WPチューンアップ

 
投稿済 : 28/07/2022 3:46 pm
anya and しらこ reacted
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 

@skillsharejp 

ありがとうございます。

使い方が今ひとつわかってませんでした。

解決済みにしました。

今後もよろしくお願いいたします。

 
投稿済 : 28/07/2022 4:13 pm
しらこ
(@96ssbike)
投稿: 513
メンバー
 

@es さん、ご返信いただきまして、ありがとうございます。こちらこそ、今後ともよろしくお願いいたします。

関連話題として、

<style id='swell_custom-inline-css' type='text/css'>~</style>

のことが出ましたので、念のため検証の上回答してみました。その他にも色々と出力されるソースコードを詳細に追っていくと、色々と把握できそうです。


@anya さん、ソースコードのご共有ありがとうございます。
過去の質問者さんの場合でも、以下の2択で今回のように閉じタグがないことによる影響で、サイト全体のデザインに影響を及ぼしてしまうことがありました。

1. エディター操作をして記事を作成した(以下のカスタムHTMLは作成していない)上で、何らかの原因で閉じタグが欠落してしまった
↑今回はこれに該当すると思います。原因はWordPress側にあるのか、SWELL側にあるのかはわかりません。また、どのように操作していったらこのような事象が発生するのかがわからないため、こちらでも再現がなかなか難しいです。ちなみに、過去に私がこのようなことになったことはありません。

2. カスタムHTMLブロックで、独自のHTMLコードを入力した上で、閉じタグを入れ忘れてしまった(コピペ不足等による)

1, 2ともに過去の質疑応答で、似たような事象が発生していたのは回答したことがあります(いずれも特定部分を削除して再作成(正しく入力し直すこと)で解決)。


@skillsharejp さん、フォローアップありがとうございます。

SWELLカスタマイズ向けの非公式サイトを作りました。何か見つかるかも?→ https://tecchan.jp/swell-tips/
上記以外のWordPress全般向けのナレッジはこちら→ https://tecchan.jp/
疲れたら癒やされてくださいにゃーん (ΦωΦ)

 
投稿済 : 28/07/2022 8:20 pm
anya, skillsharejp, weiser and 1 people reacted
anya
 anya
(@anya)
投稿: 7
メンバー
Topic starter
 
投稿者:: @96ssbike

@anya さん、ソースコードのご共有ありがとうございます。
過去の質問者さんの場合でも、以下の2択で今回のように閉じタグがないことによる影響で、サイト全体のデザインに影響を及ぼしてしまうことがありました。

1. エディター操作をして記事を作成した(以下のカスタムHTMLは作成していない)上で、何らかの原因で閉じタグが欠落してしまった
↑今回はこれに該当すると思います。原因はWordPress側にあるのか、SWELL側にあるのかはわかりません。また、どのように操作していったらこのような事象が発生するのかがわからないため、こちらでも再現がなかなか難しいです。ちなみに、過去に私がこのようなことになったことはありません。

しらこさん、ありがとうございます。

今回上記が原因かと思われます。

おそらくテキストでの色変更、&nbsp;(空白)などを入れた場合、どこかのタイミングで欠落するのだと思われます。

クラシックエディタの時、ソースコードでtarget=“_blank”といったものを追加すると文字化け状態になることが多々あったので、それと同様のようなことかもと思いました。

今後ともわからないことがありましたら、よろしくお願いいたします。

 
投稿済 : 30/07/2022 11:06 am
しらこ reacted
共有: