Jimdo（以下ジンドゥークリエイター）は、CSSやJavaScriptを使ってデザインのカスタマイズができます。そんなカスタマイズを行っているとき、ブラウザで見ると意図したデザインになっているのに、編集画面だとコンテンツパネルにアクセスしにくくなって、場合によっては内容の変更ができないといったことがあります。
これは、編集画面のコンテンツ追加時のパネル類もCSSで定義されているため、カスタマイズのスタイルを定義するとそれが影響してパネル類へのアクセスが難しくなるからです。
そんなカスタマイズ時に起こる、編集時の問題を一発で解決する方法があるので紹介します。前回に続き今回の内容も初心者向けではなく、上級者向けのテクニックとなるため、CSSに精通していない人はちょっとわかりにくい内容となっていますことご承知おきください。
特定のエリアを横抜きしたデザインにするには？
まずは、サンプルから。
レイアウトはRomeで作ってみたサンプルサイトですが、画面中央の背景がブルーのエリア。ジンドゥークリエイターでは、標準的な使い方だとこのような表現はできません。そこで、ヘッダー編集機能を使ってCSSでカスタマイズを行います。
この横抜きの表現はいくつか方法がありますが、手っ取り早く実装するのであれば、ネガティブマージンを活用することで可能となるため、横に抜きたい要素に対してスタイルを定義する必要があります。次のコードは、背景色が適用されているカラム部分のコードです。
ブルーでマーキングされている部分が、カラム開始を表すコードになります。class属性で「j-hgrid」があるので、それも目印になります。分割されたカラム自体は、その下からのコードでclass属性「cc-m-hgrid-column」となっているところが、それぞれのカラムをあらわしていて、この配下に画像やテキストなどのコンテンツが入ります。
横抜きの背景を実現するためには、このカラムを構成している親要素であるj-hgridに対してスタイルを定義するのが最も簡単な方法です。
/*背景横抜き*/
#cc-m-10576728570 {
padding-right: 100% !important;
padding-left: 100% !important;
margin-right: -100%;
margin-left: -100%;
background: #00aaff;
}ポイントは、j-hgridに対してではなく、ID属性に対して適用している点です。j-hgridに適用すると、カラムコンテンツすべてに適用されるので、ID属性に対して適用することで、その場所だけを指定することが可能になります。ここでは、ID属性でセレクタを作る例を紹介しますが、汎用性を求める場合は書き方が異なります。それについては、以下を参照いただけると嬉しいです。
話を続けます。横抜きを行うためのコードは、padding-left、padding-right、margin-left、margin-rightになります。ここにさらに、背景色や背景画像を追加することで、横抜きのデザインになります。
ここまでは、目的の要素を特定するだけで簡単に実装できるので良いのですが1点問題がでてきます。
これは編集画面で該当するカラムをクリックしたものになります。カラム本体のコントロールができなくなってしまいます。もちろん、カラムの中身に関しては全く問題なく使えるのですが、カラム本体の上下移動のボタンやカラムの幅を変えたときなどに押す「保存」ボタンが使えなくなってしまうのです。そのため、カラムのパネルを使えるようにする必要があります。
どうすれば良いのかを考えるとき、大事なのはジンドゥーの操作性は残しておくことを優先し、カスタマイズによる編集画面とブラウザ画面の見た目の多少の差異は許容するという点だと思っています。そこでオススメするのが、あるコードを先ほど紹介したスタイルに追加して、そのコード専用のスタイルを作ることです。
カスタマイズの救世主？cc-m-allをマスターせよ
これは、編集画面では横抜きが適用されないようにしたコードを追加したものです。このコードを使うと、編集画面では横抜きは行われず、ブラウザ画面でのみ横抜きのデザインが反映されます。
/*編集画面用*/
#cc-m-10576728570.cc-m-all {
padding-right: 0 !important;
padding-left: 0 !important;
margin: 0;
}実際には、次のように記述しています。
/*ブラウザ用背景横抜き*/
#cc-m-10576728570 {
padding-right: 100% !important;
padding-left: 100% !important;
margin: 0 -100%;
background: #00aaff;
}
/*編集画面用*/
#cc-m-10576728570.cc-m-all {
padding-right: 0 !important;
padding-left: 0 !important;
margin: 0;
}ブラウザ表示用と編集画面用で最初に異なっているのが、セレクタ名です。ブラウザ用が「#cc-m-10576728570」になっているのに対して、編集画面用は「#cc-m-10576728570.cc-m-all」となっているところです。
実は、ジンドゥークリエイターの編集画面では、ほとんどの要素に対して「cc-m-all」というクラス属性が適用されています。これは、編集モードの時に出てくる値でブラウザでの表示時には出てこない属性です。
つまり、cc-m-allが適用されている要素ではブラウザ表示用に指定したスタイルを打ち消すようにしてあげることで、編集画面での表示の崩れやパネルへのアクセスができなことを回避することができるようになると言うことです。
このコードでは、
「ブラウザ用にID属性値「cc-m-10576728570」を持つDIV要素の左右の余白を100%にして左右のマージンを-100%にし、背景色を水色にするように指定しつつ、編集画面の時はID属性値「cc-m-10576728570」を持ち、かつclass属性値「.cc-m-all」を持っているDIV要素の左右の余白を0、マージンも0にしてください」
という意味になります。こうすることで、ブラウザ表示では横抜きのデザインが反映され、編集画面では横抜きのデザインは反映されないもののカラムのコントロールが可能になります。
この方法は、今回の例のような横抜きのデザインにするときだけでなく、要素の位置を相対位置に変更し上下左右に配置したときや、CSSで強制的に要素の幅や高さを変えたときに編集画面でコンテンツが選択できなくなったり、内容の変更が難しくなるといった場合のスタイルにも適用することで、編集画面での操作上の不具合を回避することができます。
さて、この編集時の不具合解消コードはどのタイミングで記載するのか？ですが、これはデザイン適用が完了した後に編集画面を見ながらコードを追加することだと思っています。デザインのカスタマイズと編集画面用のコードを同時に記載しながらの作業は、非常に時間がかかります。
なので、まずはカスタマイズを優先的に行った後、実際に編集画面でコンテンツを投入する際に不都合が出てきたセレクタのみを追加していくほうが、カスタマイズ作業を中断されることなく作業ができるかと思います。
今回ご紹介した方法が、ジンドゥークリエイターのカスタマイズで、編集画面で不具合が起こったときの参考になれば幸いです。
それでは！
ジンドゥークリエイターのカスタマイズ本書きました！
