SIRIUSについて

SIRIUSのCSS独自タグ一覧

CSS独自タグ一覧

SIRIUSのスタイルシート（CSS）で使用する独自タグの一覧です。旧テンプレートにしか使われていない古いタグは載せてありません。

 

スタイルシート用の独自タグはHTML用の独自タグとは異なるので注意しましょう。

 

SIRIUSのHTML独自タグ一覧SIRINOVA

スタイルシートで使える独自タグ

テンプレート選択の【メニュー位置】

 

タグ 説明 出力されるスタイル
<% mainContentsFloat %> メインカラムの位置 left / right
<% mainMenuFloat %> メインメニューの位置 left / right
<% subMenuFloat %> サブメニューの位置 left / right

 

サイトデザインの設定

 

タグ 説明 出力されるスタイル
<% bodyFontSize %> 記事本文の文字サイズ font-size: ○px;
<% backgroundImage %> 背景画像 background-image: url(./img/画像名);
<% backgroundDisplay %> 背景画像の表示

リピートの場合
background-repeat: repeat;
<% backgroundColor %> 背景色 background-color: #○;
<% pageTitleFontSize %> ページタイトルの文字サイズ font-size: ○px;
<% pageTitleColor %> ページタイトルの文字色 color: #○;
<% pageTitlePlace2 %> ページタイトルの位置

左側
left:5%; width:65%;

 

右側
left:30%; width:65%;

 

非表示(CSSで指定)
text-indent: -9999px;
<% pageTitleShadow %> ページタイトルの影

白細枠+影
text-shadow: -1px -1px #FFF, 1px -1px #FFF, -1px 1px #FFF, 1px 1px #FFF, 0 1px 5px rgba(0, 0, 0, 0.2);

 

白太枠+影
text-shadow: -2px -2px #FFF, 2px -2px #FFF, -2px 2px #FFF, 2px 2px #FFF, 0 1px 5px rgba(0, 0, 0, 0.2);

 

影のみ
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
<% pageDescFontSize %> サイト説明文の文字サイズ font-size: ○px;
<% pageDescColor %> サイト説明文の文字色 color: #○;
<% pageDescPlace2 %> サイト説明文の位置

左側
left:5%; width:65%;

 

右側
left:30%; width:65%;

 

非表示(CSSで指定)
text-indent: -9999px;
<% pageDescShadow %> サイト説明文の影

白細枠+影
text-shadow: -1px -1px #FFF, 1px -1px #FFF, -1px 1px #FFF, 1px 1px #FFF, 0 1px 5px rgba(0, 0, 0, 0.2);

 

白太枠+影
text-shadow: -2px -2px #FFF, 2px -2px #FFF, -2px 2px #FFF, 2px 2px #FFF, 0 1px 5px rgba(0, 0, 0, 0.2);

 

影のみ
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
<% headerHeight2 %> ヘッダーの表示設定→画像無しの場合のヘッダーの高さ

ヘッダー画像未設定時
#header { height: (設定したヘッダーの高さ) !important; padding: 10px 0; box-sizing: border-box; }

 

ヘッダー画像設定時
#header{ height: (ヘッダー画像の高さ); }

 

メインのヘッダー画像を設定せず「画像無しの場合のヘッダーの高さ」が0の場合
display: none;
<% headerDisplaySetting %> スマホ表示時のヘッダーの表示調整

@media screen and (max-width: 768px) {
#header { height:auto !important; padding:10px; }
#header h2, #header .title, #header .desc { position:relative; width:90%; left:0; }
}

 

メインのヘッダー画像を設定せず「画像無しの場合のヘッダーの高さ」が0の場合
#header { display:none; }

 

テンプレート横幅設定

 

タグ 説明 出力されるスタイル
<% templateWidthStyles %> テンプレート横幅

例)サイト幅が1500pxの場合
/* テンプレートの横幅指定FIXここから */
@media screen and (min-width: 1500px) {
#contents, #top .inner, #header, #topmenubox, #topmenu ul, #footer .inner, #footermenu, #pagetop { width:1500px; max-width:1500px; }
#header img { width:100%; height:auto; }
#header { background-size:100% auto; }
#searchbox { max-width:100% }
#topmenu ul { margin:0 auto; }
#top, #footer { width:100%; }
}
<% templateWidthStyles_fix_business %> 新ビジネステンプレート横幅調整

例)サイト幅が1500pxの場合
@media screen and (min-width: 1500px) {
#top .inner { margin-left:-750px; }
#topsubmenu { width:750px; }
#searchbox { width:375px; margin-left:375px; }
}
<% templateWidthStyles_fix_round %> 新角丸テンプレート横幅調整

例)サイト幅が1500pxの場合
@media screen and (min-width: 1500px) {
#wrapper, #searchbox { max-width:1500px; width:100% }
#topmenu ul { width:auto; max-width:100%; }
}

 

その他

タグ 説明 出力されるスタイル
<% topMenuWidth_fix %> トップメニューのリンクひとつの幅

リンクが5つの場合
width: 20%;

<% if:exists(topmenu) %>
<% else %>
<% /if %>
<% if:exists(searchbox) %>
<% else %>
<% /if %>

 トップメニューとサイト内検索の有無レイアウト調整

<% if:exists(topmenu) %>～<% /if %>は
「トップメニューが存在する場合」のみ出力

 

<% if:exists(searchbox) %>～<% /if %>
サイト内検索が存在する場合のみ出力

 

<% else %>～<% /if %>
存在しない場合の出力
<% fixResponsiveStyles %> 今後実装される予定のある要素の独自タグ