導入事例(英語教室)-SIRIUS2

導入事例(英語教室)

SIRIUS2で「英語教室のホームページ」を再現した際の再現度をチェックしてみました。

アイキャッチ画像

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

 

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

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

 

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


比較・考察

ご覧になる前に

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

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

 

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

使用テンプレートは「ベーステンプレート」です。

 

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

 

キャプチャ画像

 

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

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

 

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

 

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

 

アイコン・SIRIUS というマークが付いた箇所はSIRIUS2の機能を使用、アイコン・Volar はカスタムテンプレート【Volar2】の機能を使用もしくはその場限りの臨時カスタマイズを追加という意味です。

 

キャプチャ画像

キャプチャ画像

 

①ロゴ画像

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

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

 

キャプチャ画像

 

これ最初はどこで消せるのかわかりませんでした。

おそらく知らない方も多いんじゃないでしょうか。

 

これ、実はリボンバーの<全体設定>の奥深いところに「表示・非表示」の設定項目があるんです。

詳しくは<サイト全体>の【任意設定】の『ロゴ』の項目をご覧下さい。

 

②ヘッダー画像

ヘッダー画像は事前に文字入れ込みの画像を作成してあります。

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

(※使用画像はSIRIUS2に用意されてるヘッダー画像にテキストを載せて加工したものです)

 

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

 

キャプチャ画像

 

PC用ヘッダー画像よりも若干表示領域が狭まっているのは【サイトオプション】→【サイトデザイン】→【ヘッダーの設定】タブ内の『(スマホ)画像を全て表示』をOFFにしているからです。

 

この設定だとPC用ヘッダー画像の中心部だけが表示されるようになります。

(その表示に合わせてPC用ヘッダー画像も作成してます)

 

アイコン・Volar

スマホサイト同時生成>機能をONにすると、PCとスマホで別々のヘッダー画像を指定できる設定があるんですが、レスポンシブテンプレートではその設定がありません。

 

そこで【Volar2】ではPC用ヘッダー画像とスマホ用ヘッダー画像を別々に表示できる設定もご用意してみました。

 

具体的にはテンプレートのヘッダー用HTMLタグをこちらで用意した独自HTMLタグで差し替え、スマホ用のヘッダー画像を新規で用意していただくだけです。

 

③お問合せボタン

アイコン・SIRIUS

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

サイト管理人

筆者

 

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

 

アイコン・Volar

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

 

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

 

キャプチャ画像

 

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

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

アイコン・SIRIUS

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

 

”H2見出し(H2)”にしてからテキスト部分だけを『装飾』で「色・サイズ・強調」調整する方法もあります。

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

 

ただしこれが可能なのは(今回の事例のように)レイアウトが1カラム(ワイド)の時だけです。

 

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

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

 

キャプチャ画像

 

筆者はこれが調整ミスだと思ってますが、もしかしたら仕様なのかな。

 

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

 

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

 

ただしレイアウトに関しては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タグも簡素化できて見やすく(修正しやすく)もなります。

 

⑤背景色

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

 

アイコン・SIRIUS

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

 

 

 

キャプチャ画像

キャプチャ画像

 

①マイクロコピー的テキスト

②の見出しに添えるマイクロコピー的な①の短いテキストですが、このテキスト自体はSIRIUS2標準機能ですぐに作れます。

 

問題は②の見出しとの位置関係です。

 

普通に打っていたらどんなに頑張っても下の画像のようにかなり離れてしまいます。

 

キャプチャ画像

 

アイコン・Volar

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

 

簡単に説明すると「マージン」というのは上下・左右間の空き具合のことで、マージンの数値が大きくなるほど隣との空き具合が広がります。

理論上はマージン0なら空きがなくくっつくハズなんですが現実にはそうなってないことも多く、0以下の数値(つまりマイナス)を付けることで”空き具合をさらに詰める”こともできます。

これがマイナスマージンと呼ばれるものです。

【Volar2】での設定

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

 

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

②見出しデザイン

アイコン・SIRIUS

ここはSIRIUS2の<見出しデザイン>を使えばデザイン可能です。(※スタイル17)

 

前述したようにレイアウトが「1カラム(ワイド)」なら”H2”でも”div”でもどちらでもデザイン可能です。

 

もしも「1カラム(ワイド)」以外なら…背景色を非表示にするというスタイルを別途用意する必要があります。

③テキスト群

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

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

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

アイコン・SIRIUS

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

 

 

 

キャプチャ画像

キャプチャ画像

 

①見出し

アイコン・SIRIUS

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

 

②~⑤口コミ

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

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

 

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

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

アイコン・SIRIUS

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

 

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

 

キャプチャ画像

 

サイト管理人

筆者

 

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

 

⑥背景色

アイコン・SIRIUS

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

 

 

 

キャプチャ画像

キャプチャ画像

 

①見出し

アイコン・SIRIUS

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

 

②FAQ

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

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

 

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

 

③背景色

アイコン・SIRIUS

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

 

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

アイコン・SIRIUS

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

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

 

⑤⑥フッターエリア

アイコン・SIRIUS

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

アイコン・SIRIUS

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

最後のフッターの背景色は<カラー設定>のメインカラーがそのまま反映されてます。

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

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

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