導入事例（英語教室）-SIRIUS2

「お問合せボタン」は【全体設定】→【フリースペース】→『ヘッダー』を利用し、その中に記事装飾メニューの『ボタン』機能を使って作成してます。

ただし標準機能ではテキストの上下の余白調整ができません。

それだとちょっとバランスが悪いので、余白調整用のスタイルを別途追加して高さを低くしてあります。

「こんなお悩みはありませんか？」→記事装飾メニューの『装飾』を使って「色・サイズ・強調」で調整後に『行揃え』で「中央寄せ」。

その下の3行テキストは『リスト（チェックリスト）』を利用。

最後の画像は画像加工ソフトで500px程度にまで縮めてファイルサイズを軽減したフリー素材に、テキスト同様「中央寄せ」をかけてます。

ということで、ブロック全体に

• PCでは全体の横幅を400～500pxにして、さらにコンテンツ幅の中心に表示させる。
• スマホでは全体の幅を画面幅いっぱいにして、かつ中心に表示させる。

という設定（スタイル）を加筆してます。

筆者

 

確かSIRIUS2にはブロック自体の横幅を縮める機能はなかったハズかと。

その記事ブロック1の＜ブロック設定＞で『記事のワイド化』→ON、『ブロックの背景色』に色を指定してます。

ということでここはマイナスマージン（margin: -xxxem;）というちょっと特殊な手法を使って強制的に間隔を詰めてみました。

【Volar2】では通常のマージンの他にマイナスマージン用の設定もご用意してます。

間を詰めたいテキストを選択した後、クラスの設定やカスタム文字装飾に登録してある（マイナス）マージン用のクラスを選択するだけで前後の間隔が詰まります。

ここはSIRIUS2の＜見出しデザイン＞を使えばデザイン可能です。（※スタイル17）

ここはテキスト量が短いので通常の”中央寄せ”しか使ってませんが、もしも横幅を制限するなら前述の”横幅決め打ち”機能を使う必要があります。

ここはSIRIUS2のパーツ＜画像レイアウト＞を使えば再現可能です。

①の2つのテキストはこれまでご紹介してきたやり方と同じです。

②～⑤は全部SIRIUS2のパーツ＜口コミ＞を使って作成してます。

ただし＜口コミ＞の編集設定では（顔）画像を丸く表示する機能はないようなので、別途画像を丸く表示するスタイルを追加して丸型で表示させてます。

（画像加工ソフトで最初から丸形で作成すればその必要はありません）

＜口コミ＞リストはそのままではコンテンツ幅いっぱいに広がってしまうため、＜レイアウトボックス＞機能を使って2列表示にしてあります。

その中の『1列目のコンテンツ』に①＜口コミ＞用独自タグを、『2列目のコンテンツ』に②＜口コミ＞用独自タグを入れて2列表記を実現させてます。

筆者

 

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

またこの口コミブロックは「記事ブロック3」を全部使って、先ほどと同じように『記事のワイド化』と『ブロックの背景色』を使って背景色を設定してます。

見出しはもう説明不要ですね。

②はSIRIUS2のパーツ＜FAQ＞で作成してます。

またここでも”横幅決め打ち”機能を使って横幅を調整してます。

③のブロックは「記事ブロック5」を全部消費してます。

ここの背景色も＜ブロック設定＞を利用してますが、背景色が暗めの色なので『ブロックの文字色』に”白”の設定を追加してます。

④のボタンリンクは記事装飾メニューの『ボタン』機能で作れはするんですが、ボタンの背景色を”白”にする設定がないためここは導入事例と違って色を付けたままにしてます。

（白にすることもできますが、けっこう面倒くさいのでやめました）

⑤はフリースペース・フッターに書き込んでます。

⑥はフッターメニューに書き込んだものが表示されてます。