導入事例(保育園)-SIRIUS2

導入事例(保育園)-SIRIUS2

SIRIUS2で「保育園のホームページ」を再現した際の再現度をチェックしてみました。
 

アイキャッチ画像

SIRIUS2公式サイトに載ってる「導入事例・保育園のホームページ」をできるだけSIRIUS2の標準機能を使いながらの再現にこだわってみました。

 

実際の再現ページはこちら

(※トップページのみです)

 

はたしてSIRIUS2標準の機能だけでどこまで再現できたのか。


比較・考察

ご覧になる前に

再現にあたって使用したSIRIUS2の機能やその他のカスタマイズはあくまで筆者のやり方の一例であって、最善のやり方とは限りません

この点、予めご了承下さい。

 

がSIRIUS2公式サイトの導入事例のキャプチャ画像で、当サイトで再現したページのキャプチャ画像です。

使用テンプレートは「ポップテンプレート」です。

 

レイアウトは「1カラム(ワイド)」。

 

イメージ画像

 

結果ですが、今回の事例の標準機能使用率はレベルに応じて異なってきます。

  1. おおむね導入事例に似た感じのレイアウトであればいい→95%
  2. 雰囲気はある程度マネしたい→85%
  3. ほぼほぼ導入事例通りの再現→70%

といったところです。

もしかしたら現段階で筆者が見落としてるSIRIUS2の標準機能があるかもしれません。

わかり次第、情報はアップデートします。

 

ここからはSIRIUS2のどういった機能を使ってるのか、いくつかのブロックに分けてご紹介していきます。

 

アイコン・SIRIUS というマークが付いた箇所はSIRIUS2の機能を使用してます。

なおカスタムテンプレート【Volar2】「ベーステンプレート」での運用のみとなっておりますため、アイコン・Volar とあっても「ベーステンプレート」以外のテンプレートを使用している導入事例では【Volar2】の機能をたまたま流用できたかその場限りの臨時カスタマイズとご理解ください。

 

イメージ画像

縮小版

イメージ画像

 

①ロゴ画像

①のロゴ画像は、ロゴ画像がない場合はサイトタイトルが表示されます。

しかしながらロゴ画像があってもすぐ下にサイトタイトルが表示されてしまいます。

 

これを消すには導入事例・英語教室でご紹介してるように、<サイト全体>の【任意設定】の『ロゴ』の項目を空欄にします。

 

②ロゴ・メニューブロックの幅

アイコン・Volar

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

イメージ画像

 

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

イメージ画像

 

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

 

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

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

 

③お問合せボタン

アイコン・SIRIUS

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

 

④ヘッダー画像

こちらも導入事例・英語教室同様、ヘッダー画像は事前に文字入れ込みの画像を作成してあります。

それに伴い『レイアウト設定』の『ヘッダー』項目では「ヘッダーテキスト」を非表示に設定してます。

 

キャプチャ画像

 

 

 

キャプチャ画像

縮小版

キャプチャ画像

 

①見出し

アイコン・SIRIUS

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

 

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

 

②説明テキスト

アイコン・SIRIUS

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

 

③スライダー

アイコン・SIRIUS

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

 

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

 

キャプチャ画像

 

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

 

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

 

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

 

 

 

キャプチャ画像

縮小版

キャプチャ画像

 

①見出し

アイコン・SIRIUS

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

 

②テキスト・画像並列表記

アイコン・SIRIUS

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

 

③背景色

このブロックは「記事ブロック2」全部を使って記述してます。

 

アイコン・SIRIUS

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

 

 

 

キャプチャ画像

縮小版

キャプチャ画像

 

①②画像+テキスト並列表示

アイコン・SIRIUS

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

 

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

 

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

 

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

 

こちらが今回の設定。

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

 

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

 

キャプチャ画像

 

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

 

キャプチャ画像

 

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

 

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

 

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

 

キャプチャ画像

 

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

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

 

キャプチャ画像

 

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

 

キャプチャ画像

 

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

これで完成です。

 

キャプチャ画像

 

サイト管理人

筆者

 

背景が白バックだとプレビュー画面では全くわからないので、その都度内蔵ブラウザ等でチェックする必要があります。

 

③背景色

このブロックは「記事ブロック3」全部を使って記述してます。

 

アイコン・SIRIUS

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

 

アイコン・Volar

題材が「保育園」とくればテンプレートは穏やかなイメージの「ポップ」、フォントは丸ゴシック系、画像には丸みを持たせてということなんでしょう、導入事例はまさに典型的なイメージで作られてます。

 

そういった中で気付かれた方もいるんじゃないでしょうか。

画像の”角丸”処理はどうしてるのか」と。

 

実はSIRIUS2には”画像の詳細”内に『角丸処理』の項目があるんです。

(旧SIRIUSにはなかったので筆者はずーと見落としてました)

 

キャプチャ画像

 

ただしこれが使えるのは(おそらく)エディタ上だけだと思います。

 

たとえば<レイアウトボックス>ならエディタ内で画像指定が可能なので角丸処理もできちゃいます。

しかしながらパーツ画像レイアウト>のように、画像設定欄で画像を指定するタイプでは無理っぽいです。

 

ということで最初に考えられる解決策としては、

最初から角を丸めた画像を作成する

 

ただこれだと(透過情報を持たせられる)PNG画像での出力になるし拡張性も乏しくなります。

 

ということで再現サイトでは追加スタイルで角丸処理を行ってみました。

そのスタイルが

  1. 画像すべてを同じ形状の角丸にする
  2. ただしヘッダー画像は角丸処理をしない

というもの。

 

もちろんヘッダー画像まで角丸にしても問題はありません。

しかし今回は1カラム(ワイド)での表示なので角丸の必要性がなく、むしろ邪魔なので通常の角処理にしてます。

 

この設定を新たに付けるのはスタイルに詳しい方なら特段問題はないでしょう。

でもHTMLやCSSを知らない方にはおそらく難しいかと思います。

 

サイト管理人

筆者

 

そういう設定がデフォルトで搭載されるともっと便利になるんですけどね。

 

ボタンリンクも同様です。

ボタン機能の『角丸』をONにしても下の画像の”調整前”のような形状が限界です。

 

ちなみに導入事例のようにもっと丸みを帯びたボタンにするには”詳細設定”の『追記スタイル』に「border-radius: 50px」(※境界の丸み:半径50pxという意味)と加筆すれば丸くなります。

 

キャプチャ画像

 

サイト管理人

筆者

 

『角丸』ONだけでも充分柔らかな雰囲気にはなるので、敢えてもっと丸みを帯びさせなくても問題はないかと思います。

 

 

 

 

フッターエリア

アイコン・SIRIUS

①は普通に「更新履歴」機能で表示させてるだけです。

アイコン・SIRIUS

②の住所&電話番号はフリースペース・フッターに書き込んでます。