CG
(@du-bist-der-lenz)
テーマが対応されていれば、実際にウェブサイトに表示されるとおりに、作成画面でも操作できるでしょう。

クラシックエディターでしょうか?クラシックエディターで、独自に追加したスタイルの場合は、同じスタイルを editor-style.css に追加する必要があります。
下記ページなどが参考になると思います。
https://unofficialtokyo.com/2018/01/twenty-seventeen-customization/
アドバイス、ありがとうございます。
おっしゃるとおり、classic editorを使用しております。
Tiny MCE Advancedでは、デフォルトから「設定」にて、
利用したい任意の「ボタン」を「tool bar」にドラック&ドロップする仕様になっています。
(もう忘れてしまいましたが)テーブルの「ボタン」を追加したかも知れません。
「独自に追加するスタイル」とは、そのことを指していたりしますか?
もし、そうだと仮定して、貼っていただいたウェッブサイトを参考に、
(意味が分からないまま、当てずっぽうで)子テーマのfunction.phpに、
add_editor_style(‘editor-style.css’);
を記述してみました。
がしかし、改善しないままです。汗
add_editor_styleの引数が、違ってますかね。
子テーマに下記ファイルを作成してみてください。
子テーマ/assets/css/editor-style.css
@media (max-width: 650px) {
.top-page-table {
display: block;
}
}
失礼しました。書き忘れていました。wordpressの作業はパソコンでやっております。
教えていただいたパスを作り…スタイルシートのメディアクエリの指定を除き…以下のようにしたところ、確かにビジュアルエディターの表示に変化がみられました。プロパティ値がblockなので、げんざいテーブルがタテ一列に表示されている状況でありますー。
.top-page-table {
display: block;
}
.top-page-table {
display: none;
}
にしたら、今度はテーブルが消えてしまいました。汗)
本件と、だんだん外れてきてしまい、お手数をおかけします。(パソコンで見たテーブルのレイアウトと同様にするばあいの)プロパティ&値について…ご教示いただけると助かりますー。
style.css に追記した内容と同じスタイルを editor-style.css に追記してみてください。
※ entry-content クラスなど編集画面では存在しないので多少の変更はあるかもしれません。
スマホの表示をレスポンシブにするためのスタイルシートは、たしかにstyle.cssに書き込んでいますが、
パソコン表示用には、とくにstyle.cssに、書き込んでいないのです。
当ページのテキストエディタの、写真を挿入したテーブルのセルには、
<td class="top-page-table" style="border: 1px solid; padding: 18px;">
が、
文字を入れたセルには、
<td class="top-page-table" style="border: 1px solid;">
というふうにスタイルシートされていますが…このへんでしょうか…ちょっと、混乱しております。
ishitakaさま
お手数を、おかけしております。
なんか、いい感じです。あとは自力でやってみます。できたらご報告しますね。
CGさま
おっしゃる通り。テーマの対応次第、のようです。ご回答、ありがとうございます。
おかげさまで、
table {
table-layout: fixed;
}
にて、少なくともレイアウトの崩れはなくなりました。
あとはセルの巾が小さかったりしますが、こちらの調整は、今後の宿題とさせてくだいませー。
CG
(@du-bist-der-lenz)
クラシックエディターの使い方は知らないので回答できるものはありません。役立たずです。
グーテンベルクのテーブルブロックで、複数のスタイルを登録しておいて必要に応じています。
