ノラWEB屋 野良人(のらんど)- 個人営業のWEB屋さん

SIRIUS独自タグ/独自関数

2018年3月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);
    }
    このエントリーをはてなブックマークに追加