Jimdoでカスタムしたら、管理画面がおかしくなってしまった!

Jimdoでは、「管理画面」→「基本設定」→「ヘッダ編集」から、Javascriptを追加したりcssを追加し、わりと自由にカスタムを加えることができるのはよく知られているかと思います。

毎回、私も様々なJimdo案件で、カスタムを加えています。

ただ、たまにやっぱりあります。管理画面に影響してしまうことが……

今回、2カラムで組んだカラムで、flexレイアウトにして(カスタム)中身の#cc-matrix-* の部分を、align-items: stretch;に(カスタム)したくて事件は起きました!

管理画面で、他にも内包するdivがあり、横にぐちゃっと潰れてしまったのです。

あまりに崩れてしまうと、メンテナンス性が大変崩れますので、絶対に避けたいところです。

bodyのclassで、管理画面に無くて本番にあるものを探せ!

というわけで、body内のclass(多いですよね……)を取り出して、差分を調べてみました。

よく使う、オンライン差分ツール「diffchecker」を今回も使いました。

ありましたね!!これですこれ!

.cc-pagemode-default

これ、たったひとつだけが、管理画面に無くて、本番にあるbodyのclassになります。

というわけで、今回の案件では以下のように。

body.cc-pagemode-default #cc-m-○○○○○○○○○○○○ {
    display:flex;
    align-items: stretch;
}

これで、本番だけに、やりたいことが実装することができました。
めでたしめでたし。

ただ、管理画面と本番が完全に一緒にはなりませんので、お客様にきちんとご説明しましょう。


今回は、カラムをflexにして上下中央と高さをそろえたい用途でしたので違いは大きくはありませんでしたが、
あまりに違う場合は、他の方法をとるのも良いかもしれません。