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

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 : という設定は他にもあります。アイデア次第で何らかの設定も可能です。


関連記事

この記事のハッシュタグ から関連する記事を表示しています。

PhotoCollage.js を a-blog cms のブログテーマに実装してみた

エントリー新規投稿画面で次のエントリーコードっぽいものを placeholder に表示させるカスタマイズ

a-blog cms のユーザーアイコンに Gravatar を反映するカスタマイズ

できるだけ簡単に子ブログにコンフィグセットを設定する方法を考える

コンフィグセットを利用していない時にコンフィグセット管理を表示させないカスタマイズを考えてみる

編集者権限でバナーモジュールをフロント側で編集できるような UI を使えるような実装を考える

最新記事

カテゴリー

アーカイブ

ハッシュタグ