SIRIUS2公式サイトに載ってる「導入事例・ネイルサロンのホームページ」をできるだけSIRIUS2の標準機能を使いながらの再現にこだわってみました。
実際の再現ページはこちら。
（※トップページのみです）
はたしてSIRIUS2標準の機能だけでどこまで再現できたのか。
比較・考察
ご覧になる前に
再現にあたって使用したSIRIUS2の機能やその他のカスタマイズはあくまで筆者のやり方の一例であって、最善のやり方とは限りません。
この点、予めご了承下さい。
左がSIRIUS2公式サイトの導入事例のキャプチャ画像で、右が当サイトで再現したページのキャプチャ画像です。
使用テンプレートは「エレガントテンプレート」です。
レイアウトは「1カラム（ワイド）」。
結果としては今回の事例の標準機能使用率はおよそ98％といったところです。
もしかしたら現段階で筆者が見落としてるSIRIUS2の標準機能があるかもしれません。
わかり次第、情報はアップデートします。
ここからはSIRIUS2のどういった機能を使ってるのか、いくつかのブロックに分けてご紹介していきます。
というマークが付いた箇所はSIRIUS2の機能を使用してます。
なおカスタムテンプレート【Volar2】は「ベーステンプレート」での運用のみとなっておりますため、
とあっても「ベーステンプレート」以外のテンプレートを使用している導入事例では【Volar2】の機能をたまたま流用できたかその場限りの臨時カスタマイズとご理解ください。
縮小版
①ロゴ画像
①のロゴ画像は、ロゴ画像がない場合はサイトタイトルが表示されます。
しかしながらロゴ画像があってもすぐ下にサイトタイトルが表示されてしまいます。
これを消すには導入事例・英語教室でご紹介してるように、＜サイト全体＞の【任意設定】の『ロゴ』の項目を空欄にします。
②ヘッダー上部の高さ
ロゴやメニューが表示されてる②の空間は未調整だとかなり間が空いてしまってしまりがなかったので、導入事例ほどではないですが幅（高さ）を少しだけ少し狭くしてみました。
（※ここは割と複雑なスタイル調整になるので敷居はちょっと高めです。でも好みの問題なのであえてトライする必要はないです）
③予約ボタン
筆者
メニュー数が多かったりブラウザの幅次第ではロゴ画像の下に移動する場合もあります。
「予約ボタン」は標準設定だと余白が多くボタン自体が大きめになってしまうため導入事例・英語教室同様、余白調整用のスタイルを別途追加してます。
④ヘッダー画像
こちらも導入事例・英語教室同様、ヘッダー画像は事前に文字入れ込みの画像を作成してあります。
それに伴い『レイアウト設定』の『ヘッダー』項目では「ヘッダーテキスト」を非表示に設定してます。
画像加工ソフトならAffinity Photoがおススメです。
機能変更
アップデート（Ver1.100）にてデフォルトでヘッダー画像全てが表示されるようになりました。
⑤狭いエリアでの表示ブロック
テキストの中身に関しては
記事装飾メニューの『装飾』を使って「色・サイズ・強調」で調整したり『行揃え』で「中央寄せ」にしてみたり特に難しいことはありません。
「CONCEPT」のテキストは導入事例・英語教室同様、”H2見出し（H2）”にしてからテキスト部分だけを『装飾』で「色・サイズ・強調」調整する方法もあります。
（中央寄せはH2見出しにした段階で実行されます）
ただしこれが可能なのは（「ベーステンプレート」と同じく）レイアウトが1カラム（ワイド）の時だけのようです。
1カラムや2カラムではH2見出しの後ろに背景色が付いてしまうため、テキストだけの表示にできないのです。
（スタイルを加筆すればできないこともないですけど）
ただしレイアウトに関してはSIRIUS2の機能だけでは再現できません。
ということで、ブロック全体に
- PCでは全体の横幅を400～500pxにして、さらにコンテンツ幅の中心に表示させる。
- スマホでは全体の幅を画面幅いっぱいにして、かつ中心に表示させる。
という”横幅決め打ち”設定（スタイル）を加筆してます。
筆者
確かSIRIUS2にはブロック自体の横幅を縮める機能はなかったハズかと。
⑥背景模様
⑥周辺を拡大したのがこちらの画像。（わかりやすいよう多少加工してます）
よく見ると模様がついてますね。
これは「エレガントテンプレート」を使用すると強制的に表示される背景画像みたいです。
（導入事例でもよーーーーく見るとうっすらと見えるような見えないような...）
これを非表示にしようと設定を探してみたんですが、どうもSIRIUS2にはそのような設定項目が見当たらないようです。
そのため消そうと思ったら独自スタイルでの調整が必要です。
⑦追従型CTA？
導入事例をよく見るとヘッダー画像右下あたりに⑦の画像が見えてます。
これはおそらく追従型CTAかと思われます。
再現サイトでも導入してみました。（PC表示時のみ）
テキスト・画像並列表記
ここはSIRIUS2のパーツ＜画像レイアウト＞を使えば作成可能です。
「Read More」ボタンはコンテンツ作成画面内で右上にある各エディタをクリックして、記事装飾メニューの『ボタン』機能で作成したものです。
（専用コードとして自動入力されたもの）
①見出し＆概要
①は記事装飾メニューの『装飾』や『行揃え』などを使って作成できます。
ただし文章が長くなっても青枠で囲ったエリア内だけでの表示にしたいのなら、前述した”横幅決め打ち”機能でエリアを限定させる必要があります。
②ギャラリー表示
②のブロックは（導入事例は画像なので想像ですが）おそらくギャラリーとしての機能かと思われ、SIRIUS2のパーツ＜画像ギャラリー＞で作成してみました。
クリックすると画像が拡大されます。
またこのブロックは「記事ブロック2」全部を使って記述してます。
そして＜ブロック設定＞で『記事のワイド化』をONにした状態で『ブロックの背景色』に「#EDEDE9」を指定して背景色を別途付けてます。
（デフォルトの背景画像は上書きされます）
①更新履歴
①は普通に「更新履歴」機能で表示させてるだけです。
サイトオプションでの設定はこちら。
”見出し”だけ変えてます。
②フッターエリア
②はフッターエリアなんですが…＜レイアウト設定＞で『フッター』項目を「両端揃え」にしても、上の画像のように青枠内での表示になってしまいます。
「両端揃え」であれば意味合いからは赤枠内での表示になると思うんですが。
”導入事例”では横幅いっぱいに表示されてるのでたぶん調整ミスでしょう。
関連ページ
-
SIRIUS2で「英語教室のホームページ」を再現した際の再現度をチェックしてみました。 -
SIRIUS2で「行政書士事務所」のホームページ」を再現した際の再現度をチェックしてみました。 -
SIRIUS2で「保育園のホームページ」を再現した際の再現度をチェックしてみました。 -
SIRIUS2で「カフェのホームページ」を再現した際の再現度をチェックしてみました。