WordPress（ワードプレス）「ブロックエディタ」テーブルを横スクロールさせる方法

「テーブル」のスクロールの有無の違い

パソコンなど、横長の表でも見れる端末の場合は、不便に感じることはありませんが
以下の表は現在「スクロールなし」で表示しているので、スマホなどでご覧の場合は
文字が変な部分で折り返されていると思います

会社名 プラン名	３か月契約 月額料金	36か月契約 月額料金	ディスク容量	自動バックアップ	お試し期間
エックスサーバー スタンダード	1320円	990円	300GB	あり	10日間
さくらのレンタルサーバ スタンダード	1572円 （１か月524円）	425円	300GB	あり	14日間
ロリポップ！ ハイスピード	1320円	550円	400GB	別途有料	10日間

こちらは同じ表ですが「横スクロールあり」にしているので、スクロールして見られるようになっていると思います

会社名 プラン名	３か月契約 月額料金	36か月契約 月額料金	ディスク容量	自動バックアップ	お試し期間
エックスサーバー スタンダード	1320円	990円	300GB	あり	10日間
さくらのレンタルサーバ スタンダード	1572円 （１か月524円）	425円	300GB	あり	14日間
ロリポップ！ ハイスピード	1320円	550円	400GB	別途有料	10日間

この設定方法をご説明いたします

「テーブル」の「横スクロール」を設定する方法

ここでは「CSS」という部分を変更します
間違って変更してしまうと元に戻すのが大変なため、
先にバックアップを取得してから作業することをオススメいたします

・WordPress管理画面の「外観」→「テーマファイルエディタ」をクリック

・以下の画面が表示されます。　了承する場合は「理解しました」をクリックしてください

・以下のような画面が表示されます

ここでは「CSS」という部分を変更します
間違って変更してしまうと元に戻すのが大変なため、
先にバックアップを取得してから作業することをオススメいたします

・以下のコードをコピーし、赤枠の部分に張り付け、「ファイルを更新」をクリック

＜コード＞

/* 表の内容を折り返さず１行で表示 */
.scroll-table {
white-space: nowrap;
}

＜貼り付け場所＞

・投稿編集画面の「テーブル」を選択し、右側に表示される「高度な設定」をクリック

・「追加CSSクラス」に「scroll-table」と入力し、投稿を「公開」すると、スクロールされるようになります

ロリポップのお得なキャンペーンをチェック

「ホームページ制作初心者の私が、自分のサイトを見本にして簡単に作り方を教えるサイト」
ホームページ「おとなの愛用品・定番品」作成手順一覧はこちら↓

ホームページ制作

ホームページ制作初心者の私が、自分のサイトを見本にして簡単に作り方を教えるサイト　このページは「ホームページ制作」について記載しています Cocoon（コクーン）grayish（グレイッシュ）lolipop!（ロリポップ）使用

homepage.relaxmania.net

2024.09.04