導入事例（保育園）-SIRIUS2

ロゴやメニューが表示されてる②の空間は1カラム（ワイド）時にこのデザインになるようなんですが、未調整だとかなり間が空いてしまいます。

 

しかもスマホではかなりの面積を占めてしまってバランスがとても悪いです。

 

そこで導入事例ほどではないですが幅（高さ）を少しだけ少し狭くする設定（スタイル）を加えてあります。

 

ただしこの設定はかなり面倒なのでおススメはしません。

現状でもレイアウト自体は問題ないですから。

導入事例・英語教室と同じく、「予約ボタン」は【全体設定】→【フリースペース】→『ヘッダー』を利用し、その中に記事装飾メニューの『ボタン』機能を使って作成してます。

ここは”H2見出し”でもいいし、通常のテキストでもよし。

 

テキスト部分は文字装飾メニューの『装飾』でテキストサイズや太字設定・中央寄せなんかも調整できます。

ここも文字装飾メニューの『装飾』でデザインしてます。

ここはパーツ＜画像スライダー＞を使って表示してます。

 

雰囲気としては”画像をクリックするとどこかのページに飛ぶ”というよりは”画像を大きく見せる”という感じなのでそういう設定にしました。

 

 

画像をクリックすると拡大表示するタイプは大きく分けて「A：オリジナルの画像が保存されてるページが表示される」「B：そのページ内でシンプルに画像が拡大表示される」の2種類あります。

 

SIRIUS2の場合は「A」になり、元に戻すにはブラウザの「戻る」ボタンで元のページに戻れます。

 

しかしながら一見すると「閉じる」ボタンがありそうな雰囲気なので利用者は”最初は”とまどいを感じるかもしれません。

もう何度もご紹介してきたように、”H2見出し”でもテキスト装飾でもどちらでもいけます。

ここも何度もご紹介しているSIRIUS2のパーツ＜画像レイアウト＞を使えば作成可能です。

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

このブロックは全体を＜レイアウトボックス＞で作成してます。

 

右側の”白バック”ブロックですが、ここは白画像を背景にしてその上にテキストを乗っけるというやり方もあります。

 

ですが今回はSIRIUS2に昔から搭載されてる記事装飾メニュー内の＜ボックス＞機能を使って作成してみました。

 

ただし＜ボックス＞内の『◯◯枠』に関してはデフォルト状態ですべてボーダーや背景色が付いてしまってるので、今回は「ユーザー設定ボックス」を使ってカスタマイズしていきます。

 

こちらが今回の設定。

＜レイアウトボックス＞内の『1列目のコンテンツ』には右上の各エディタを起動して画像を挿入します。

 

その際、左側の横幅が少し広くなるよう①の画像には『横幅の調整』で60%を指定してみました。

 

 

右側の②”白バック”ブロックは『2列目のコンテンツ』を選択した状態で右上の各エディタを起動します。

 

 

エディタ内では先にテキストやボタンリンクを作成しておきます。

 

その後にそれらを範囲選択して記事装飾メニューのボックス→ユーザー設定ボックスをクリックします。

 

【ユーザー設定ボックス】では下のような設定を付けてみました。

 

 

「OK」をクリックしてエディターに反映させます。

（赤線部分が【ユーザー設定ボックス】の設定に該当します）

 

 

もう1個の”白バック”ブロックも同様に作成し、『2列目のコンテンツ』に反映させます。

 

 

さらに左側の画像と右側の”白バック”ブロック群との間に間をあけたいので、少し余白を付けておきます。

これで完成です。

 

 

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