独自の装飾
SIRIUSに標準で搭載されてる文字装飾機能に加えて、【Volar】独自の文字装飾機能も多数用意してます。
見出しデザイン
ここで確認できるのは【Volar】クールの表示イメージです。
他のテンプレートでの表示イメージは各DEMOサイトにてご確認ください。
こちらがH1の見出しです
【Volar】クールと【Volar】アートレスに限ってですが、H2見出しに派生デザインを設けてます。
テンプレートの該当箇所をこちらで用意した独自タグで置換するだけでH2見出しデザインを一気に変更できます。
なお【Volar】のH2見出しは記事タイトル1,記事タイトル2,記事タイトル3…が該当します。
ただし現状では記事1の記事タイトル1のみですが、デフォルトのH2見出ししか表示できません。
（原因は不明です）
【Volar】では原則として記事タイトル1に何らかのテキストを記入することはない前提なので今後修正の予定もありません。
※H2派生デザイン
こちらはH2（デフォルト）の見出しです。
こちらはH2（h2sub1）の見出しです。
こちらはH2（h2sub2）の見出しです。
こちらはH2（h2sub3）の見出しです。
こちらはH2（h2sub4）の見出しです。
こちらはH2（h2sub5）の見出しです。
こちらはH2（h2sub6）の見出しです。
こちらがH3の見出しです。
こちらがH4の見出しです。
こちらがH5の見出しです。
※SIRIUSのデフォルトの設定ではH2とH3が同じデザインですが、【Volar】ではH2とH3のデザインを分けてます。
テキスト装飾
太字
太字設定としては本来は”強調”を意味する<strong>～</strong>タグ（SIRIUSの”B”のアイコンをクリック）がよく使われます。
しかしながら【Volar】では意味をもたない単なるデザイン上の太字用に、シンプルな太字設定を別途用意してます。
具体的には太字にしたい文字の前後を”f_bold”というクラス（class）で挟みます。
こちらは<span class="f_bold">太字</span>が入った文章
こちらは太字が入った文章
下線
アンダー文字（下線）には<u>～</u>（※”U”のアイコンをクリック）が割り当てられてます。
しかしながら<u>～</u>を使うと文字とアンダーラインがくっつき過ぎて若干見にくいので、少し間を開けた下線設定を別途用意してます。
<span class="kasen_xxx">下線</span>
例えば、
このテキストに<span class="kasen_blue">青の下線</span>効果を付けてみました。
このテキストに青の下線効果を付けてみました。
<span class="kasen_pink">下線</span>
このテキストにピンクの下線効果を付けてみました。
<span class="kasen_red">下線</span>
このテキストに赤の下線効果を付けてみました。
<span class="kasen_yellow">下線</span>
このテキストに黄色の下線効果を付けてみました。
<span class="kasen_orange">下線</span>
このテキストにオレンジの下線効果を付けてみました。
”classとid”の使い分け
特定の一部だけを装飾したい場合、その部分にclassやidを付けておくことで装飾指定を一元化できます。
※classの名前はドット（.）で始まりidはシャープ（#）で始まります。
たとえばスタイルシート（【テンプレート】→【スタイルシート編集】で開く画面）内に『f_red』というclass名があったとします。
そこに書いてあるのが
.f_red {
color: red;
}
だったとします。
これは『f_red』というクラス名がついてる部分はフォント色を赤にする（color: red;）というものなんですが、これを行全体のテキストに適用する時は、記事内に
<p class="f_red">私の好きな色は赤です。</p>
こんな感じで書きます。
（※pは行を意味します）
行全体ではなく行の中の一部だけにclassを設定したい時、たとえば上の例なら「赤」というテキストだけフォント色を赤にしたいような場合は
私の好きな色は<span class="f_red">赤</span>
このように”span”という文字を付けて書きます。
（spanについてはあまり深く考えず”文の中の一部の装飾にはspanを付ける”ぐらいに思っておくといいでしょう）
そしてこのclassは繰り返し使えます。
つまり他にもフォントを赤くしたい箇所があれば何度使ってもいいのです。
これに対しidは一度しか登場しません。
たとえばヘッダー部分に使われてる<div id="header">なんかはそのいい例です。
ヘッダーはページ内に2つ出てくることはありませんから。
仮にここで『ヘッダー部の背景色は赤にする』なんて設定を付けたい場合はスタイルシートに
#header {
background-color:red;
}
というふうにドット（.）ではなくシャープ（#）をアタマにつけて指定します。
どこにクラスをつけてどこにidをつけるかははっきり言って慣れです。
迷ったらクラスを付けておけば間違いないです。
【Volar】は基本的にクラス（class）を用いた装飾設定になってます。
SIRIUSの場合、頻繁に使うクラス（class）については『文字装飾設定』や『クラスの設定』や『定型文』などを利用するとより使い勝手がよくなります。
『文字装飾設定』についてはこちら↓の記事にまとめてあります。
SIRIUSの文字装飾設定をご紹介します。
『クラスの設定』についてはこちら↓の記事にまとめてあります。
SIRIUSのクラスの設定をご紹介します。
テキストカラー（フォント色）
これ以降の設定（クラス・class）もテンプレートに設定済みです。
<span class="f_xxx">文字色</span>
<span class="f_red">明るい赤文字</span>です。
明るい赤文字です。
<span class="f_red2">暗めの赤文字</span>
暗めの赤文字
<span class="f_blue">青文字</span>
青文字
<span class="f_yellow">黄色文字</span>
黄色文字
こういう背景では目立ちます。
テキスト（フォント）サイズ
<span class="f_xxx">フォントサイズ</span>
<span class="f_85">85%サイズの文字</span>です。
基本サイズの85%サイズの文字です。
<span class="f_90">90%サイズの文字</span>
基本サイズの90%サイズの文字
<span class="f_95">95%サイズの文字</span>
基本サイズの95%サイズの文字
<span class="f_100">大きさ（18px）の文字</span>
基本サイズの大きさ（18px）の文字
<span class="f_110">110%サイズの文字</span>
基本サイズの110%サイズの文字
<span class="f_120">120%サイズの文字</span>
基本サイズの120%サイズの文字
<span class="f_130">130%サイズの文字</span>
基本サイズの130%サイズの文字
<span class="f_140">140%サイズの文字</span>
基本サイズの140%サイズの文字
<span class="f_150">150%サイズの文字</span>
基本サイズの150%サイズの文字
ここからはスマホ専用のフォントサイズ変更クラスになります。
使いどころは「スマホ専用フォントクラス」をご覧ください。
※スマホ閲覧時のみで有効な設定なので、PCやタブレットで見た場合はどの文字も基本サイズ（18px）のままで変化なしになります。
<span class="f_80sp">80%サイズの文字</span>
基本サイズの<span class="f_80sp">80%サイズの文字</span>です。
基本サイズの80%サイズの文字です。
<span class="f_85sp">85%サイズの文字</span>
基本サイズの85%サイズの文字
<span class="f_90sp">90%サイズの文字</span>
基本サイズの90%サイズの文字
<span class="f_95sp">95%サイズの文字</span>
基本サイズの95%サイズの文字です。
マーカー（蛍光ペン）類
マーカー・イエロー
マーカー・イエロー（細）
マーカー・ピンク
マーカー・ピンク（細）
マーカー・レッド
マーカー・レッド（細）
マーカー・ブルー
マーカー・ブルー（細）
マーカー・グリーン
マーカー・グリーン（細）
マーカー・シアン
マーカー・シアン（細）
マーカー・オレンジ
マーカー・オレンジ（細）
マーカー・グレー
マーカー・グレー（細）
<span class="marker_half_yellow">半分の高さのマーカー・イエロー</span>
半分の高さのマーカー・イエロー
<span class="marker_half_pink">半分の高さのマーカー・ピンク</span>
半分の高さのマーカー・ピンク
<span class="marker_half_red">半分の高さのマーカー・レッド</span>
半分の高さのマーカー・レッド
<span class="marker_half_blue">半分の高さのマーカー・ブルー</span>
半分の高さのマーカー・ブルー
<span class="marker_half_green">半分の高さのマーカー・グリーン</span>
半分の高さのマーカー・グリーン
<span class="marker_half_cyan">半分の高さのマーカー・シアン</span>
半分の高さのマーカー・シアン
<span class="marker_half_orange">半分の高さのマーカー・オレンジ</span>
半分の高さのマーカー・オレンジ
<span class="marker_half_gray">半分の高さのマーカー・グレー</span>
半分の高さのマーカー・グレー
※アニメーションするマーカーというのもあります。
指示アイコン
<div class="arrow_orange2"詳細はコチラ></div>
<div class="arrow_red2">詳細はコチラ</div>
<div class="arrow_blue2">詳細はコチラ</div>
<div class="arrow_black2">詳細はコチラ</div>
<div class="arrow_red_shiji">詳細はコチラ</div>
<div class="arrow_red_shiji2">詳細はコチラ</div>
<div class="arrow_blue_shiji">詳細はコチラ</div>
<div class="arrow_blue_shiji2">詳細はコチラ</div>
<div class="arrow_orange_shiji">詳細はコチラ</div>
<div class="arrow_orange_shiji2">詳細はコチラ</div>
その他の装飾設定
テキスト付き区切り線
SIRIUSにはデフォルトで水平線（区切り線）機能が搭載されてますが、その水平線の中央にテキストを挿入できる機能を付け加えました。
以下がそのデモです。
<div class="bunkatsu_text">ここで分割</div>
リンク付き画像の透明度変更
リンクの付いてる画像にマウスを乗せると透明度が変わります。（PC表示時のみ）
（※ダミーリンクなのでクリックしてもこのページが再表示されるだけです）
別タブで開くリンクに専用アイコン
外部リンクを開く際によく使われる”別タブで開く”には、テキストの最後に専用のアイコンを付けることができます。
（※ダミーリンクなのでクリックしてもこのページが再表示されるだけです）
リスト形式のアタマアイコンを拡張
リスト形式のアタマのアイコンは、テンプレートによって標準のものをそのまま使ったり新しいデザインを採用したりといろいろです。
※下記は【Volar】クールのリスト形式です。
デフォルト
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト
- リスト
デフォルト（数字）
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト
- リスト
丸数字
<ol class="marusuji">
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト
- リスト
二重丸
<ul class="circle">
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト
- リスト
チェックマーク
<ul class="checklist">
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
- リスト
- リスト
画像にワンポイント
画像の左上にワンポイントテキストを挿入できます。
リボンの位置・カラーは固定ですが、テキストは変更可能です。
背景赤・フォント黄バージョン
おススメ！
<div class="onepoint_box">
<img src="<% pageDepth %>img/画像.jpg" alt="○○" />
<div class="ribbon_area">
<span class="onepoint_text_red">おススメ！</span>
</div>
</div>
背景黄・フォント赤バージョン
ランキング1位！
<div class="onepoint_box">
<img src="<% pageDepth %>img/画像.jpg" alt="○○" />
<div class="ribbon_area">
<span class="onepoint_text_yellow">おススメ！</span>
</div>
</div>
背景青・フォント白バージョン
人気商品！
<div class="onepoint_box">
<img src="<% pageDepth %>img/画像.jpg" alt="○○" />
<div class="ribbon_area">
<span class="onepoint_text_blue">おススメ！</span>
</div>
</div>
inoreader
