ダークモード

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

DarkMode確認用-独自の装飾機能

記事2

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

 

こちらがH1の見出しです

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

 

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

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

 

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

 

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

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

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

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

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

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

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

記事3

太字

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

 

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

 

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

 

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

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

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

 

SIRIUSカスタムテンプレート【Volar】では、もろもろの設定が登録済みクラスの設定もご用意してます。

 

下線

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

 

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

 

書き方はコチラ。

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

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

 

フォント色

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

明るい赤文字です。

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

 

暗めの赤文字です。

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

 

青文字です。

<span class="f_fblue">青文字</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>

 

フォント色とフォントサイズの複数組合せ

※それぞれのクラス設定を半角スペースで区切りながら連結させます。

 

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

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

 

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

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

 

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

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

 

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

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

 

青文字・太字です。

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

 

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

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

記事4

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

 

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

記事5

指示アイコン

SIRIUS標準

 

【Volar追加分】

※指示テキストの専用アイコンもFont Awesome

 

 

詳細はコチラ
詳細はコチラ
詳細はコチラ

記事6

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

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

 

キャプチャ画像

 

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

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

 

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

新規タブでページを開く

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

 

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

 

デフォルト

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

 

デフォルト(数字)

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

 

丸数字

<ol class="marusuji">

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

 

二重丸

<ul class="circle">

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

 

チェックマーク

<ul class="checklist">

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

記事7

画像の左上にワンポイントテキストを挿入できます。

リボンの位置・カラーは固定ですが、テキストは変更可能です。

 

 

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

キャプチャ画像

おススメ!

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