導入事例(ネイルサロン)-SIRIUS2

導入事例(ネイルサロン)

SIRIUS2で「ネイルサロンのホームページ」を再現した際の再現度をチェックしてみました。

アイキャッチ画像

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

 

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

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

 

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


比較・考察

ご覧になる前に

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

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

 

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

使用テンプレートは「エレガントテンプレート」です。

 

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

 

キャプチャ画像

 

結果としては今回の事例の標準機能使用率はおよそ98%といったところです。

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

 

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

 

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

 

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

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

 

キャプチャ画像

キャプチャ画像

 

①ロゴ画像

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

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

 

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

 

②ヘッダー上部の高さ

アイコン・Volar

ロゴやメニューが表示されてる②の空間は未調整だとかなり間が空いてしまってしまりがなかったので、導入事例ほどではないですが幅(高さ)を少しだけ少し狭くしてみました。

(※ここは割と複雑なスタイル調整になるので敷居はちょっと高めです。でも好みの問題なのであえてトライする必要もないです)

 

キャプチャ画像

 

③予約ボタン

アイコン・SIRIUS

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

サイト管理人

筆者

 

メニュー数が多かったりブラウザの幅次第ではロゴ画像の下に移動する場合もあります。

 

アイコン・Volar

予約ボタン」は標準設定だと余白が多くボタン自体が大きめになってしまうため導入事例・英語教室同様、余白調整用のスタイルを別途追加してます。

 

④ヘッダー画像

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

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

 

スマホでの表示はこちら。

 

キャプチャ画像

 

アイコン・SIRIUS

PC用ヘッダー画像よりも若干表示領域が狭まっているのは導入事例・英語教室でやり方をご紹介済みなのでそちらをご覧下さい。

 

⑤狭いエリアでの表示ブロック

テキストの中身に関しては

アイコン・SIRIUS

記事装飾メニューの『装飾』を使って「色・サイズ・強調」で調整したり『行揃え』で「中央寄せ」にしてみたり特に難しいことはありません。

 

CONCEPT」のテキストは導入事例・英語教室同様、”H2見出し(H2)”にしてからテキスト部分だけを『装飾』で「色・サイズ・強調」調整する方法もあります。

(中央寄せはH2見出しにした段階で実行されます)

 

ただしこれが可能なのは(「ベーステンプレート」と同じく)レイアウトが1カラム(ワイド)の時だけのようです。

 

1カラムや2カラムではH2見出しの後ろに背景色が付いてしまうため、テキストだけの表示にできないのです。

(スタイルを加筆すればできないこともないですけど)

 

ただしレイアウトに関してはSIRIUS2の機能だけでは再現できません

アイコン・Volar

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

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

という”横幅決め打ち”設定を加筆してます。

 

サイト管理人

筆者

 

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

【Volar2】での設定

上記設定は追加のHTMLタグとやや複雑なスタイルが必要になり、HTMLアレルギーの方にはかなり面倒な作業かと思われます。

 

そこで【Volar2】ではできるだけ簡単なやり方で横幅だけ数値を入れ替えればいいHTMLタグとスタイルをご用意してみました。

事前に定型文に登録してあるので、使いたい場所で挿入します。

 

挿入後には横幅だけ好きな数値に変えてもらい(※横幅決め打ち)、あとは自由にコンテンツを書き込んでもらうだけです。

 

定型文から挿入直後のHTMLはこちらのような感じになってます。
赤文字の数値を変えて、青文字にコンテンツを書き込みます。

 

<div class="xxx" style="width: 420px;">

※ここにコンテンツを記入

</div>

 

表示されてるHTMLタグやID名・クラス名は変更の可能性もあるため、ここでは暫定的に「xxx」や「zzz」で代用してます。

上記【Volar2】設定のHTMLとスタイルは「ベーステンプレート」+【Volar2】の組合せでしか動作チェックしておらず、「ベーステンプレート」以外のテンプレート使用時は原則として動作保証外となります。

(今回は特に問題はないようです)

 

⑥背景模様

⑥周辺を拡大したのがこちらの画像。(わかりやすいよう多少加工してます)

よく見ると模様がついてますね。

 

キャプチャ画像

 

これは「エレガントテンプレート」を使用すると強制的に表示される背景画像みたいです。

(導入事例でもよーーーーく見るとうっすらと見えるような見えないような...)

 

これを非表示にしようと設定を探してみたんですが、どうもSIRIUS2にはそのような設定項目が見当たらないようです。

そのためスタイルでの独自調整になってしまうのはちょっと残念ですね。

 

⑦追従型CTA?

導入事例をよく見るとヘッダー画像右下あたりに⑦の画像が見えてます。
これはおそらく追従型CTAかと思われます。

 

SIRIUS2の公式サイトのCTA概要欄にも

サイトの右下に追従型のポップアップを表示することもできます。

とあるので間違いないでしょう。

 

ただこの記事執筆時点ではまだその機能は追加搭載されてないので再現はできませんでした。

 

 

 

キャプチャ画像

 

テキスト・画像並列表記

アイコン・SIRIUS

ここはSIRIUS2のパーツ画像レイアウト>を使えば作成可能です。

 

Read More」ボタンはコンテンツ作成画面内で右上にある各エディタをクリックして、記事装飾メニューの『ボタン』機能で作成したものです。

(専用コードとして自動入力されたもの)

キャプチャ画像

 

 

 

キャプチャ画像

 

①見出し&概要

アイコン・SIRIUS アイコン・Volar

①は記事装飾メニューの『装飾』や『行揃え』などを使って作成できます。

 

ただし文章が長くなっても青枠で囲ったエリア内だけでの表示にしたいのなら、前述した”横幅決め打ち”機能でエリアを限定させる必要があります。

 

もちろん前述の通り、”H2見出し”としてもイケます。

 

②ギャラリー表示

アイコン・SIRIUS

②のブロックは(導入事例は画像なので想像ですが)おそらくギャラリーとしての機能かと思われ、SIRIUS2のパーツ画像ギャラリー>で作成してみました。

 

クリックすると画像が拡大されます。

 

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

 

そして<ブロック設定>で『記事のワイド化』をONにした状態で『ブロックの背景色』に「#EDEDE9」を指定して背景色を別途付けてます。

(デフォルトの背景画像は上書きされます)

 

 

 

キャプチャ画像

 

①更新履歴

アイコン・SIRIUS

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

 

サイトオプションでの設定はこちら。
”見出し”だけ変えてます。

 

キャプチャ画像

 

②フッターエリア

アイコン・SIRIUS

②はフッターエリアなんですが…<レイアウト設定>で『フッター』項目を「両端揃え」にしても、上の画像のように青枠内での表示になってしまうんです。

 

「両端揃え」であれば意味合いからは赤枠内での表示になると思うんですよ。

 

”導入事例”では横幅いっぱいに表示されてるのでたぶん調整ミスでしょう。

 

キャプチャ画像

コメントフォーム(β版)

    ※コメントはこちらからどうぞ

    このフォームを作成するにあたって参考にしたサイト情報はこちらに載せてます