選択されているタグ : ablogcms

タグを絞り込む : a-blog Ajax amazon ampps appleple AppStore ATND CMS CMSカフェ CPI CSS CSS3 CSSNite Dreamweaver epub facebook flickr Google highslide htaccess html5 iPad iphoe iPhone Jimdo jQuery Mac MAMP mycafe MySQL pdf php prettyPhoto Spreed TalkNote twitter Tシャツ Ustream Vicuna WCAF WCAN WebService windows wordpress xampp YouTube お菓子 アップデート カスタマイズ カスタムフィールド グッズ コンテスト ステッカー セミナー テーマ ベータ版 マニュアル モジュール 九州 事例 仙台 勉強会 南知多 合宿 名古屋 大阪 富山 岡山 師崎 広島 愛知 愛知県 札幌 東京 福岡 負荷軽減 金沢 雑誌 青森 静岡 高松

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


blog comments powered by Disqus

プロフィール

山本一道
  • Twitter
  • Facebook
  • Google+

有限会社アップルップル

山本 一道

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」も、よろしくお願いします。

エントリーリスト

タグ