【Volar】独自の装飾機能

キャプチャ画像

SIRIUSに標準で搭載されてる文字装飾機能以外にも
【Volar】独自の文字装飾機能をいくつか用意しました。


独自の装飾機能

見出しデザイン

※ここで確認できるのはデフォルトタイプの表示イメージです。

 

ビジネスタイプ角丸タイプでの表示イメージを確認したい場合はDEMOサイトをご覧ください。

 

こちらがH1の見出しです

ちょっと長めのサンプルテキストもご用意しました。

 

改行せずにそのままテキストを打ち込んでるので行間の空き具合もわかるかと思います。

こちらがテキスト折り返しバージョンH1の見出しです。こちらがテキスト折り返しバージョンH1の見出しです。

 

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

 

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

こちらがテキスト折り返しバージョンH2の見出しです。こちらがテキスト折り返しバージョンH2の見出しです。

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

こちらがテキスト折り返しバージョンH3の見出しです。こちらがテキスト折り返しバージョンH3の見出しです。

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

こちらがテキスト折り返しバージョンH4の見出しです。こちらがテキスト折り返しバージョンH4の見出しです。

こちらがH5の見出しです。
こちらがテキスト折り返しバージョンH5の見出しです。こちらがテキスト折り返しバージョンH5の見出しです。
こちらがH6の見出しです。
こちらがテキスト折り返しバージョンH6の見出しです。こちらがテキスト折り返しバージョンH6の見出しです。

 

フォント装飾について

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

 

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

 

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

 

具体的な書き方はコチラ。

 

<span class="f_bold">太字</span>

 

またアンダー文字(下線)には<u>~</u>SIRIUSの”U”のアイコンをクリック)が割り当てられてます。

 

しかしながら<u>~</u>を使うと文字とアンダーラインがくっつき過ぎて若干見にくいので、
少し間を開けた下線設定も別途用意してます。

 

書き方はコチラ。

 

<span class="kasen_blue">下線設定</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>

 

このテキストに下線効果を付けてみました。

<span class="kasen_green">下線</span>

 

このテキストに下線効果を付けてみました。

<span class="kasen_gray">下線</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(シリウス)のクラスの設定 - SIRIUSでホームページ作成

SIRIUS(シリウス)のクラスの設定の使い方をご紹介します。

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

 

フォント色とサイズの組み合わせいろいろ

こちらのクラス(class)ももちろんテンプレートに設定済みです。

明るい赤文字です。

<span class="f_red">明るい赤文字</span>

 

明るい赤文字・太字です。

<span class="f_red f_bold">明るい赤文字・太字</span>

 

明るい赤文字・太字・サイズ大です。

<span class="f_red f_bold f_130">明るい赤文字・太字・サイズ大</span>

 

暗めの赤文字です。

<span class="f_red2">暗めの赤文字</span>

 

暗めの赤文字・太字です。

<span class="f_red2 f_bold">暗めの赤文字・太字</span>

 

暗めの赤文字・太字・サイズ大です。

<span class="f_red2 f_bold f_130">暗めの赤文字・太字・サイズ大</span>

 

青文字です。

<span class="f_fblue">青文字</span>

 

青文字・太字です。

<span class="f_blue f_bold">青文字・太字</span>

 

青文字・太字・サイズ大です。

<span class="f_blue f_bold f_130">青文字・太字・サイズ大</span>

 

基本サイズの85%サイズの文字です。

<span class="f_85">85%サイズの文字</span>

 

基本サイズの90%サイズの文字です。

<span class="f_90">90%サイズの文字</span>

 

基本サイズの95%サイズの文字です。

<span class="f_95">95%サイズの文字</span>

 

基本サイズの大きさ(18px)の文字です。

<span class="f_100">大きさ(18px)の文字</span>

 

基本サイズの110%サイズの文字です。

<span class="f_110">110%サイズの文字</span>

 

基本サイズの120%サイズの文字です。

<span class="f_120">120%サイズの文字</span>

 

基本サイズの130%サイズの文字です。

<span class="f_130">130%サイズの文字</span>

 

基本サイズの140%サイズの文字です。

<span class="f_140">140%サイズの文字</span>

 

基本サイズの150%サイズの文字です。

<span class="f_150">150%サイズの文字</span>

 

ここからはiPhone(スマホ)専用のフォントサイズ変更クラスになります。
使いどころはこちらの記事をご覧ください。

※PC&iPad(タブレット)で見た場合はどの文字も基本サイズ(18px)のままで変化なしになります。

 

基本サイズの80%サイズの文字です。

<span class="f_80sp">80%サイズの文字</span>

 

基本サイズの85%サイズの文字です。

<span class="f_85sp">85%サイズの文字</span>

 

基本サイズの90%サイズの文字です。

<span class="f_90sp">90%サイズの文字</span>

 

基本サイズの95%サイズの文字です。

<span class="f_95sp">95%サイズの文字</span>

 

マーカー(蛍光ペン)類

SIRIUS標準マーカー・イエロー(蛍光ペンのアイコン)

(※他の色も実装されてます)

 

SIRIUS標準マーカー(細)・イエロー(蛍光ペンのアイコン)

(※他の色も実装されてます)

 

半分の高さのマーカー・イエロー

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

 

かすれた感じのマーカー・イエロー

<span class="marker_kasure_yellow">かすれた感じのマーカー・イエロー</span>

 

かすれた感じのマーカー・ピンク

<span class="marker_kasure_pink">かすれた感じのマーカー・ピンク</span>

 

かすれた感じのマーカー・レッド

<span class="marker_kasure_red">かすれた感じのマーカー・レッド</span>

 

かすれた感じのマーカー・ブルー

<span class="marker_kasure_blue">かすれた感じのマーカー・ブルー</span>

 

かすれた感じのマーカー・グリーン

<span class="marker_kasure_green">かすれた感じのマーカー・グリーン</span>

 

かすれた感じのマーカー・シアン

<span class="marker_kasure_cyan">かすれた感じのマーカー・シアン</span>

 

かすれた感じのマーカー・オレンジ

<span class="marker_kasure_orange">かすれた感じのマーカー・オレンジ</span>

 

かすれた感じのマーカー・グレー

<span class="marker_kasure_gray">かすれた感じのマーカー・グレー</span>

 

指示アイコン

詳細はコチラ

<span class="arrow_red_shiji"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="arrow_blue_shiji"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="arrow_green_shiji"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="arrow_orange_shiji"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="finger_red"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="finger_blue"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="finger_green"><a href="#">詳細はコチラ</a></span>

 

詳細はコチラ

<span class="finger_orange"><a href="#">詳細はコチラ</a></span>

 

その他の装飾設定

文字以外のオリジナル装飾も用意しました。

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

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

 

キャプチャ画像

 

リンクにマウスを乗せるとふわっと色が変わります。

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

 

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

新規タブでページを開く

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

 

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

(※DEMOサイトでもご確認できます)

 

デフォルト

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

 

デフォルト(数字)

  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>

キャプチャ画像

おススメ!

 

背景黄・フォント赤バージョン

<div class="onepoint_box">

<img src="<% pageDepth %>img/画像.jpg" alt="○○" />

<div class="ribbon_area">

<span class="onepoint_text_yellow">おススメ!</span>

</div>

</div>

キャプチャ画像

ランキング1位!

 

背景青・フォント白バージョン

<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】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替