Blog Top
更新歴

SoyCMSブログのアレンジ03 ・・・記事タイトル

─記事タイトルに副題をつけてみる─

テンプレート内の記事出力部分のソースです。

    <!-- b_block:id="entry_list" エントリーの記述-->
    <div class="entry">
     <h2 class="title" cms:id="title">タイトル表示</h2 cms:id="title">
     <div cms:id="content">テキスト表示</div>
     <div class="more_link"><a href="entry.html#more" cms:id="more_link">追記を読む</a></div>
     <p class="posted-date"><!-- cms:id="create_date" cms:format="Y.m.d" -->2008.02.00<!-- /cms:id="create_date" -->   |  <a href="#" cms:id="trackback_link">Trackback(<!-- cms:id="trackback_count" -->0<!-- /cms:id="trackback_count" -->)</a></p>
    </div>
    <!-- /b_block:id="entry_list" エントリーの記述-->

cms:id="title" が記事につけられたタイトルを書き出してくれますが、このままでは<h2>などの見出しタグで囲んでスタイル指定するくらいしかレイアウト方法がなさそうです。
タイトルの後ろにサブタイトルを付けて大きさや色を変えたいのでSoyCMSに同梱されている「カスタムフィールドプラグイン」というのを試してみます。

カスタムフィールド登録画面

使い方の説明(プラグイン説明から引用)

エントリーに対して、任意のフィールドを追加することができます。

例えば、IDに「customer」を設定し、フィールド名に「連絡先」を設定すると、エントリー編集画面にカスタムフィールド:連絡先と書かれた入力項目が追加されます。
ここで入力したデータは cms:id="customer" で表示させることが可能です。

チェックボックスではチェックされたときにフィールド名が値として保持されます(<input type="checkbox" value="[フィールド名]">)。
ただし初期値が設定されている場合は初期値を値として使います(<input type="checkbox" value="[初期値]">)。

要するにブログの記事の中にもテンプレートのようなものが作れる機能のようです。

  • タイトルの後ろサブタイトル用に【"sub-title-span" 】初期値:<span></span>
    (テンプレート中では cms;id="sub-title-span" と記述)
  • タイトル下、副題用に【"sub-title-under" 】初期値:なし
    (テンプレート中では cms;id="sub-title-under" と記述)

と2つのフィールドを作りました。

プラグイン設定後は、記事編集画面にカスタムフィールド入力欄が表示されるようになります。

カスタムフィールド入力欄

ページテンプレートのタイトル表示部分を次のように書き換え

<h2 class="title">
	<!-- cms:id="title" -->エントリータイトル01<!-- /cms:id="title" -->
	<!-- cms:id="sub-title-span" -->サブタイトル<!-- /cms:id="sub-title-span" -->
</h2>
<h2 class="subtitle"><!-- cms:id="sub-title-under" -->副題<!-- /cms:id="sub-title-under" --></h2>

記事編集画面のカスタムフィールド
【sub-title-span】に〔 <span>-・・・記事タイトル</span> 〕
【sub-title-under】に〔 ─記事タイトルに副題をつけてみる─ 〕
をそれぞれ入力するとこのようなタイトルの状態になります。

副題つきタイトル

書き出されたソース

<h2 class="title">
	<a href="/paramy/skizze/post/customize03">ブログアレンジ03</a>
	<span>・・・記事タイトル</span>
</h2>
<h2 class="subtitle">─記事タイトルに副題をつけてみる─</h2>

タイトル2行目(ソース5行目)の副題は、記事本文中に記述してもかまわないのですが、カスタムフィールド化することでテンプレート上で自由に扱えるようになるので、いろいろなタイトルバリエーションができそうです。

2013.09.09 | Trackback(0)

お名前: 

←「ひとこと」と入力してから送信ボタンをクリックして下さい。