ホーム > 表示内容・表示方法の設定 > 画像の見出しを設定できるようにする

カスタマイズ情報

標準の設定では、画像は画像ユニットを利用し、見出しはテキストユニットを利用します。ここでは、画像を見出しとして設定する「画像見出し」ユニットを用意する方法を説明します。このカスタマイズは 1.7.0 以降で利用可能です。

1. ユニット追加ボタンを設定

ユニットを追加する際に「画像見出し」を追加できるようにする必要がありますので、管理ページ > カスタマイズ管理 > コンフィグ > エントリー > 編集設定 > ユニット追加ボタン から以下のような設定を追加します。

モードimage_h2
ラベル画像見出し

2. ユニット設定の追加

管理ページ > カスタマイズ管理 > コンフィグ > エントリー > ユニット設定 にアクセスすると、「画像見出しを追加」というボタンが増えているのを確認できるかと思います。また、一番下に「画像見出し」というユニットが追加されていますので、そこに「画像見出しを追加」をクリックして1つ画像見出しユニットを追加して下さい。

3. テンプレートを調整

ユニットのカスタマイズには /themes/system/include/column.html をカスタマイズすると、テキストユニットや画像ユニットをカスタマイズする事ができます。このファイル自身を修正するのではなく、現在制作しているテーマの include/column.html にコピーして修正下さい。

そこで、今回は画像ユニットを改良して、画像見出しユニットを作ります。同じような考え方で、オリジナルのテキストユニットを作る事もアイデア次第で可能です。

画像ユニット

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

画像見出しユニット

<!-- BEGIN column#image_h2 -->
<!-- 画像見出し -->
<h2 id="h{utid}"><img src="%{ROOT_DIR}{path}" alt="{alt}" width="{x}" height="{y}" /></h2>
<!-- END column#image_h2 -->

今回のカスタマイズでのポイントは、ユニット追加ボタンのモードの設定で、標準のモード+アンダーバー+任意の文字 でモードを書く事で、標準のモードを継承したかたちのユニットを作る事ができるようになります。

以下にデフォルトのモードを表にしておきましたので、参考にして下さい。

標準のモードリスト

textテキストユニット
image画像ユニット
fileファイルユニット
mapマップユニット
youtubeYouTubeユニット
eximage画像URLユニット
break改ページユニット
yolpYahoo地図ユニット

現状のバージョン(1.7.0)では、上記のモード名で始まりアンダーバーが無いモードを作る事ができない不具合があります。次のバージョンでは改善予定ではあります。


関連エントリー

このエントリーについているタグから関連するエントリーを表示しています。