こんにちわ、typelogさん
Editor style と 使用テーマの StyleSheet で調節するのがよいかと思います。
Editor style についてはこちらをご覧ください。
さっそくの回答ありがとうございます。
編集画面と実際の表示画面は別々なcssによって同じような表示にできることが分かりました。
ただし、以下の問題は使っているテーマの問題なのかどうか。当方、テーマのcssで解決するのが難しそうです。
編集画面では回り込みの文字列にpタグがあっても回り込んだままで問題ないですが、
実際の表示画面ではpタグがあると回り込みが解除されて画像の下になってしまいます。
一般にはpタグで回り込みは解除されないので変ですね。
ただし、以下の問題は使っているテーマの問題なのかどうか。当方、テーマのcssで解決するのが難しそうです。
editor-style.cssと、style.cssは、それぞれのテーマに依存する問題です。
テーマ制作者が、そういう部分を重要と考えているか、そうでないかという問題なので、テーマを他のものに切り替えて、良いものを選ぶのも一つの方法です。
今使われているテーマに愛着がある場合は、公式テーマの場合サポート用のフォーラムがありますから、そこで相談するといいと思います
返信ありがとうございます。
simple catchテーマを子テーマでカストマイズしたし、シンプルでよさそうなテーマなので止めきれないところがあるので、もう少し解決法を探ってみます。
これからもアドバイスがありましたらよろしくお願いします。
simple catchですか
解決できるかどうかわかりませんが、本文の入力サンプルをいただけますか？
http://ibin.co/1Z9VKi0B6Tk7
add functions.phpの最初の方に、
<?php
$content_width = 642;
function my_theme_add_editor_styles() {
add_editor_style( );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );
?>
editor-style.cssを追加していただいて、
html{
background:lightgray;
}
body#tinymce.wp-editor{
letter-spacing: 0.02em;
font-size:13px;
font-family: Arial, Helvetica, sans-serif;
width:642px;
border-right:1px dotted #ccc;
}
body#tinymce.wp-editor img {
margin:0 1em .5em 0;
border:1px solid #ccc;
padding:.5em;
}
後は微調整してください
申し訳ありません。
見当外れかもしれませんが、とりあえず問題のソースをお知らせします。
エディタのテキスト画面に出てるソースです。
このソースで、ビジュアル編集画面では全部の文字列が回り込んで表示されてます。
実際の投稿閲覧画面ではpタグなし文字列まで正常に回り込んで表示され、pタグ付き文字列は回り込み解除されて画像の下に表示さています。
一般的に言ってpタグによって回り込みが解除されないエディター画面の表示が正常のようです。
<p><img class=”alignleft size-medium wp-image-1771″ src=”http://localhost/home/my/wp-content/uploads/2014/09/V4010001-225×300.jpg” alt=”飼いねこ” width=”225″ height=”300″ />回り込みテスト
pタグなし文字列</p>
<p>pタグ付き文字列</p>
示していただいたソースはこれから試します。
回り込み文字列にpタグがあると実際の投稿閲覧画面で回り込みが解除される問題が残りました。
他の問題については、おかげさまでビジュアルエディタの表示と実際の閲覧画面の表示を一致させることができました。
ビジュアルエディタの表示上の問題はなさそうです。
スクリーンショットで確認していただける通り、こちらの環境では、フロートが解除されることはありませんでした。
なので、テーマやWordPressによって引き起こされる問題というよりは、チャイルドテーマのスタイルや、プラグインのスタイルの影響を受けているという風に考える方が自然だと思います。
追伸：
このテーマを使って表示テストを行う中で、テーマ由来のバグを二つほど見つけましたので、ご参考まで、
タイトルが空白の場合の、フォールバックリンクがセットされていないので、タイトルがない場合に、ループページから、シングルページへの移動ができなくなる。
（ デフォルトテーマは、投稿日にフォールバックリンクがセットされています ）
カテゴリ等を表示する 投稿直下の Class tagsがフロートをクリアしきれてなくて、
本文に、左寄せ画像を配置しただけの場合 tagsが画像の右に表示されます。
（いずれも公式テーマの審査要件ですが、もれてしまっているようです）
何度も申し訳ないです。
投稿のsingle表示や固定ページの表示ではpタグで回り込みが解除されることはなく異常なしです。
元々の投稿一覧表示が抜粋表示 the_excerpt() であったのを全文表示にするつもりで簡単に考えて the-content() にカストマイズしたところに問題があるようです。
抜粋表示ではpタグや画像が省かれるので問題は出なかったのが全文表示で気が付いた格好です。
テーマの問題ではなく、まずは content.php内のthe_excerpt()を単純にthe-content() に置き換えていいものかどうかになりました。
投稿のsingle表示や固定ページの表示では正常なので、他のチョコマカしたカストマイズは問題ないようです。でも何が何処に影響するか分からないとは考えています。
pタグのある文字列によってが回り込みが解除されている件です。
試しに投稿表示部の前の方にある post_class() を取り払ったところpタグのある文字列でも回り込みは解除されず、一見、the-content() での全文表示が正常になったように見えます。
これでビジュアルエディタの表示画面と実際の投稿表示画面が同じになりました。
post_class()に意味はあるはずなので、取り払った副作用はどこかにあるのかもしれませんが。
投稿のsingle表示や固定ページの表示はpost_class()があっても問題ないので、以上の件は当方にとっては難問です。
どんなことが起きているのか解明するためのヒントでもありましたらお願いします。
私の環境でthe_excerpt()からthe_content()に変更したスクリーンショットです
http://tenman.info/labo/snip/files/simple-catch.jpg
この画像は、simple catch が、コンテンツの表示を適切に行っていることを示しています。
では、なぜ、typelogさんの環境では post_class()を外すとよくなったりするのか
私的には、チャイルドテーマのスタイル、または、プラグインのスタイルの影響の疑いがますます濃厚になりました。
チャイルドテーマをお使いでしたら、
まずプラグインを全部停止して、親テーマを適用してみてください。
正常に動いたら、プラグインを有効にして、確認 正常なら、
子テーマの問題です
WordPress3.9.2をインストールし直し、データベースも作り直し、カスタマイズをしない状態で確認しても投稿一覧ではpタグで回り込みが解除されます。
もちろん、投稿シングルや固定ページの表示はpタグで回り込みが解除されずに異常なしです。
考えにくいですが、WordPressの外側の環境の違いも関係してるのかもしれません。
テーマでの投稿一覧の表示はthe_excerpt()なのでそれをthe-content()にカスタマイズすることにも微妙な無理があるのかもしれません。
はまり込んできたので、このへんでこの件は終わりにして、別なテーマを探すことにします。
ローカル環境のためスクリーンショットも示せず申し訳ありませんでした。
いろいろアドバイスありがとうございました。ずいぶん役立ちました。ありがとうございます。
お世話になっております。
この件にケリをつけたつもりでしたが、気になるところを少し調べたので結果を報告します。
テーマのstyle.cssに .post p の記述があって clear:both があったのでそれを none にすると投稿一覧で、pタグがある文字列でも回り込みが解除されずに一見、正常に表示されました。ただ、やみくもなことで、副作用が気になってこの方法では解決できないので clear:both に戻しました。
次に、管理の表示設定でフロントページの表示は「最新の投稿」にしてましたが、最新の投稿と続く投稿で表示が異なるのが偶然、見つかりました。(content.phpのpost-byクラスを無効にしてみた)
ピンと来るところがあって、今度は表示設定を固定ページにして、投稿一覧表示の固定ページを作り、投稿ページの表示にその固定ページを設定しました。これでpタグがあっても回り込みが解除されなくなりました。
利用のテーマに特有なことと考えられますが、既定の設定変更なら問題ないので、利用を前提にしばらく様子を見ることにします。
いろいろなアドバイスありがとうございました。
良いレポートをありがとうございます。
typelogさんの言いたいことを理解することが出来ました。
typelogさんの主張されている。フロートがクリアされる原因もはっきりし、結果を再現することもできるようになりました。
私と、typelogさんの結果の違いは、結論から書くと、カスタマイザーのスタティックフロントページの設定によるものでした。
私が、テスト用の simple catchをインストールする前の固定フロントページの環境設定が、固定ページが選択されて、テンプレートが選択されていない状態でした。
（この部分は、テーマをインストールした時にリセットされるものと理解していたのですが、テンプレートが選択されてなくてもリセットされることはないようです。固定ページ等がセットされていなければ、最新の投稿にリセットされるべきじゃないかと考えますが、、、）
この事により、bodyクラスに homeクラスがセットされていない状態になり、スタイルに記述されたルールが適用されないという事になり、たまたまこの状態が、フロートを解除しなかったため、私たちの答えは、平行線をたどりました。
そういう風に見ていくと、
いずれも公式テーマの審査要件ですが、もれてしまっているようです
と書きましたが、
.home .post p,
.archive .post p {
clear: both;
padding-bottom: 0;
}
このスタイルルールの意図は、一般的にはちょっと考えずらく
本文に、左寄せ画像を配置しただけの場合 tagsが画像の右に表示されます。
という問題は、レビュー中に検知されていて、この問題を解決するために追加されたと仮定すると、合点がいきます。
私は、スタイルのコンフリクトが起きているとばかり考えていましたが、
よく見ていくと、いろいろ勉強になります。
typelogさんは、コンフリクトするスタイルを書いていないという事を明確にしておきたいと思います。
ありがとうございました。
