Q&A
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
###前提・実現したいこと
Wordpressで「ビジュアル」から編集して投稿を行っております。
様々な装飾を行うために、「TinyMCE Advanced」をいうプラグインを使ってビジュアルエディターのツール機能を追加して使っているのですが、
時折文字の装飾をし直したり、一度大きさの変更をした文字のサイズ変更をし直すと、
サイズ指定が反映されなくなったり、フォント指定が反映されなくなったりてしまうことがあります。
例えば下記のようにソースにはフォントサイズなどの指定が反映されているのに、
表示では反映されてないことが起きてしまいます。
どういったことが原因で起きてしまうのでしょうか？
又、どのような対策をすれば良いのでしょうか？
原因だけでもご回答いただけますと、幸いです。
よろしくお願い致します。
###発生している問題・エラーメッセージ
エラーメッセージ：なし
###該当のソースコード
<span style="font-family: 'comic sans ms', sans-serif; font-size: 36px;"><del><strong><span style="color: #0000ff;">こちらはテストです。test</span></strong></del></span>
###試したこと
ビジュアルエディターでツールを使ってフォント指定のし直し、サイズ指定のし直し、太字指定など。
###補足情報(言語/FW/ツール等のバージョンなど)
Wordpressバージョン：WordPress 4.9.2
使用プラグイン
TinyMCE Advanced：バージョン 4.5.6
他使用プラグイン
Disable Google Fonts：バージョン 1.3
All In One SEO Pack：バージョン 2.3.9.2
All In One WP Security：バージョン 4.1.4
All-in-One WP Migration：バージョン 6.61
Count Per Day：バージョン 3.5.6
Google XML Sitemaps：バージョン 4.0.8
WP-PageNavi：バージョン 2.91
回答1件
0
ベストアンサー
考えられるのは、テーマのCSSで例えば
CSS
1span { 2 font-size: 16px; 3}
のように指定されていると、該当のソースコードでは
HTML
1<span style="font-family: 'comic sans ms', sans-serif; font-size: 36px;"> 2 <del> 3 <strong><!-- ここまではfont-size: 36px;--> 4 <span style="color: #0000ff;"><!-- ここからはspan { font-size: 16px; }が適用される--> 5 こちらはテストです。test 6 </span> 7 </strong> 8 </del> 9</span>
という風にspanが入れ子になることで上書きされているのではないでしょうか
投稿2018/01/18 04:15
退会済みユーザー
総合スコア0
ご回答ありがとうございます。
spanの上書きが原因ということなので、
文字の装飾を一度「書式設定をクリア」して一つのspanに指定し直したら、
フォントサイズの指定が反映されました。
ありがとうございます。
度々失礼いたします。
spanの上書きを未然に防ぐためには、やはりフォント・フォントサイズ・色指定の変更やstrongの指定の変更を行わないしかないのでしょうか？
テーマ（もしくは自作CSS？）の設計が間違いです。このような事態を避けるため、要素セレクタに絶対値(px)を指定しないことです。相対値(%)が望ましいです。
もちろん、spanが入れ子にならないように注意するのも解決策の一つです。入れ子でなければインライン(style="...")に記述したCSSが優先されますので。
ありがとうございます。
ビジュアル画面から1箇所を何度も編集すると、1つのspanに追記する形でなく、
spanが追加されてしまうことがわかりました。（条件は<strong>や<em>タグの追加後に起きるみたいです。）
今後フォント指定が思うように行かない場合は
「書式設定をクリア」して、再度指定を行います。
htmlの知識がないクライアントが、ビジュアル画面からフォントの装飾がうまく行かないことについて相談を受けたので、検証してみたのですが自力では具体的な原因と解決策が見つからなかったため、ご回答いただき大変助かりました。ありがとうございました。
あなたの回答
tips
プレビュー
