a-blog cmsで写真のスタイルを調整する

2010年02月22日 CMS #ablogcms #カスタマイズ

a-blog cms で画像をアップすると、基本のCSSでは枠が付くようになっている。 しかし、枠が無い方がいい場合もサイトを作っているとあったりもする。そういう時には、どうするかについてを紹介する。



config.system.yaml を修正する


private/config.system.yaml に以下のような設定があります。

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

そこを以下のように修正しましょう。

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

テンプレートを修正する

通常であれば、themes/system/column.html , vicunaの時だけ themes/vicuna/include/unit.html の

<img class="columnImage" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" />

<img class="columnImage{attr}" src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" />

のように修正します。

あとは、columnImage1 , columnImage2 の CSS を書けばいいという事になります。 設定画面は以下のような感じで設定可能です。


今回は、画像のユニットのお話でしたが、column_????_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 を反映するカスタマイズ