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

1カラムページ(オプション機能)

記事内に設定したH2見出しをフル幅で表示。

 

H2フル幅見出し

 

テキストと画像を並列で表示

画像は自動伸縮仕様になってます。

画像の周囲に付いてる赤枠は画像サイズの確認や歪みなどの参考用に付けたもので、縦横とも10pxになってます。

このオプションだけでなく他のオプションでもH2見出し同様フル幅での背景色が設定可。

【Volar】角丸タイプ・【Volar】アートレスに関しては他のテンプレートのような画面フル幅ではなくテンプレート表示領域のフル幅になります。

 

中央寄せのH3タイトル

キャプチャ画像

サブ見出し<画像右>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像の横幅は最大で500px。

 

キャプチャ画像

サブ見出し<画像左>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像の位置は左右どちらでもOK。

画像の横幅が500pxを超えた場合は500pxに縮小されて表示されます。

 

キャプチャ画像

サブ見出し<画像右>

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像が500pxより小さい場合はそのままのサイズで表示されます。

 

画像(大)付ブロック

①枠付き

ブロックの周りに枠線が付きます。

 

<3列画像大・枠付き>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像サイズは350×150pxあたりが等倍表示になります。

サンプル画像
ダミータイトル・ダミータイトル2行またぎ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

一番大きい高さに合わせて高さが揃います。

 

ブロックの背景にグレー系(?)の色が付いてますが、変更も可能です。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

1列3ブロック・2段6ブロックまで作成可。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

ブロック数が奇数だと中央寄せで表示されます。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

元の画像が小さいと枠内に合うよう拡大されてしまいます。

②シャドウ

枠を線ではなくシャドウ(影)にしたバージョンです。

 

<3列画像大・シャドウ>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

上の影付きバージョンです。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。

③枠なし

枠のないプレーンなバージョンです。

 

<3列画像大・枠なし>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

枠なしプレーンバージョンです。

サンプル画像
ダミータイトル・ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

④フル画像(3列)

こちらはブロック全体を画像で覆ったバージョンです。

 

エリアの背景にはフル幅の背景色だけでなくフル幅で画像も設置できます。

 

<フル画像・3列>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

 

⑤フル画像(4列)

上のバージョンの4列仕様です。

ブロックサイズは同じく高さ350pxで固定です。

1列画像4枚のみのブロックになります。

<フル画像・4列>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。

ダミータイトル
サンプル画像

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。

サンプル画像
ダミータイトル

この文章はダミーです。

画像(小)付ブロック

①画像(小)3

画像枠は80×80pxの正方形。

背後にグレーの正円が付きます。

 

<3列画像小・シャドウ>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像によってはイメージに合わない場合もあります。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像サイズが80×80px以外だとサイズによっては上のように正方形にならない場合もあります。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

自作のPNG(透過)画像かフリー素材のアイコン(PNG形式)などを使うとしっくりきます。(※ICON HOIHOI)

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
枠はシャドウタイプのみです。(※外すことも可)

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

②画像(小)2

上の2列バージョン。

 

1列2ブロック、2段まで表示可。

 

<2列画像小・シャドウ>

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

枠はシャドウタイプのみです。(※外すことも可)

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。

 

文字の大きさ、量、字間、行間等を確認するために入れています。

サンプル画像
ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

③画像(小)4列・枠なし

こちらは厳密には画像(小)ではなくFont Awesomeを使用したタイプになります。

 

1列4ブロック、2段まで表示可。

 

【Volar】はFont Awesomeを導入済みなので、該当するコードを入れるだけで表示されます。

例えば下の左上のフォルダのような画像はFont Awesomeで出力された<i class="far fa-folder-open"></i>というコードを指定位置にコピー&ペーストしたものです。

<4列画像小・枠なし>

ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

画像ではなくFont Awesomeを使うパターンになります。

タイトル

この文章はダミーです。

 

ちょっとした説明用に4列・最大2段の表示エリアになってます。

ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

文字サイズは標準の90%の大きさ。

ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

枠付きはありません。

ダミータイトル

この文章はダミーです。

 

文字の大きさ、量、字間、行間等を確認するために入れています。

ダミータイトル

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

リスト表示

こちらはシンプルなリスト表示になります。

 

主な機能

  • この文章はダミーです。
    文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

    この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
  • この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

 

1カラム専用CTA

1カラム専用CTAです。

 

左側に画像、右側にサブ画像やテキストエリアを設けてます。(※PC表示時)

画像ブロック横幅は最大400px。

 

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

 

入手方法についてはコチラ↓をご覧ください。(※クリック不可)

【Volar】入手方法

※スマホでは縦1列での表示になります。

 

キャプチャ画像

 

FAQ

LP仕様のFAQは開閉機能をOFFにしてあります。

(アコーディオン形式で開閉機能を復活させることも可)

 

FAQ

(※質問テキスト)

(※回答テキスト)

(※質問テキスト)

(※回答テキスト)

(※質問テキスト)

(※回答テキスト)

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

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

【Volar】の詳細および【Volar】の入手方法についてはコチラ↓をご覧ください