レスポンシブ Web デザインに対応させるためのCKEditor の使い方

（1）　画像の挿入

画像の挿入時に（挿入後は右クリックメニューの画像のプロパティ）、

幅と高さは空欄にします。

サイト上の表示と、編集画面の表示がなるべく同じになるように、同じ内容のスタイルシートを適用しています。

サイト上の CSS■ html/user_data/packages/default/css/landing.css

CKEditor の CSS■ html/user_data/ckeditor4.4.0/ckeditor/contents.css

EC-CUBE では、rest.css が優先されて、設定が反映されない場合があります。caption の セ ン タ リ ン グ を 有 効 に す る た め に、rest.css のcaption, を削除してください。

■ html/user_data/packages/default/css/rest.css-----------------------------------table,caption,th,td { margin: 0; padding: 0; border: 0; border-collapse : collapse ; border-spacing: 0px; empty-cells: show; text-align: left; font-weight: normal;}-----------------------------------

（2）　表の作成

PC表示 スマホ表示

表の作成時に（挿入後は右クリックメニューの表のプロパティ）、

幅と高さは空欄にします。次に、高度な設定 ＞ スタイルシートクラス　に、

responsive と入力します。

管理画面

さらに、ここでは、最初の列にヘッダ（th）を適用しているので、CSS により、セルがグレーになっています。

必ずしもヘッダ（th）を設定する必要はありません。上記の例で、ヘッダを解除にするには、セル内の右クリックメニューで「セルのプロパティ」をクリックします。

「セルの種類」で「テーブルデータ（td）」を選択して「OK」ボタンをクリックします。結果、スマホでは下図のように表示されます。

（3）　表の枠線を表示しない

表の作成時に（挿入後は右クリックメニューの表のプロパティ）、高度な設定 ＞ スタイルシートクラス　に、

no_border と入力します。

結果、サイト上では下図のように表示されます。

表に対して、responsive とno_border の、２つを適用する場合は、半角スペースを空けます。

表に、「no_border」を設定すると、下図のように編集画面上でも枠線が見えなくなります。

編集しづらい場合は、表のプロパティで、枠線の幅を 0 に設定します。結果、下図のように枠線が点線で表示されるようになります。

表に「no_border」を設定した場合、「表のプロパティ」の「枠線の幅」の数値に関係なく、サイト上で枠線は表示されません。

（4）　表に画像を入れる

表の作成時に（挿入後は右クリックメニューの表のプロパティ）、

幅と高さは空欄にします。次に、高度な設定 ＞ スタイルシートクラス　に、

image と入力します。

こうすることで、表の幅の伸縮に合わせて、表に組み入れた画像も伸縮します。

画像には、幅と高さは設定しないようにしてください。

結果、サイト上では下図のように表示されます。

スマホ表示

PC表示