CKEditor の使い方

レスポンシブ Web デザインに対応させるための
CKEditor の使い方
サイト上の表示と、編集画面の表示がなるべく同じになるよう
に、同じ内容のスタイルシートを適用しています。
サイト上の CSS
■ html/user_data/packages/default/css/landing.css
CKEditor の CSS
■ html/user_data/ckeditor4.4.0/ckeditor/contents.css
（1）　画像の挿入
画像の挿入時に（挿入後は右クリックメニューの画像のプロパ
ティ）、
幅と高さは空欄にします。
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）　表の作成
管理画面
表の作成時に（挿入後は右クリックメニューの表のプロパ
ティ）、
幅と高さは空欄にします。
次に、高度な設定＞スタイルシートクラス　に、
responsive と入力します。
さらに、ここでは、
最初の列にヘッダ（th）を適用しているので、
CSS により、セルがグレーになっています。
必ずしもヘッダ（th）を設定する必要はありません。
上記の例で、ヘッダを解除にするには、セル内の右クリックメ
ニューで「セルのプロパティ」をクリックします。
「セルの種類」で「テーブルデータ（td）
」を選択して「OK」ボ
タンをクリックします。
結果、スマホでは下図のように表示されます。
PC 表示
スマホ表示
（3）　表の枠線を表示しない
表の作成時に（挿入後は右クリックメニューの表のプロパ
ティ）、高度な設定＞スタイルシートクラス　に、
no_border と入力します。
結果、サイト上では下図のように表示されます。
表に対して、
responsive と
no_border の、
２つを適用する場合は、
半角スペースを空けます。
表に、「no_border」を設定すると、下図のように編集画面上
でも枠線が見えなくなります。
編集しづらい場合は、表のプロパティで、枠線の幅を 0 に設定
します。
結果、下図のように枠線が点線で表示されるようになります。
表に「no_border」を設定した場合、
「表のプロパティ」の「枠
線の幅」の数値に関係なく、サイト上で枠線は表示されません。
（4）　表に画像を入れる
表の作成時に（挿入後は右クリックメニューの表のプロパ
ティ）、
幅と高さは空欄にします。
次に、高度な設定＞スタイルシートクラス　に、
image と入力します。
こうすることで、表の幅の伸縮に合わせて、表に組み入れた画
像も伸縮します。
画像には、
幅と高さは設定しないようにしてください。
結果、サイト上では下図のように表示されます。
スマホ表示
PC 表示

Download Report