Dinoカスタムテンプレートの作り方

Dinoでは、サイトの見た目をHTMLとテンプレート言語を使って自由にカスタマイズできます。

このドキュメントの目的は、HTML / CSS / JavaScript / なんらかのテンプレート言語の知識のある人が、Dinoのカスタムテンプレートを理解し、編集・作成できるようにすることです。

はじめに

カスタムテンプレートは、管理ツールから設定します。

管理ツールにログインします
メニューの「テンプレート」をクリックします。
「カスタマイズ」の「テンプレートをカスタマイズする」をチェックします。

テキストボックスに現在使用中のシステムテンプレートがコピーされますので、ここにカスタムテンプレートを書いていきます。

「プレビュー」をクリックすると、編集中のカスタムテンプレートを使ってサイトをプレビューできます。

「更新」をクリックすると、編集中のカスタムテンプレートがサイトに反映されます。

「テンプレートをカスタマイズする」のチェックを外すと、カスタムテンプレートの内容はすべて破棄されます。手元のテキストファイルなどに内容をコピーしておきましょう。

システムテンプレートは複雑な作りをしていますので、まずはこのドキュメントを読み進めて簡単なところから理解しましょう。

サイト構造

まずはDinoのサイト・メニュー・記事の構造を理解しましょう。 Dinoのサイト構造は次のようになっています。

インデックスページ

サイトのトップページです。
すべての「記事(コンテンツ)」が新着順で表示されます。
新着一覧のことを「ニュースフィード」と呼びます。
サイトには「メニュー」が複数あります。

メニューページ

サイトの各メニューで表示されるページです。
このメニューに属する記事一覧が表示されます。
サイト内の記事はすべていずれかのメニューに属します。

サブメニュー: メニュー内の記事は「サブメニュー」で分類することができます。
サブメニューでは、サブメニューに分類された記事一覧が表示されます。
特殊メニュー: 記事のない特殊メニュー(外部リンク、コンタクトページ)もあります。

パーマリンクページ

サイト内の個々の記事ページです。

サイトマップ風に書くと以下のようになります。

/                          インデックスページ
/wf/menu1                    メニューページ(menu1)
/wf/menu1/content1              パーマリンクページ(menu1の記事 content1)
/wf/menu2/content2              パーマリンクページ(menu1の記事 content2)
/wf/menu2                    メニューページ(menu2)
/wf/menu2?submenu_id=sub1      サブメニュー(menu2のサブメニュー sub1)
/wf/menu2?submenu_id=sub2      サブメニュー(menu2のサブメニュー sub2)
/wf/menu2/content3               パーマリンクページ(menu2の記事 content3)
/wf/menu2/content4               パーマリンクページ(menu2の記事 content4)
    :

テンプレート言語

まずは最も単純なテンプレートを挙げておきます。

<!DOCTYPE html>
<html>
 <head>
  <title>{Title}</title>
  <style>
    #global-menu .active, #sub-menu .active { font-weight:bold; }
    .post { border:1px solid #ccc; position:relative; padding:10px; }
    .post + .post { margin-top:10px; }
    img { max-width:100%; }
    .post-author-image { width:2em; height:2em; vertical-align:middle; }
  </style>
 </head>
 <body>
  
  {block:IndexPage}
  
  <h1>{Title}</h1>
  <p>ここはトップページです。</p>
  {/block:IndexPage}
  
  {block:MenuPage}
  
  <h1>{block:Menu}{Label}{/block:Menu}</h1>
  <p>メニュー「{block:Menu}{Label}{/block:Menu}」のメニューページです。</p>
  
  {/block:MenuPage}
  
  {block:PermalinkPage}
  
  <h1>{PostTitle}{block:NoPostTitle}無題{/block:NoPostTitle}</h1>
  <p>ここはパーマリンクページです。</p>
  {/block:PermalinkPage}
  
  
  <ul id="global-menu">
  {block:Menus}
    <li class="{block:IsActive}active{/block:IsActive}">
      {block:Path}
        <a href="{Path}">{Icon} {Label}</a>
      {/block:Path}
      {block:Link}
        <a href="{Link}">{Icon} {Label}</a>
      {/block:Link}
    </li>
  {/block:Menus}
  </ul>
  
  {block:MenuPage}
    {block:HasSubmenus}
    
    <ul id="sub-menu">
      <li class="{block:IsSubmenuIndex}active{/block:IsSubmenuIndex}">
        <a href="{block:Menu}{Path}{/block:Menu}">ALL</a>
      </li>
      {block:Submenus}
      <li {block:IsActive}class="active"{/block:IsActive}>
        <a href="{Path}">{Label}</a>
      </li>
      {/block:Submenus}
    </ul>
    {/block:HasSubmenus}
  {/block:MenuPage}
  
  {block:HasPosts}
    
    {block:Posts}
    <div class="post">
      <h3 class="post-title">
        <a href="{Permalink}">
          {Title}
          {block:NoPostTitle}無題{/block:NoPostTitle}
        </a>
      </h3>
      <div class="post-info">
        {Date "Y-m-d h:i"}
        {block:Author}
          by
          <img src="{PostAuthorPortraitURL}" class="post-author-image">
          {PostAuthorName}
        {/block:Author}
      </div>
      <div class="post-body">{Body}</div>
    </div>
    {/block:Posts}
  {/block:HasPosts}
  
  
  {block:Pagination}
    {block:PrevPage}<a href="{PrevPage}">Prev</a>{/block:PrevPage}
    {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  {/block:Pagination}
  
  {block:ContactFormPage}
    
    <h1>お問い合わせ</h1>
    {block:Form}
      <form method="post">{Csrf}
        {InputEmail}{InputEmailError}<br>
        {InputMessage}{InputMessageError}<br>
        <input type="submit" value="{lang:問い合わせを送信}">
      </form>
    {/block:Form}
    {block:Success}
      {lang:お問い合せありがとうございます。送信が正常に完了しました。}
    {/block:Success}
  {/block:ContactFormPage}
  
 </body>
</html>

少し長いですが、すべてのページ・記事を網羅できるテンプレートですので、そのままスケルトンとして使えます。

この中でテンプレートの機能に関するのは、{Variable} と {block:Block}...{/block:Block} のような部分です。

テンプレート変数

{Variable} のような部分は「テンプレート変数」と呼びます。この部分はサイトや記事に設定された動的な値に置き換えられます。

例えば {IndexPageURL} はサイトのURLに置き換わります。

テンプレート： <a href="{IndexPageURL}/some/path">Link Title</a>

出力： <a href="http://yoursite.dino.vc/some/path">Link Title</a>

テンプレートブロック

{block:Block}...{/block:Block} のような部分は「テンプレートブロック」と呼びます。テンプレートブロックは、データの有無・値の判定、データ構造の塊やその繰り返しを出力します。

値を判定するブロック

テンプレート変数に値が入っている、もしくは真であるかどうかを判定し、内容を出力します。

テンプレート： <div>{block:Title}タイトル:{Title}{/block:Title}</div>

テンプレート変数 Title が空の場合： <div></div>

テンプレート変数 Title に「タイトルです」が入っている場合 <div>タイトル:タイトルです</div>

データ構造ブロック

テンプレート変数の中には「子テンプレート変数」を持つものがあります。子テンプレート変数は、このブロック内でしか使えません。

以下のテンプレートでは、現在選択中のメニューのタイトルが表示されます。

{block:Menu}...{/block:Menu} の外側では {Label} はなにも出力しません。

データ構造ブロックの繰り返し

テンプレート変数の中には「複数の繰り返し」を持つものがあります。そのようなブロックは変数繰り返しの個数だけ繰り返し出力されます。

テンプレート： <div id="posts"> {block:Posts} <div class="post-title">{Title}</div> {/block:Posts} </div>

Posts にデータが2個ある場合の出力： <div id="posts"> <div class="post-title">Posts最初のタイトル</div> <div class="post-title">Posts2番めのタイトル</div> </div>

値の否定、繰り返しあり、繰り返し無しブロック

ある変数の内容が「無い・偽」の場合や繰り返しがない場合に何かを出力したい場合、「Not, No」接頭辞を使えます。例えば {block:NoTitle}...{/block:NoTitle} ブロックは Title が空の場合に出力されます。

また、繰り返し変数に繰返し項目が1つ以上あるかどうかには「Has」接頭辞を使えます。例えば {block:HasPosts}...{/block:HasPosts} ブロックは Posts に1つ以上の項目がある場合に一度だけ出力されます。

テンプレート： {block:HasPosts} <div id="posts"> {block:Posts} <div class="post"> <div class="post-title"> {block:Title}{Title}{/block:Title} {block:NoTitle}(無題){/block:NoTitle} </div> </div> {/block:Posts} </div> {/block:HasPosts} {block:NoPosts} <div id="no-post">投稿がありません</div> {/block:NoPosts}

Posts に何も入っていない時の出力： <div id="no-post">投稿がありません</div>

Posts に2つの項目があり、最初の項目の Title が空の時の出力： <div id="posts"> <div class="post"> <div class="post-title"> (無題) </div> </div> <div class="post"> <div class="post-title"> 2番目のタイトル </div> </div> </div>

テンプレート変数とブロック

それでは、実際に定義されているテンプレート変数、ブロックを紹介します。

XXX の部分は場合に応じて変化します。

グローバル変数・ブロック

変数	説明
{IndexPageURL}	サイトURL
{Title}	サイトタイトル
{Description}	サイトの説明
{MetaDescription}	サイトの説明のプレーンテキスト
{Favicon}	ファビコンのURL
{MainMenuIcon}	サイトメニューアイコンのURL
{RSS}	サイトの新着RSSのURL
{CoverURL}	サイトのカバー画像URL : 横1280px
{IndexPageURL}	インデックスページ（トップページ）のURL
{Permalink}	ページのパーマリンクURL - ページの内容で変化する
{block:Menus}..{/block:Menus}	グローバルメニューの繰返し項目ブロックグローバルメニューブロックで説明します
{block:Menu}..{/block:Menu}	現在選択中のメニューの構造ブロックメニューブロックで説明します
{block:HasSubMenus}..{/block:HasSubMenus}	現在選択中のメニューにサブメニューがあれば有効
{block:Submenus}..{/block:Submenus}	現在選択中メニューのサブメニューの繰り返し項目ブロックサブメニューブロックで説明します
{block:Posts}..{/block:Posts}	コンテンツの繰返し項目ブロックコンテンツブロックで説明します
{block:Pagination}..{/block:Pagination}	ページング用ブロックページング用ブロックで説明します
{SNSShares}	各種SNSのシェアボタンをまとめて追加する変数システムが準備したHTMLが挿入されますので、レイアウトはCSSで行ってください

基本ブロック

サイトの構造に応じて内容を出し分けるブロックです。

変数	説明
{block:IndexPage}...{/block:IndexPage}	インデックスページ（トップページ）でのみ有効
{block:MenuPage}...{/block:MenuPage}	メニューページ・サブメニューページでのみ有効メニューページで説明します
{block:PermalinkPage}...{/block:PermalinkPage}	パーマリンクページ（個別記事ページ）でのみ有効メニューページで説明します
{block:ContactFormPage}...{/block:ContactFormPage}	コンタクトフォームメニューページでのみ有効コンタクトフォームページで説明します

グローバルメニューブロック

{block:Menus}...{/block:Menus} はグローバルメニューを表現するための繰り返し項目ブロックです。

このブロックでは以下の子変数を使えます。

変数	説明
{Label}	メニュータイトル
{Icon}	メニューアイコン
{Path}	メニューのパス (ex: `/wf/mymenu` ) メニューが外部リンクの場合は空白
{Link}	メニューが外部リンクの場合、外部リンクURL
{block:IsContactForm}...{block:IsContactForm}	メニューがコンタクトフォームの場合に有効
{block:IsActive}...{block:IsActive}	表示中のページのメニューが選択中の場合に有効

例: 選択中のメニューを .active とし、外部リンクは target=_blank にする。また、インデックスページを「Home」として先頭に配置。 <div id="global-menu"> <div class="menu {block:IndexPage}active{/block:IndexPage}"> <a href="{IndexPageURL}">Home</a> </div> {block:Menus} <div class="menu {block:IsActive}active{/block:IsActive}"> {block:Path}<a href="{Path}">{Icon} {Label}</a>{/block:Path} {block:Link}<a href="{Link}" target="_blank">{Icon} {Label}</a>{/block:Link} </div> {/block:Menus} </div>

メニューページブロック

{block:MenuPage}...{/block:MenuPage}はメニューページでのみ有効なブロックです。

このブロックでは以下の子変数を使えます。

変数	説明
{Path}	通常メニューの「設置URL」で指定したパス
{block:PathIsXXX}...{/block:PathIsXXX}	`{Path}` が `XXX` である場合にのみ有効たとえば設置URLパスが「`examplepath`」の場合、つまり `/wf/examplepath` でアクセスされている場合、 `{block:PathIsExamplepath}`...`{/block:PathIsExamplePath}` ブロックが有効になる
{block:HasSubmenus}...{/block:HasSubmenus}	メニューにサブメニューがある場合に有効
{block:IsSubmenuIndex}...{/block:IsSubmenuIndex}	サブメニューが選ばれていない場合に有効

メニューページでは、選択中のメニューが {block:Menu}...{/block:Menu} ブロックで有効になります。 {block:Menu}...{/block:Menu} の子変数はグローバルメニューブロックと同じです。

また、サブメニューを選択中の場合、選択中のサブメニューが {block:Submenu}...{/block:Submenu} ブロックで有効になります。 {block:Submenu}...{/block:Submenu} の子変数はサブメニューブロックとほぼ同じです。

サブメニューブロック

{block:Submenus}...{/block:Submenus} はメニューのサブメニューを表現するための繰り返し項目ブロックです。 {block:HasSubmenus}...{block:HasSubmenus} ブロック内で使うのが無難です。

このブロックでは以下の子変数を使えます。

変数	説明
{Label}	サブメニュータイトル
{Path}	サブメニューのパス (ex: `/wf/mymenu?submenu_id=xxx` )

例: サブメニューがある場合、選択中のサブメニューを .active とし、メニューページ(サブメニュー未選択 = すべてのメニュー記事一覧)を「ALL」として先頭に配置。 {block:HasSubmenu} <div id="sub-menu"> <div class="submenu {block:IsSubmenuIndex}active{/block:IsSubmenuIndex}"> <a href="{block:Menu}{Path}{/block:Menu}">ALL</a> </div> {block:Submenus} <div class="submenu {block:IsActive}active{/block:IsActive}"> <a href="{Path}">{Label}</a> </div> {/block:Submenus} </div> {/block:HasSubmenu}

パーマリンクページブロック

{block:PermalinkPage}...{/block:PermalinkPage}はパーマリンクページでのみ有効なブロックです。

パーマリンクページでは以下の変数がグローバルに使えます。(PeramlinkPage で囲わなくても使えます)

変数	説明
{PostID}	コンテンツのID
{PostTitle}	コンテンツのタイトル
{PostDate "format"}	コンテンツ公開日時を `format` でフォーマットしたもの `format` の書式はコンテンツブロックの `{Date "format"}` を参照
{PostSummary}	コンテンツ本文HTMLのテキスト表現
{PostPhotoURL}	コンテンツ本文HTMLの最初にある画像のURL 画像がない場合は無効
{block:PreviousPost}...{/block:PreviousPost}	ニュースフィードでの、ひとつ新しい記事このブロックの子変数はコンテンツブロックとほぼ同じです。
{block:NextPost}...{/block:NextPost}	ニュースフィードでの、ひとつ古い記事このブロックの子変数はコンテンツブロックとほぼ同じです。

パーマリンクページでは、記事の属するメニューが {block:Menu}...{/block:Menu} ブロックで有効になります。 {block:Menu}...{/block:Menu} の子変数はグローバルメニューブロックと同じです。

また、サブメニューが設定されている場合、 {block:Submenu}...{/block:Submenu} ブロックで有効になります。 {block:Submenu}...{/block:Submenu} の子変数はサブメニューブロックとほぼ同じです。

コンタクトフォームページ

{block:ContactFormPage}...{/block:ContactFormPage} ブロックは、「コンタクトフォーム」メニューで有効になります。

一般ユーザは、コンタクトフォームからメールアドレス、問い合わせ本文を送信できます。送信されたフォームは管理ツールの「問い合わせ管理」から閲覧できます。

変数説明

{block:Form}...{/block:Form}

変数	説明
{block:Form}...{/block:Form}	フォーム送信前、フォーム送信後エラー表示のときに有効このタグ内には `<form method="post">...</form>` を配置し、以下の子変数を必ず入れてください `{Csrf}` : CSRFトークン `{InputEmail}` : メールアドレス用 input フィールド `{InputEmailError}` : メールアドレス用エラー表示 `{InputMessage}` : 問い合わせ本文用 textarea フィールド `{InputMessageError}` : 問い合わせ本文用エラー表示
{block:Success}...{/block:Success}	フォーム送信が成功したときに有効

フォーム送信前、フォーム送信後エラー表示のときに有効

このタグ内には <form method="post">...</form> を配置し、以下の子変数を必ず入れてください

{Csrf} : CSRFトークン
{InputEmail} : メールアドレス用 input フィールド
{InputEmailError} : メールアドレス用エラー表示
{InputMessage} : 問い合わせ本文用 textarea フィールド
{InputMessageError} : 問い合わせ本文用エラー表示

{block:Success}...{/block:Success} フォーム送信が成功したときに有効

例: {block:ContactFormPage} <h1>お問い合わせ</h1> {block:Form} <form method="post">{Csrf} {InputEmail}{InputEmailError} {InputMessage}{InputMessageError} <input type="submit"> </form> {/block:Form} {block:Success} お問い合わせありがとうございます {/block:Success} {/block:ContactFormPage}

コンテンツブロック

{block:Posts}...{/block:Posts} はコンテンツ(投稿)を表現するための繰り返し項目ブロックです。 {block:HasPosts}...{block:HasPosts} ブロック内で使うのが無難です。

Posts に入ってくるコンテンツは、呼び出されたページによって変わります。

インデックスページの場合、サイト全体の新着記事一覧(ニュースフィード)
メニューページ(サブメニュー指定なし)の場合、メニューに属する記事一覧
メニューページ(サブメニュー指定あり)の場合、メニューに属する記事のうち、サブメニューに分類された記事一覧
パーマリンクページの場合、該当する記事ひとつだけ

このブロックでは以下の子変数を使えます。

変数	説明
{Permalink}	コンテンツのパーマリンクURL
{PostID}	コンテンツのID
{Title}	タイトル
{Body}	本文HTML
{BodyText}	`{Body}` のテキスト抽出表現
{More}	本文HTMLに `<!-- more -->` がある場合、`{Body}` には more 以前が、`{More}` には more 以降が入るこの機能はパーマリンクページでは無効です
{MoreText}	`{More}` のテキスト抽出表現
{PhotoURL}	本文HTMLの最初にある画像のURL 画像がない場合は無効
{block:UseCoverImage}...{/block:UseCoverImage}	本文最初の画像をコンテンツのカバー画像として使う場合は有効画像がない場合は自動的に無効
{Date "format"}	公開日時を `format` で整形したもの `format` は `Y-m-d H:i` のように指定する。扱えるフォーマット文字列は以下 Y - 年(4桁) y - 年(下2桁) m - 月 : 01 ～ 12 n - 月 : 1 ～ 12 M - 月(短縮文字) : 英語では Jan, Feb など。日本語では 1月、2月など。 F - 月(文字) : 英語では January, February など。日本語では 1月、2月など。 d - 日 : 01 ～ 31 j - 日 : 1 ～ 31 D - 曜(短縮文字) : 英語では Sun, Mon など。日本語では日曜、月曜など。 l - 曜(文字) : 英語では Sunday, Monday など。日本語では日曜日、月曜日など。 H - 時(24h) : 01 ～ 23 G - 時(24h) : 1 ～ 23 h - 時(12h) : 01 ～ 12 g - 時(12h) : 1 ～ 12 a - 午前・午後 : a.m. か p.m. A - 午前・午後 : AM か PM i - 分 : 00 ～ 59 s - 秒 : 00 ～ 59
{block:Author}...{/block:Author}	コンテンツの署名ブロック「コンテンツに署名する」がチェックされていると有効コンテンツ署名ブロックで説明します
{block:Menu}...{/block:Menu}	記事の属するメニューの構造ブロック子変数はグローバルメニューブロックとほぼ同じ
{block:Submenu}...{/block:Subenu}	記事の属するサブメニューの構造ブロック子変数はサブメニューブロックとほぼ同じ

コンテンツ署名ブロック

{block:Author}...{/block:Author} はコンテンツの作成者を表し、 {block:Posts}...{/block:Posts} ブロック内でのみ有効です。

コンテンツで「署名を表示する」がチェックされていなければ無効です。

変数	説明
{PostAuthorName}	コンテンツ著者の名前
{PostAuthorPortraitURL}	コンテンツ著者の画像URL

ページング用ブロック

{block:Pagination}...{/block:Pagination} ブロックを使うと、ページングを表現できます。

インデックスページには新着記事一覧、メニューページにはメニュー記事一覧、パーマリンクページには次・前の記事の情報が入ってきます。

ページングが必要ない場合は無効になります。

変数	説明
{CurrentPage}	現在のページ番号
{TotalPages}	全ページ数
{FirstPage}	最初のページのURLパラメータ現在のページ番号が3以上のときのみ有効 `{block:FirstPage}`...`{/block:FirstPage}` と組み合わせて使う
{PreviousPage}	前ページのURLパラメータ現在のページ番号が2以上のときのみ有効 `{block:PreviousPage}`...`{/block:PreviousPage}` と組み合わせて使う
{NextPage}	次ページのURLパラメータ現在のページ番号が最後から2番目以下のときのみ有効 `{block:NextPage}`...`{/block:NextPage}` と組み合わせて使う
{LastPage}	最終ページのURLパラメータ現在のページ番号が最後から3番目以下のときのみ有効 `{block:LastPage}`...`{/block:LastPage}` と組み合わせて使う
{block:JumpPagination}...{/block:JumpPagination}	現在のページ周辺に直接リンクを作りたいときに使う繰り返しブロックジャンプページ用ブロックで説明します

シンプルなページングの例： {block:NotPermalinkPage} {block:Pagination} <div id="paging"> {block:FirstPage}<a href="{FirstPage}">First</a>{/block:FirstPage} {block:PreviousPage}<a href="{PreviousPage}">Prev</a>{/block:PreviousPage} {CurrentPage} / {TotalPages} {block:NextPage}<a href="{PreviousPage}">Next</a>{/block:NextPage} {block:LastPage}<a href="{FirstPage}">Last</a>{/block:LastPage} </div> {block:Pagination} {/block:NotPermalinkPage}

ジャンプページ用ブロック

{block:JumpPaginaton}...{/block:JumpPagination} ブロックは、現在表示中のページ周辺のページに直接ジャンプするリンク群を表現できます。
現在表示中ページの前後2ページ分の情報を繰り返します。

{block:Paginaton}...{/block:Pagination} 内でのみ有効です。

変数	説明
{PageNumber}	繰り返し中のページ番号
{URL}	繰り返し中のページURL
{block:CurrentPage}...{/block:CurrentPage}	繰り返し中のページ番号が現在のページ番号のときのみ有効
{block:JumpPage}...{/block:JumpPage}	繰り返し中のページ番号が現在のページ番号でないときのみ有効

ジャンプページを組み合わせたページングの例： {block:NotPermalinkPage} {block:Pagination} <div id="paging"> {block:FirstPage}<a href="{FirstPage}">First</a>{/block:FirstPage} {block:PreviousPage}<a href="{PreviousPage}">Prev</a>{/block:PreviousPage} {block:JumpPagination} {block:CurrentPage}<span>{PageNumber}</span>{/block:CurrentPage} {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage} {/block:JumpPagination} {block:NextPage}<a href="{PreviousPage}">Next</a>{/block:NextPage} {block:LastPage}<a href="{FirstPage}">Last</a>{/block:LastPage} </div> {block:Pagination} {/block:NotPermalinkPage}

サイト設定

管理ツールのサイト設定に関するテンプレート変数・ブロックです。

変数	説明
{ColorScheme}	サイト設定のカラーテーマ light, dark, pink, blue, green, yellow のいずれか
{block:ColorSchemeIsXXX}...{/block:ColorSchemeIsXXX}	サイト設定のカラーテーマに対応したブロック例えば `{ColorScheme}` が 'dark' の場合、`{block:ColorSchemeIsDark}`...`{/block:ColorSchemeIsDark}` のみが有効になる
{FontsLoadCode}	サイト設定の「基本フォント」「タイトルフォント」で設定されたフォントを利用可能にするためのコードこれらの設定を有効にするために `<head>` ブロック内にこのコードを入れてください
{FontFamily}	サイト設定の「基本フォント」で設定されたフォントに応じた font-family 定義文字列 body の font-family に指定してください
{TitleFontFamily}	サイト設定の「タイトルフォント」で設定されたフォントに応じた font-family 定義文字列サイトタイトルの font-family に指定してください
{block:CoverHeightIsXXX}...{/block:CoverHeightIsXXX}	サイト設定の「カバーレイアウト」に対応 `CoverHeightIsView` : カバー領域=ウィンドウサイズ `CoverHeightIsImage` : カバー領域=カバー画像サイズ
{block:CoverImageSizeIsXXX}...{/block:CoverImageSizeIsXXX}	サイト設定の「カバーレイアウト」に対応 `CoverImageSizeIsCover` : カバー領域を満たすよう画像の上下or左右をカット `CoverImageSizeIsFull` : カバー領域=カバー画像サイズ ~~`CoverImageSizeIsContain` : カバー領域内に画像が収まるよう拡大縮小~~ `CoverImageSizeIsShrink` : 画像幅が640px内に収まるよう縮小
{block:MainMenuIconSizeIsXXX}...{/block:MainMenuIconSizeIsXXX}	サイト設定の「メニューアイコン表示サイズ」に対応 `MainMenuIconSizeIsH32` : 高さ32px `MainMenuIconSizeIsH64` : 高さ64px `MainMenuIconSizeIsH128` : 高さ128px
{block:TitleLayoutIsXXX}...{/block:TitleLayoutIsXXX}	サイト設定の「タイトルレイアウト」に対応 `TitleLayoutIsTop` : カバー領域の上部 `TitleLayoutIsCenter` : カバー領域の中心 `TitleLayoutIsBottom` : カバー領域の下部 `TitleLayoutIsBelow` : カバー領域の下 `TitleLayoutIsHidden` : 表示しない
{block:MenuIsXXX}...{/block:MenuIsXXX}	サイト設定の「メニューレイアウト」に対応 `MenuIsLeft` : 左から開く `MenuIsRight` : 右から開く `MenuIsTop` : 上から開く
{block:ShowBrandLogo}...{/block:ShowBrandLogo}	サイト設定の「『powered by』を表示する」が有効な場合に有効
{CustomCSS}	サイト設定の「カスタムCSS」
{FreeArea1}	サイト設定の「フリーエリア（カバー画像下）」で設定されたHTML
{FreeArea2}	サイト設定の「フリーエリア（フッター）」で設定されたHTML

サイト設定を反映させる例: <head> : {FontsLoadCode} <style> : body { font-family: sans-serif; } /* {block:FontFamily} */ body { font-family: {FontFamily}; } /* {/block:FontFamily} */ /* {block:TitleFontFamily} */ #site-title { font-family:{TitleFontFamily}; } /* {/block:TitleFontFamily} */ : /* {block:ColorSchemeIsDark} */ body { color:white; background:black; } /* {/block:ColorSchemeIsDark} */ /* {block:ColorSchemeIsLight} */ body { color:black; background:white; } /* {/block:ColorSchemeIsLight} */ : #menu-icon { position:absolute; /* {block:MenuIsLeft} */ left:10px; /* {/block:MenuIsLeft} */ /* {block:MenuIsRight} */ right:10px; /* {/block:MenuIsRight} */ : } /* {block:CoverHeightIsView} */ #cover { position:relative; height:100wv; background:url({CoverURL}) center center; background-size:cover; } #cover > img { display:none; } /* {/block:CoverHeighIsView} */ /* {block:CoverHeightIsImage} */ #cover { position:relative; height:auto; } #cover > img { width:100%; height:auto; } /* {/block:CoverHeighIsImage} */ : {CustomCSS} </style> </head> <body> : <div id="cover"> <img src="{CoverURL}"> : </div> {block:FreeArea1}<div>{FreeArea1}</div>{/block:FreeArea1} : <div id="footer"> {FreeArea2} </div> </body>

システムブロック

{block:System}...{/block:System} は、システムに関する変数等を収めたブロックです。

変数	説明
{block:IsAuthorized}...{/block:Authorized}	弊社が公式認定したサイトで有効
{block:IsDinovc}...{/block:IsDinovc}	dino.vcで作成したサイトで有効
{block:IsRvlvrco}...{/block:IsRvlvrco}	revolver.jpで作成したテナントのホームページで有効
{block:ContentPreview}...{/block:ContentPreview}	コンテンツのプレビュー中に有効
{block:TemplatePreview}...{/block:TemplatePreview}	テンプレートのプレビュー中に有効
{STATIC_URL}	システム共通のライブラリ等のあるパス
{PORTAL_URL}	dino.vcのURL

画像URLのバリエーション

システムからアップロードした画像には自動的にバリエーションが作られます。

{PhotoURL} など画像URLを表すテンプレート変数を {block:PhotoURL}...{/block:PhotoURL} ブロックとして使うことで、バリエーションを明示指定できます。

子変数	説明
{Xlarge}	横1280pxのjpg
{Large}	横640pxのjpg
{Normal}	横320pxのjpg
{Small}	横160pxのjpg
{Thumb}	縦横90pxのjpg
{Original}	未加工のオリジナル画像
{Ogp}	OGP用(プロトコル付き絶対URL)

変数フィルター

JavaScript内で使う場合など、テンプレート変数のままでは使いづらいテンプレート変数を、接頭辞をつけることで加工できます。

表現	説明
{URIEncodedVariable}	`{Variable}` をURI Encode URLのパラメータに `{Varable}` を渡したい時に対応できる例: <a href="http://some.site/path?url={URIEncodedPeramlink}"></a>
{PlainTextVariable}	`{Variable}` からHTMLタグを除去したテキスト表現
{JSVariable}	`{Variable}` のエスケープ済みJavascript文字列 `{Variable}` に「"」が入っている場合に対応できる例: var title = {JSTitle};
{JSPlaintextVariable}	PlainText と JS の組み合わせ例: var body_text = {JSPlainTextBody};

国際化対応

部分的ですが、国際化に対応しています。

この部分の仕様は大幅に変わる可能性があります

固定文言

{lang:string} は閲覧者の環境で表示言語の変わる固定文字列です。よく使う用語に対応しています。

現時点で string に対応している文言は以下です。

続きを読む
翻訳する
原文を表示
戻る
フィード
お問い合わせ
お問い合わせ内容
問い合わせを送信
お問い合せありがとうございます。送信が正常に完了しました。
ログイン
投稿
編集

自動翻訳

この部分のドキュメントは準備中です

変更履歴

時期	内容
2014-08-09	MenuIsTop追加
2014-08-09	CoverImageSizeIsContain削除、CoverImageSizeIsShrink追加
2014-07-25	メニューアイコン表示サイズ追加
2014-07-21	メニューアイコン追加
2014-07-17	タイトルレイアウト、ニュースフィードレイアウト周り追加・変更
2014-07-03	初版