ckeditorの使い方 - kaiplus.com · ckeditorの使い方 (1) 画像の挿入...
Post on 30-Aug-2019
4 Views
Preview:
TRANSCRIPT
レスポンシブ 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 の、2つを適用する場合は、半角スペースを空けます。
表に、「no_border」を設定すると、下図のように編集画面上でも枠線が見えなくなります。
編集しづらい場合は、表のプロパティで、枠線の幅を 0 に設定します。結果、下図のように枠線が点線で表示されるようになります。
表に「no_border」を設定した場合、「表のプロパティ」の「枠線の幅」の数値に関係なく、サイト上で枠線は表示されません。
top related