• 解決済 WP_manabu

    (@wp_manabu)


    Tiny MCE Advancedでテーブルを作成した場合、ビジュアルエディタでは、テーブルのレイアウトが大きく崩れてしまいます(実際に作成したウェッブサイトは、ちゃんと表示されます)。作業の際に、やや不自由だなので改善したいと思っています。対処を方法がありましたら、アドバイスくださいませ。

    ビジュアルエディタでは、以下のように表示されます。
    https://github.com/okahijiki/forQuestion/blob/master/table.png

    実際のウェッブサイトは、こちらになります。
    https://tsurumaki-office.com/sukino_hataraki/

    ワードプレスのバージョン:WordPress 5.1.3

    • このトピックはWP_manabuが5年、 3ヶ月前に変更しました。
11件の返信を表示中 - 1 - 11件目 (全11件中)
  • CG

    (@du-bist-der-lenz)

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

    クラシックエディターでしょうか?クラシックエディターで、独自に追加したスタイルの場合は、同じスタイルを editor-style.css に追加する必要があります。
    下記ページなどが参考になると思います。
    https://unofficialtokyo.com/2018/01/twenty-seventeen-customization/

    トピック投稿者 WP_manabu

    (@wp_manabu)

    アドバイス、ありがとうございます。

    おっしゃるとおり、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;
    	}
    }
    トピック投稿者 WP_manabu

    (@wp_manabu)

    失礼しました。書き忘れていました。wordpressの作業はパソコンでやっております。

    教えていただいたパスを作り…スタイルシートのメディアクエリの指定を除き…以下のようにしたところ、確かにビジュアルエディターの表示に変化がみられました。プロパティ値がblockなので、げんざいテーブルがタテ一列に表示されている状況でありますー。

    .top-page-table {
    display: block;
    }

    トピック投稿者 WP_manabu

    (@wp_manabu)

    .top-page-table {
    display: none;
    }

    にしたら、今度はテーブルが消えてしまいました。汗)

    本件と、だんだん外れてきてしまい、お手数をおかけします。(パソコンで見たテーブルのレイアウトと同様にするばあいの)プロパティ&値について…ご教示いただけると助かりますー。

    style.css に追記した内容と同じスタイルを editor-style.css に追記してみてください。
    ※ entry-content クラスなど編集画面では存在しないので多少の変更はあるかもしれません。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    スマホの表示をレスポンシブにするためのスタイルシートは、たしかにstyle.cssに書き込んでいますが、
    パソコン表示用には、とくにstyle.cssに、書き込んでいないのです。

    当ページのテキストエディタの、写真を挿入したテーブルのセルには、
    <td class="top-page-table" style="border: 1px solid; padding: 18px;">
    が、
    文字を入れたセルには、
    <td class="top-page-table" style="border: 1px solid;">
    というふうにスタイルシートされていますが…このへんでしょうか…ちょっと、混乱しております。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    ishitakaさま

    お手数を、おかけしております。
    なんか、いい感じです。あとは自力でやってみます。できたらご報告しますね。

    CGさま

    おっしゃる通り。テーマの対応次第、のようです。ご回答、ありがとうございます。

    トピック投稿者 WP_manabu

    (@wp_manabu)

    おかげさまで、

    table {
            table-layout: fixed;
           }

    にて、少なくともレイアウトの崩れはなくなりました。
    あとはセルの巾が小さかったりしますが、こちらの調整は、今後の宿題とさせてくだいませー。

    CG

    (@du-bist-der-lenz)

    クラシックエディターの使い方は知らないので回答できるものはありません。役立たずです。
    グーテンベルクのテーブルブロックで、複数のスタイルを登録しておいて必要に応じています。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「テーブルのレイアウトが崩れてしまう(Tiny MCE Advanced)」には新たに返信することはできません。