SIRIUS独自タグ／独自関数

2018/03/30

公式のマニュアルに載ってないものです。毎回調べるのも面倒なのでまとめておきます。本体のコードを読んだわけではないので、出力結果をみて多分こう、というだけのものです。随時更新。

独自タグ（HTML）

<% headTag %>

上級者向け設定の<head>タグの内容を出力

<% pageHeaderImage %>

ページの詳細設定で登録したヘッダー画像を背景画像として出力
※entry.html／category.htmlで動作

使用例

<div id="header" <% pageHeaderImage %>>

出力

<div id="header" style="background-image:url(./img/header.jpg);">

<% pageHeaderImage2 %>

ヘッダー画像を出力。ページ詳細設定で個別に設定されたものが優先される。
※Ver1.4～

<% topMenu2 %>

トップメニューに設定したメニューをリストで出力する
ちなみに公式マニュアルにも載っているが、<% topMenu %>はspan要素で出力する

使用例

<% topMenu2 %>

出力

<div id="topmenu"><ul>
<li><a href="./entry1.html">メニュー</a></li>
<li><a href="./entry2.html">メニュー</a></li>

</ul></div>

独自関数

tag_insert

独自タグを包含する親要素を挿入する。

使い方

tag_insert( 挿入するタグ )

使用例

<% freeSpace1 | tag_insert(div id="tag_insert") %>

出力

<div id="tag_insert">
<div id="space1"></div>
</div>

tag_insert_inner

独自タグに子要素を挿入する

使い方

tag_insert_inner( 挿入されるタグ, 挿入するタグ )

使用例

<% freeSpace3 | tag_insert_inner( div id="space3", div id="tag_inner" ) %>

出力

<div class="menubox"><div id="space3"><div id="tag_inner">freespace3
</div></div></div>

tag_put

独自タグの直前にHTMLを挿入する
他の関数と異なり、div id=”example”といったタグの要素名のみではなく<>を付けた完全なHTMLを入力する必要がある

使い方

tag_put( 挿入するHTML )

使用例

<% topMenu2 | tag_put(<div id="topmenubtn">MENU</div>) %>

出力

<div id="topmenubtn">MENU</div>
<div id="topmenu"><ul>
<li><a href="./entry1.html">メニュー</a></li>
<li><a href="./entry2.html">メニュー</a></li>

</ul></div>

独自タグ（css）

<% headerHeight2 %>

headerの高さ設定。
画像がある場合は縦横比を維持して画像の横幅を親要素の幅に合わせた時の高さ
画像がない場合は「サイトオプション」→「サイトデザイン」→「ヘッダー表示設定」→「画像無しの場合のヘッダーの高さ」
※Ver1.4～

使用例

#header{ height: <% headerHeight2 %> }

出力

#header{ height: 100px !important;padding:10px 0;box-sizing:border-box; }

<% pageTitleShadow %>

ページタイトルの影を出力。
「サイトオプション」→「サイトデザイン」→「文字サイズ・文字の位置」→「ページタイトルの影」
※Ver1.4～

使用例

#header h2 ,#header .title {
<% pageTitleShadow %>
}

出力

「白細枠+影」の場合

#header h2 ,#header .title {
text-shadow:-1px -1px #FFF,1px -1px #FFF,-1px  1px #FFF,1px  1px #FFF,0 1px 5px rgba(0, 0, 0, 0.2);
}

<% backgroundImage %>

「サイトオプション」→「サイトデザイン」→「背景・文字色の設定」→「背景画像」に設定した画像をbackground-imageで出力

使用例

body{
<% backgroundImage %>
}

出力

body{
background-image: url(./img/example.jpg);
}

サポートが必要ですか？

ご質問・お見積り依頼はお気軽にどうぞ

お問い合わせはこちら

野良人代表

新免祥太

1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人（のらんど）」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。

2018/03/30