Blog

エディタテンプレートを使ってみました

Burger Editorの代替になるかな?

Burger Editorはレイアウト機能が強力で便利

 現在はbaserCMS5.1系にバージョンアップするために削除しましたが,標準エディタと比べるとさまざまなレイアウトパターンが設定できるので,とっても便利でした。

5.1系で動作するようになればまた使いたいプラグインです。

標準エディタで同じようなことがしたい

 どうにかならないかと管理画面を調べているとエディタテンプレートなる項目を発見しました。当サイトを構成しているbaserCMSではなぜかデフォルトのテンプレートが表示されていませんでしたので,ローカルお試しサイトにインストールしたbaserCMSからデータを手動でコピーしました。

使ってみたけどレイアウトに反映されない

 早速テストをしてみましたが,レイアウトが反映されません。テンプレートに使われているクラスが定義されていないのではないかと考えて,ユーザーズフォーラムの過去ログからサイト内のCSSファイルを探して/vendor/baserproject/bc-admin-third/webroot/css/admin/ckeditorフォルダ内のcontents.cssにあることを突き止めました。

レイアウトに反映されました

 上記のファイルを(テーマフォルダ)/webroot/cssフォルダにコピーして,(テーマフォルダ)/templates/layout/default.phpで読み込むように設定したところ,レイアウトに反映されました。

気になったところはCSSファイルがbaserCMS2.0.0の頃に作成された古いファイルのようで,レスポンシブ対応ができていないっぽいことです。ウインドウの横幅を変えたときに画像の大きさが変わらないので,この辺の対応をしないといけないようです。

00027-1058837148.png

使えることがわかってよかった

 CSSファイルに以下のコードを追加してレスポンシブ対応にしてみました。ウインドウの横幅を小さくすると画像が小さくなりました。(画像にキャプションを入れるとうまくいきませんが…)
テストするときはブラウザのキャッシュを削除しないと反映されないので注意しないといけないです。(これでちょっとはまりました)

@media screen and (max-width: 768px) {
    .template-image-float-left .image {
        float:left;
        padding:2%;
        margin: auto;
        width:50%;
    }
}

これで標準エディタでもBurger Editorのようにさまざまなレイアウトを定義して使うことができそうです。

Stable Diffusionで生成したサンプル画像を掲載することが多いので,画像横2枚とか画像横3枚のテンプレートを作成したいと考えています。

この記事へのコメント

コメントはまだありません。

コメントを送る

必須
必須  
※ メールアドレスは公開されません
任意
必須
Loading...  画像の文字を入力してください
1
2
3
4
5
6
7
8