a-blog cmsの画像の枠を制御する方法

2010年11月16日 CMS #ablogcms #カスタマイズ

実は a-blog cms のユニットには、属性(attr)という設定項目を追加する機能が隠されています。これを有効にすると、配置の横に属性というプルダウンが表示されるようになります。


private/config.system.yaml

410行目のあたりの#でコメントになっている部分を入れ替えて下さい。

column_image_attr	:
column_image_attr_label	:
# column_image_attr : [, '1']
# column_image_attr_label : [枠付き, 枠無し]

こうする事で、枠付きの時には何も編集されず、枠無しを選択すると 1 が {attr} 編集されるようになります。

themes/system/include/column.html

できれば、上記をコピーして利用されるテーマ上に置いて修正下さい。

<!-- 画像URL -->
<div class="column-eximage-{align}"><!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<img class="columnImage" src="{normal}" alt="{alt}" width="{x}" height="{y}" /><!-- BEGIN link#rear -->
	</a><!-- END link#rear --><!-- BEGIN caption:veil -->
	<p class="caption">{caption}</p><!-- END caption:veil -->
</div>
<!-- END column#eximage -->

の <img class="columnImage" src="... を <img class="columnImage{attr}" src="... と修正します。そうする事で、画像のclassを切り替える事ができるようになります。後は、今回の例では columnImage1 が無いので枠が無い事になりますが、枠があった時と同様で線だけ無いようにするとかCSSを書いてみてもいいかもしれません。

属性:attr の利用

今回は画像のユニットのカスタマイズという事でしたが、他のユニットについても同様の事が可能です。何かいいアイデアで便利なカスタマイズをしてみませんか。

著者写真
この記事を書いた人
山本 一道 / 有限会社アップルップル 代表

名古屋のWeb制作会社 (有)アップルップル代表。HTMLファーストな国産CMS「a-blog cms」開発・販売・サポート / 名古屋のWeb制作者コミュニティ「WCAN」主催 / コワーキングスペース「ベースキャンプ名古屋」運営。Web制作の現場をより良くするための活動をしています。

@kazumich

関連記事

この記事のハッシュタグ #ablogcms#カスタマイズ から関連する記事を表示しています。

a-blog cms と View Transitions API で作るページ遷移のアニメーションの実装について
a-blog cms と View Transitions API で作るページ遷移のアニメーションの実装について
a-blog cms のベンチマークモードの活用法
a-blog cms のベンチマークモードの活用法
定期開催のイベントサイトを作る際のブログ設定
定期開催のイベントサイトを作る際のブログ設定
PhotoCollage.js を a-blog cms のブログテーマに実装してみた
PhotoCollage.js を a-blog cms のブログテーマに実装してみた
エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ
エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ
a-blog cms のユーザーアイコンに Gravatar を反映するカスタマイズ
a-blog cms のユーザーアイコンに Gravatar を反映するカスタマイズ