スタッフブログ Staff Blog

PowerCMS 5の管理画面のみにスタイルを適用したい

現在当社にて開発をお手伝いしているPowerCMS / Movable Type向けのモバイルアプリ作成アドオン「Apliko」をPowerCMS 5(2018年4月2日リリース予定)に対応させる作業を実施しております。PowerCMS 5の新機能に「新しい管理画面デザイン」が含まれることから、作業の過程でPowerCMS 5の管理画面のみにスタイルを適用したい(PowerCMS 4 / Movable Type 6の管理画面には適用しない)というケースが発生しました。

レアケースかもしれませんが具体的例を挙げますと、アドオンで追加している管理画面に含まれるinput type=colorのテイストをinput type=textに合わせたいというものです。

Movable Type 6でエラーを発生させることなくPowerCMS 5を判別する方法を検討したのですが(つまりMTPowerCMSVersionは利用できない)、管理画面のテンプレートに以下のコードを追加して対応することとしました。これによりPowerCMS 5の場合はbodyにclass属性値pack-powercms5が付与され、PowerCMS 5のみに適用されるスタイルを容易に記述できるようになります。

<mt:If name="powercms_version" ge="5"><$mt:SetVar name="screen_class" value=" pack-powercms5" append="1"$></mt:If>

なお、変数powercms_versionはPowerCMS 5から設定されているようです。PowerCMS 4.33では変数powercms_versionは設定されていませんでしたが、仮にpowercms_version => 4.33が設定された場合でも上記コードは意図した動作になりました。

CSSの記述例は以下の通りです。

.color {
    width: 100%;
    max-width: 100px;
    border: 1px solid #a9a9a9;
    border-top-color: #323232;
    border-radius: 2px;
    background-color: #fff;
}

.pack-powercms5 .color {
    border: 1px solid #666;
    border-radius: 0;
    height: 1.875rem;
}

スタイル調整例

キャプチャ画像内の上部にあるテキスト入力フィールドと下部にある色選択フィールドを見比べて下さい。

スタイル調整前
画面キャプチャ: スタイル調整前のinput要素のcolorの表示例
スタイル調整後
画面キャプチャ: スタイル調整後のinput要素のcolorの表示例

※本稿は2018年3月15日より提供されております「PowerCMS 5 ベータ2」を基に執筆しております。

お問い合わせ Contact

制作のご依頼、ご相談などは下記のフォームからご連絡ください。