CKEditor の拡張画像プラグインで挿入される class 属性値をカスタマイズする
concrete5 8.x で採用されている CKEditor には、拡張画像プラグインが同梱されており、管理画面の「記事ブロックエディター設定」から有効にできます。デフォルトの画像ボタンと異なり、画像にキャプションをつけることができるほか、画像に左・中央・右の寄せを設定できます。この行揃えの設定結果が、class 属性値として挿入されます。
- 左寄せの場合： .content-editor-image-left
- 中央寄せの場合：.content-editor-image-center
- 右寄せの場合：.content-editor-image-right
この class 名に合わせて CSS を作成しても良いですが、作成済の CSS に合わせたい場合、この class 属性値を変更することができます。
設定は、application/config/site.php に記載します。
<?php
return [
'sites' => [
'default' => [
'editor' => [
'ckeditor4' => [
'custom_config_options' => [
// キャプションをつけたときに figure 要素につく class
'image2_captionedClass' => 'img-caption',
// 行揃えを選択したときにつく class
'image2_alignClasses' => [
'img-left',
'img-center',
'img-right',
],
],
],
],
],
],
];
参考までに、カスタマイズ前の状態で、どの要素に class が付与されるかのサンプルを以下に示します。
<h1>拡張画像プラグインによる画像の挿入例</h1>
<p>行揃え：なし</p>
<p>
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" height="397" width="592"></picture>
</p>
<p>行揃え：左</p>
<p>
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" class="content-editor-image-left" height="397"
width="592"></picture>
</p>
<p>行揃え：中央</p>
<p class="content-editor-image-center">
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" height="397" width="592"></picture>
</p>
<p>行揃え：右</p>
<p>
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" class="content-editor-image-right" height="397"
width="592"></picture>
</p>
<p>行揃え：なし</p>
<figure class="content-editor-image-captioned">
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" height="397" width="592"></picture>
<figcaption>キャプション</figcaption>
</figure>
<p>行揃え：左</p>
<figure class="content-editor-image-captioned content-editor-image-left">
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" height="397" width="592"></picture>
<figcaption>キャプション</figcaption>
</figure>
<p>行揃え：中央</p>
<div class="content-editor-image-center">
<figure class="content-editor-image-captioned">
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png"
media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png"
media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img
src="http://concrete5.test/application/files/4115/4398/3254/blank.png" alt="blank.png" height="397"
width="592"></picture>
<figcaption>キャプション</figcaption>
</figure>
</div>
<p>行揃え：右</p>
<figure class="content-editor-image-captioned content-editor-image-right">
<picture><!--[if IE 9]>
<video style='display: none;'><![endif]-->
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 900px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png" media="(min-width: 768px)">
<source srcset="http://concrete5.test/application/files/4115/4398/3254/blank.png">
<!--[if IE 9]></video><![endif]--><img src="http://concrete5.test/application/files/4115/4398/3254/blank.png"
alt="blank.png" height="397" width="592"></picture>
<figcaption>キャプション</figcaption>
</figure>