a-blog cms のテーブルユニットに画像を挿入する

Published

a-blog cms のテーブルユニットに採用されているa-table.jsでは、実は画像が挿入できません。テキストユニットなら、「メディアを挿入」を選んで画像を文中に挿入できるのですが、テーブルユニットでは現在のところ対応していません。

この記事ではそのカスタマイズの方法をご紹介します。

カスタマイズ方法

作業するファイルは、/private/const/pc.php のみです。

この機能は、もともとはガラケーで絵文字を表示するための機能で、ファイルを開くとすでにたくさんソースコードが書かれていることがわかります。

最後の行に以下のようにコードを追加してください。

'_K_' => '<img src=\'/themes/xxx/assets/images/icon_kappa.png\' width=\'200\' height=\'200\' alt=\'かっぱ\' class=\'acms-inline\' />',

このように書くことで、「_K_」とユニット内に記述すると/themes/xxx/images/common/icon_kappa.pngの画像に置き替わります。


テーブルユニットに_K_と書いてみた

保存前のテーブルユニットのインターフェース

保存後、テーブルユニットの入力インターフェース内では「_K_」の文字がなくなりかっぱの画像に置き換わった

保存後のテーブルユニットのインターフェース


表示画面でも「_K_」の文字の代わりにかっぱの画像が表示された

表示結果


ユニット内だけではなく、ソースコード上の「_K_」もかっぱの画像に置き換えてしまうので、「_」を実態参照「_」で書きましょう。


[スクリーンショット]bodyの閉じタグの前に書いた

HTMLファイルに「_K_」と書いてみた

[スクリーンショット]フッター

フッターにかっぱの画像が表示されてしまった


代替機能としてのアイデア


テーブルユニットでは一部だけフォントの色を書き換えることができません。例えば、※印を赤色にしたい場合には代わりの方法として、赤い米印の画像に置き換えることによって解決しました。


「きゅうり※」と書かれた文字の内、「※」だけ赤色に変換されている。テーブルだけじゃなく、本文でも使用できる。

※印だけ赤文字になっている例


ソースコード

'_※_' => '<img src=\'/themes/**/assets/images/icon_notice.png\' width=\'10\' height=\'10\' alt=\'注意事項\' class=\'acms-inline\' />',

入力インターフェースには米印の部分には「_※_」と書かれている

実際の入力画面

関連している記事

著者について

森田 かすみ

有限会社アップルップル所属。マークアップエンジニア→インハウスデザイナーの経歴を経て、今はUI/UX/サービスデザインを勉強中。呼ばれれば登壇もします。Frontend Nagoya主催。ストレス発散方法はかっぱのイラストを描くこと。