※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

【Volar】独自の装飾機能

見出しデザイン

ここで確認できるのは【Volarデザイン】テンプレートクールの表示イメージです。

 

他のテンプレートでの表示イメージは各DEMOサイトにてご確認ください。

 

H1見出しサンプル

こちらがH1の見出しです

 

H2見出しサンプル

【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)の見出しです。

※SIRIUSのデフォルトの設定ではH2とH3が同じデザインですが、【Volar】ではH2とH3のデザインを分けてます。

 

こちらがH3の見出しです。

 

こちらがH4の見出しです。

 

こちらがH5の見出しです。

フォント装飾

太字

太字設定としては本来は”強調”を意味する<strong>~</strong>タグ(SIRIUSの”B”のアイコンをクリック)がよく使われます。

 

しかしながら強調タグは使い過ぎてもよくないとも言われており、【Volar】では意味をもたない単なるデザイン上の太字用に、シンプルな太字設定を別途用意してます。

 

具体的には太字にしたい文字の前後を”f_bold”というクラス(class)で挟みます。

 

編集画面での書き方はコチラ

こちらは<span class="f_bold">太字</span>が入った文章

実際の表示例

こちらは太字が入った文章

※『クラスの設定』や『文字装飾設定』に登録しておくと一発入力が可能になります。

 

【Volar】ではもろもろの設定(のベース)が登録済みクラスの設定もご用意してます。

 

下線

アンダー文字(下線)には<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”の使い分け

特定の一部だけを装飾したい場合、その部分にclassidを付けておくことで装飾指定を一元化できます。

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の文字装飾設定をご紹介します。

 

『クラスの設定』についてはこちら↓の記事にまとめてあります。

SIRIUSのクラスの設定

SIRIUSのクラスの設定をご紹介します。

クラス(class)の付け方についてはマニュアルサイトでも詳しくご紹介してます。

 

フォント色

これ以降のクラス(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%サイズの文字

 

ここからはiPhone(スマホ)専用のフォントサイズ変更クラスになります。

 

使いどころは「横に長いテーブル(表)はスマホではフォントサイズを小さくした方が見やすい場合も」をご覧ください。

※スマホ閲覧時のみで有効な設定なので、PC&iPad(タブレット)で見た場合はどの文字も基本サイズ(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%サイズの文字です。

マーカー(蛍光ペン)類

【SIRIUS標準】

マーカー・イエロー

 

マーカー(細)・イエロー

 

マーカー・ピンク

 

マーカー(細)・ピンク

 

マーカー・レッド

 

マーカー(細)・レッド

 

マーカー・ブルー

 

マーカー(細)・ブルー

 

マーカー・グリーン

 

マーカー(細)・グリーン

 

マーカー・シアン

 

マーカー(細)・シアン

 

マーカー・オレンジ

 

マーカー(細)・オレンジ

 

マーカー・グレー

 

マーカー(細)・グレー

 

【Volar追加分】

<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>

半分の高さのマーカー・グレー

アニメーションするマーカーというのもあります。

指示アイコン

【SIRIUS標準】
詳細はコチラ
【Volar90度回転版】

<div class="arrow_orange2"詳細はコチラ></div>

詳細はコチラ

 

【SIRIUS標準】
詳細はコチラ
【Volar90度回転版】

<div class="arrow_red2">詳細はコチラ</div>

詳細はコチラ

 

【SIRIUS標準】
詳細はコチラ
【Volar90度回転版】

<div class="arrow_blue2">詳細はコチラ</div>

詳細はコチラ

 

【SIRIUS標準】
詳細はコチラ
【Volar90度回転版】

<div class="arrow_black2">詳細はコチラ</div>

詳細はコチラ

 

【Volar追加分】

<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にはデフォルトで水平線(区切り線)機能が搭載されてますが、その水平線の中央にテキストを挿入できる機能を付け加えました。

 

以下がそのデモです。

ここで分割

 

リンク付き画像の透明度変更

リンクの付いてる画像にマウスを乗せると透明度が変わります(PC表示時のみ)

(※ダミーリンクなのでクリックしてもこのページが表示されるだけです)

 

キャプチャ画像

 

別タブで開くリンクに専用アイコン

外部リンクを開く際によく使われる”別タブで開く”には、テキストの最後に専用のアイコンを付けることができます。

新規タブでページを開く

(※ダミーリンクなのでクリックしてもこのページが表示されるだけです)

 

リスト形式のアタマアイコンを拡張

リスト形式のアタマのアイコンは、テンプレートによって標準のものをそのまま使ったり新しいデザインを採用したりといろいろです。

 

※下記は【Volar】デフォルト・【Volarデザイン】クールのリスト形式です。

 

デフォルト

  • リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
  • リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
  • リスト
  • リスト

 

デフォルト(数字)

  1. リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
  2. リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
  3. リスト
  4. リスト

 

丸数字

<ol class="marusuji">

  1. リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
  2. リスト・リスト・リスト・リスト・リスト・リスト・リスト・リスト
  3. リスト
  4. リスト

 

二重丸

<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>

 

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像