【クリエイターモード】スマートフォンで表や画像が画面に収まりません。修正方法を教えてください。 – makeshop よくある質問

画像や表のソース（HTML）に

<img src="/folder/file.png" width="800">

や

<table width="800">

のように、スマートフォン端末の横幅よりも広い幅を指定するソースが記述されていると、画面の中に収まらずに切れて見えたり、横スクロールバーが発生してしまいます。
このような記述は削除し、幅はCSSで指定してください。

削除できない場合、はみ出さないように指定するCSSを追記して調節してください。

＜CSS例＞

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 全ページ共通「CSS」に記述

@media (max-width: 768px) {
  table,
  img{
      max-width:100%;
  }
}

◆会社概要の修正例

ショップデザイン / 機能・設定 / ショップ案内画面 / 会社概要の設定

または

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 会社概要「HTML」欄

に表（table）のHTMLを記述し保存してください。

＜HTML例＞

<table class="company-profile">
  <tr>
    <th>社名</th>
    <td>Sample Inc.（株式会社Sample）</td>
  </tr>
  <tr>
    <th>連絡先</th>
    <td>0120-0*-000*<br />TEL 03-000*-000*<br />FAX 03-000*-00*0 </td>
  </tr>
  <tr>
    <th>設立</th>
    <td>2025年10月</td>
  </tr>
  <tr>
    <th>代表取締役</th>
    <td>名句 太郎</td>
  </tr>
  <tr>
    <th>所在地</th>
    <td>〒150-78** 東京都***********</td>
  </tr>
  <tr>
    <th>アクセス</th>
    <td>JR渋谷駅　徒歩5分</td>
  </tr>
</table>

CSSは、
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 会社概要　「CSS」欄
に記述し保存してください。

＜CSS例＞

/* company-profile */
.company-profile tr {
  border-bottom: 1px solid #b5b1b1;
}

.company-profile th,
.company-profile td {
  padding: 8px 16px;
  border: none;
}

.company-profile th {
  width: 32%;
  background-color:#eee;
}
@media (max-width: 768px) {
    .company-profile {
      max-width:100%;
    }
}

＜関連記事＞
表（テーブル）の作り方を教えてください。

■makeshopサポート
【サイズ表などに最適】tableタグを使った表の作り方と、カスタマイズ方法
 スマホで表（tableタグ）に枠線が出ない時の対処方法

◆ご利用案内の修正例

<pre>～</pre>の影響でテキストが改行されない場合は、
ショップデザイン / 機能・設定 / ショップ案内画面 / 利用案内設定　の、項目ごとのソース入力欄から

<pre>

と

</pre>

タグを削除し、文章を改行させたい位置には

<br>

を記述し保存してください。

<pre>タグを残したまま、幅に合わせて改行させたい場合は、

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 会社概要
「CSS」欄に以下を追記（コピー＆ペースト）し、保存してください。

@media screen and (max-width: 768px) { 
  pre{
    white-space: pre-wrap ;
  }
}

テーブルが画面に収まらない場合は

ショップデザイン / 機能・設定 / ショップ案内画面 / 利用案内設定

または

ショップデザイン / テンプレート選択・編集 / クリエイターモード / 利用案内「HTML」欄

に表（table）のHTMLを記述し保存してください。

CSSは、
ショップデザイン / テンプレート選択・編集 / クリエイターモード / 利用案内　「CSS」欄
に記述し保存してください。

■makeshopサポート
ベーシックモードからクリエイターモードに移行する方法！【2】レスポンシブにしよう