4kaku design

マーケティングを勉強しているWebデザイナーのノート

a-blog cms Advent Calendar 2015 の15日目の記事です。
今回はテキストユニットのテキストタグセレクトとユニットグループを使ってエントリーを装飾する方法をご紹介します。


このエントリーの目次



a-blog cms を使ったWebサイトの見映えをひと工夫するためのTipsです


a-blog cms はその名の通りCMSなので、クライアントさんが記事を追加していくことが前提になります。しかし、リニューアル案件の場合は納品前にある程度エントリー作りをする場合もあります。そんなときに、デフォルトのままのh1からh5までの1種類ずつの見出しではエントリーの見た目がワンパターンになってしまいがちです。

そこで今回は管理画面の操作とCSSのカスタマイズだけで、見出しとユニットグループを使ってちょっぴり凝ったエントリーを作るための方法をご紹介します。

セマンティックなサイト運用にもひと役買う(かもしれません)

サイト運用者の方が見出しを見た目重視で使ってしまうと、h4の下に属するはずのコンテンツにh2がついている…なんてことも起こり得ます。見出しにバリエーションを持たせることは、セマンティックなWebサイト運用にも役立つかもしれません。(もちろんデザイナーとしては、自然に扱える見出しのデザインを考えるべきなんですが)

テキストタグセレクトとユニットグループの設定は「編集設定」から


管理画面の コンフィグ > 編集設定 から設定を行います。

テキストタグセレクトで自由に見出しをつくる

「テキストタグセレクト」とは、テキストユニットへ入力したものをどのタグとして扱うか設定できる機能です。



デフォルトの設定では、だいたいこんな感じになっているかと思います。(これはインストール時に選んだテーマによります)


デフォルトのテキストタグセレクト


今回のカスタマイズでは、h1からh5の見出しをもう1種類ずつ増やしました。「タグ」の欄には、HTMLタグを入力することができますが、CSSと同じ書き方でIDやクラスをつけることができます。


見出しが増えました


見出しサンプル集

ここからは、今回作ったサンプル見出し集です。管理画面でつけたクラスにスタイルを当てました。

見出し2(フキダシ)

.blogEntryContent h2 {
	※ここに「見出し2」のスタイル
}
.blogEntryContent h2.balloon {
	※ここに「見出し2(フキダシ)」のスタイル
}

見出し3

見出し3(ボーダー)

.blogEntryContent h3 {
    ※ここに「見出し3」のスタイル 
}
.blogEntryContent h3.border{
    ※ここに「見出し3(ボーダー)」のスタイル
}

見出し4

見出し4(下線つき)

.blogEntryContent h4 {
    ※ここに「見出し4」のスタイル 
}
.blogEntryContent h4.under-line {
    ※ここに「見出し4(下線つき)」のスタイル
}
見出し5
見出し5(下線つき)
.blogEntryContent h5 {
    ※ここに「見出し5」のスタイル 
}
.blogEntryContent h5.under-line {
    ※ここに「見出し5(下線つき)」のスタイル
}

今回は以下のページのCSSを参考にさせていただきました。ありがとうございます。

ユニットグループでコンテンツに背景色をつける

ユニットグループにも、同様にクラスをつけることができます。デフォルトのユニットグループ設定は以下の通りです。(これもインストール時のテーマによって変わります)


デフォルトのユニットグループ


今回は、エントリーの目次になるグループと1、2、3カラムの背景色つきグループを作成しました。


カスタマイズ後


作成したユニットグループは、テキストユニット内で選ぶことができます。



1カラム(目次専用)



長文エントリーにはあると嬉しい「エントリーごとの目次」用のユニットグループを作りました。見出しとリストをdiv.bg-indexで囲んでいます。

1〜3カラム(背景色つき)

1カラム(背景つき)

div.acms-col-clear.bg-color で囲まれたユニットです。見出しと本文を含んでいます。

2カラム(背景つき)

div.acms-col-md-6.bg-color で囲まれたユニットです。見出しと本文を含んでいます。

2カラム(背景つき)

div.acms-col-md-6.bg-color で囲まれたユニットです。見出しと本文を含んでいます。

3カラム(背景つき)

div.acms-col-md-4.bg-color で囲まれたユニットです。見出しと本文を含んでいます。

3カラム(背景つき)

div.acms-col-md-4.bg-color で囲まれたユニットです。見出しと本文を含んでいます。

3カラム(背景つき)

div.acms-col-md-4.bg-color で囲まれたユニットです。見出しと本文を含んでいます。


エントリー内のコラムや補足の情報の見映えを変える場合によく使います。情報の属性が違うことをひと目で閲覧者に伝えることができます。


a-blog cms Advent Calendar はまだまだ続きます


a-blog cms Advent Calendar 2015はクリスマス当日まで続きます。明日はフォルトゥナ@Kunio_Sakamotoさんです。