a-blog cms の画像ユニットのスタイルとマージンの調整を可能にしてみる

画像に枠をつける件については何度も書いてるのですが、テーマが変わってしまうと指定してあったスタイルも外れてしまっているのと、マージン調整も指定できるようにするのもいいなって思ったので書いてみることにしました。

画像のスタイルを指定できるようにする

private/config.system.yaml に以下のような指定を追加してみます。

column_image_attr : [, 'image-waku']
column_image_attr_label : [枠無し, 枠付き]

こうすることで、以下の画像のようにユニットグループの次に属性というプルダウンメニューが表示されるようになります。



system/include/unit.html をコピーして、自分のテーマに持ってきます。その後、以下の unit#image のブロックを修正し {attr} を class に追加します。

<!-- BEGIN unit#image -->
<!-- 画像 -->
<div class="column-image-{align}{display_size_class}"{display_size}[raw]><!-- BEGIN link#front -->
	<a href="{url}"{viewer}[raw]><!-- END link#front -->
		<img class="columnImage {attr}" src="%{HTTP_ROOT}{path}" 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 unit#image -->

最後に CSS につけたいスタイルを指定して終了です。

.image-waku {
	border: solid 10px #dddddd;
}

例えば、正方形画像を丸にするスタイルを用意しておくとか、写真を少し傾けたスタイルを用意したりとかイロイロな指定が考えられます。

また、画像ユニット以外も同様のカスタマイズが可能ですが、テキストユニットで若干うまくいかない事が見つかったので、公式で紹介するのは他のユニットでも自信を持って大丈夫って段階で書きたいと思っています。

マージンを設定できるようにする

この上の見出しにもつけてありますが、わかりますか?

そんなに難しい方法ではなく、ユニットグループを利用するだけです。管理ページ > カスタマイズ管理 > コンフィグ > エントリー編集設定 > ユニットグループ の設定に「上マージン100px」を追加します。



上記のユニットグループの設定では <div class="top100">〜</div> で囲むことになりますので、CSS に上を100pxあけるように設定を追記ます。

div.top100 {
	margin-top: 100px;
}

このようにユニットグループは段組のための機能ではなく、ユニットを DIV で囲むためのものになりますので、こちらもアイデア次第でイロイロな実装が可能になります。


コメント

山本一道

山本 一道

有限会社アップルップル

名古屋のホームページ制作会社「有限会社アップルップル」の代表をしています。弊社で開発しているCMS「a-blog cms」や、名古屋の「WCAN」という名古屋のWeb制作者のためのセミナーの主催や、コワーキングスペース「ベースキャンプ名古屋」も始めました。

test

エントリーリスト

カテゴリーリスト

タグクラウド

  • ベースキャンプ名古屋に新しく27インチ 2560x1440 のディスプレイが追加されました。 でも、最大解像度で表示できるケーブルが入荷していないので 1920x1080 の表示になっています。

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 4

  • マカベン始まりました! #758markup

    kazumich

    Type: image / Filter: Normal / Link / Feb 18th, 2017

    Comments: 0 / Likes: 3

  • 今日のベースキャンプ名古屋では「YouTube勉強会」が開催されています。Super Chat というサービスが開始されたみたいです。

    kazumich

    Type: image / Filter: Normal / Link / Feb 11th, 2017

    Comments: 0 / Likes: 7

  • 席を確保しランチ!

    kazumich

    Type: image / Filter: Normal / Link / Feb 09th, 2017

    Comments: 0 / Likes: 8

  • 順調に進化している森田さんが JS の勉強会で jQuery のプラグインを作った事について発表している。

    kazumich

    Type: image / Filter: Normal / Link / Jan 21th, 2017

    Comments: 0 / Likes: 6

  • 今日はアップルップルの非公開な社内勉強会で「ブランディング勉強会」を、社外から先生(ワクグミ田川さん)を招いて全員で受講しています。

    kazumich

    Type: image / Filter: Gingham / Link / Jan 18th, 2017

    Comments: 0 / Likes: 9

  • 今日は千代さんと2017年版のサイトについて打ち合わせでした。 http://chiyo-katsumasa.com

    kazumich

    Type: image / Filter: Normal / Link / Jan 18th, 2017

    Comments: 0 / Likes: 5

  • 週に1回はココに。

    kazumich

    Type: image / Filter: Normal / Link / Jan 11th, 2017

    Comments: 0 / Likes: 12

  • 恒例の年末のイベントが終わって、1年が終わりです。皆、1年ありがとう!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 12

  • 今年も忘年会終わった!

    kazumich

    Type: image / Filter: Normal / Link / Dec 29th, 2016

    Comments: 0 / Likes: 4

実践! コンテンツファーストのWebサイト運用  a-blog cmsではじめるCMSプロトタイピング

2016年6月30日に株式会社ボーンデジタル様より「実践! コンテンツファーストのWebサイト運用 a-blog cmsではじめるCMSプロトタイピング」が発売されました。