4kaku design

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

先日の「a-blog cms DAY」で、a-blog cms のエントリーで定義リストを使う方法が話題になりました。

実は今まで何も気にせずに使っていたんですが、定義リストがデフォルトでテキストユニットに表示されていないケースがあるということで、簡単な導入方法をまとめます。

a-blog cms DAY


定義リストが初期状態で使えるかは、最初にインストールするテーマで決まる


ブログを書き始めた当初から普通に定義リストを使っていたので、a-blog cms のテキストユニットで定義リストが使えないという話を聞いたときは、まったく心当たりがなくて困ってしまいました。

少し調べてみたところ、「初期テーマがblog○○○○であれば、初期状態で定義リストが使える」ということがわかりました。

blogテーマとsiteテーマの編集設定を確認する

a-blog cms の管理画面サイドバーの「コンフィグ」から「編集設定」を選んでもらうと、エントリー作成時に使う各種ユニットの設定をカスタマイズすることができます。ここで、それぞれのテーマがどうなっているか確認しました。

今回は、最新版のVer. 2.1.0.2(ダウンロードはこちらから)を各テーマごとに新規インストールしています。

siteテーマの場合



「テキストタグセレクト」内に定義リストの項目はありません。


blogテーマの場合



定義リストの項目がありました。

a-blog cms の初期テーマを選ぶと、サイト全体を用途に合わせた状態・設定で使うことができます。なので、初期テーマが違うとデフォルトのユニット設定も変わってきます。


定義リストを追加する


管理ページのカスタマイズ管理>コンフィグ>編集設定>テキストタグセレクトの項目に「定義リスト」を足してしまいましょう。

unit.htmlをカスタマイズしている場合はこれだけでは不十分な可能性がありますが、それについては後ほど書きます。


タグの項目には「dl」を入力してください。
ラベルはわかりやすければどんな文字列でも大丈夫です。


テキストタグセレクトに項目を追加し、保存します。
保存後、エントリー編集画面でテキストユニットのタグ一覧に「定義リスト(追加)」が増えました。


エントリーに定義リストを追加

ちなみに、デフォルトのacms.cssではdtタグに font-weight:bold; が指定してあります。
カスタマイズしたCSSで .acms-entry dl dt や .acms-entry dl dd を記述すれば好きな見映えにすることができます。


テキストユニットで定義リストを入力する方法


文頭に「#」をつけると、その行が<dt>タグとして扱われます。改行すると、<dd>タグになります。考え方としては、テーブルの書き方に似ていますね。


<!-- 定義リストの入力方法 -->

#ここにdtが入ります
ここにddが入ります
#ここにdtが入ります
ここにddが入ります

unit.html を確認する


a-blog cms のエントリー作成に使うユニットは基本的に themes/system/include/unit.html で設定されています。しかし、このunit.htmlを複製してカスタマイズしたオリジナルテーマ内に置き、独自のユニットとして使っている場合も多いと思います。
(systemテーマ内のデータはアップデート時に上書きされてしまうので、原則編集しない方がいいですよ)

systemテーマ内のunit.html(Ver.2系で確認)では、テキストユニットについては現在このように書かれています。

<!-- テキスト -->
<!-- BEGIN p -->
<p{class}>{text}[nl2br]</p><!-- END p --><!-- BEGIN h2 -->
<h2{class} id="h{utid}">{text}[nl2br]</h2><!-- END h2 --><!-- BEGIN h3 -->
<h3{class} id="h{utid}">{text}[nl2br]</h3><!-- END h3 --><!-- BEGIN h4 -->
<h4{class} id="h{utid}">{text}[nl2br]</h4><!-- END h4 --><!-- BEGIN h5 -->
<h5{class} id="h{utid}">{text}[nl2br]</h5><!-- END h5 --><!-- BEGIN ul -->
<ul{class}>{text}[list]</ul><!-- END ul --><!-- BEGIN ol -->
<ol{class}>{text}[list]</ol><!-- END ol --><!-- BEGIN dl -->
<dl{class}>{text}[definition_list]</dl><!-- END dl --><!-- BEGIN blockquote -->
<div class="entry-container"><blockquote{class}>{text}[nl2br]</blockquote></div><!-- END blockquote --><!-- BEGIN table -->
<div class="entry-container"><table{class}>{text}[table]</table></div><!-- END table --><!-- BEGIN pre -->
<div class="entry-container"><pre{class}>{text}</pre></div><!-- END pre --><!-- BEGIN none -->
{text}[raw]<!-- END none --><!-- BEGIN markdown -->
{text}[markdown]<!-- END markdown --><!-- BEGIN wysiwyg -->
{text}[raw]<!-- END wysiwyg -->
<!-- END unit#text --><!-- BEGIN unit#image -->

9〜10行目に、dlタグについての記述がありました。このコードがあることによって、先ほど管理ページで行ったテキストタグの追加設定が反映されます。
もし、unit.htmlを独自にカスタマイズしていて定義リストが追加できない!という場合は、unit.htmlに以下のコードを追加してください。

<!-- BEGIN dl --><dl{class}>{text}[definition_list]</dl><!-- END dl -->

正しいコードで検索エンジンにWebサイトをアピールしよう!


今回この記事を書くにあたり、番号無しリストや定義リストを使い分ける意味についてあらためて考えてみました。見映えはCSS次第でなんとでもなりますが、Googleなどの検索エンジンによりWebサイトをアピールするためには配慮が必要なゾーンですね。

以下の記事で勉強をさせてもらいました。ありがとうございます。
ul ol dlタグの使い方|ブログ記事の箇条書きはリストタグで
HTMLタグについて 定義リストを使いこなす!