導入事例(行政書士事務所)-SIRIUS2

導入事例(行政書士事務所)

SIRIUS2で「行政書士事務所」のホームページ」を再現した際の再現度をチェックしてみました。

アイキャッチ画像

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

 

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

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

 

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


比較・考察

ご覧になる前に

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

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

 

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

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

 

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

 

キャプチャ画像

 

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

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

 

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

 

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

 

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

 

キャプチャ画像

キャプチャ画像

 

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

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

 

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

 

②お問合せボタン

アイコン・SIRIUS

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

サイト管理人

筆者

 

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

 

③ヘッダー画像

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

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

【Volar2】での設定

レスポンシブテンプレートの場合、PCとスマホで別々の画像を表示させることはデフォルトのままではできません

せいぜいスマホでは表示領域を狭くするぐらいのものです。

 

これについてはもう少し詳しい内容が導入事例・英語教室の②ヘッダー画像でご覧になれます。

 

しかしながら再現サイトでは【Volar2】の機能を利用してPCとスマホで別々のヘッダー画像を表示させてみました。

 

こちらがPC用とスマホ用で別々に作成したヘッダー画像です。

(今ご覧になってる機器でヘッダー画像を確認してみてください)

 

キャプチャ画像

 

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

これ、最初は<レイアウトボックス>機能を使えばさくっと作れるんじゃないかと思ってました。

 

作成に際してちょっと悩んだのが画像とテキストの位置関係

公式サイトの導入事例は、左側の画像に対して右のテキストブロックは縦位置で中央合わせになってます。

 

キャプチャ画像

 

これを再現するため、(普段はやったことがないんですが)テキストの前に空白行を入れるという荒業で調節してみました。

(<レイアウトボックス>には高さを調節する機能がないため)

 

キャプチャ画像

 

その結果、PCではうまく表示されました。

(※左側の画像は2人1組の1枚画像です)

 

しかしながらスマホでチェックしてみると…無駄な空白ができてしまってます。

(※レイアウトボックスの基本設定で『スマートフォン上では1列表示にする』にチェックを入れてる場合)

 

キャプチャ画像

 

ハイ、これは先ほどの空白行の分ですね。

 

アイコン・SIRIUS

ということでこれじゃあみっともない「この空間、何?」という感じになりそうなので、やはりここはパーツ画像レイアウト>を使って表示させることにします。

サイト管理人

筆者

 

もちろんテキストブロックを中央合わせではなく上端合わせなら、レイアウトボックスでも問題ありません。

 

作るコンテンツは1個だけ。

タブ『レイアウト設定』では「画像+テキスト縦並び(1列)」を選びます。

 

キャプチャ画像

 

上記設定でPC上での表示は<レイアウトボックス>機能で表示したときとほとんど変わりありません。

 

しかしながらスマホでの表示はというと、<画像レイアウト>を使った方は画像の下にテキストブロックがバランスよく配置されてます。

 

キャプチャ画像

 

 

 

キャプチャ画像

キャプチャ画像

 

①見出し

アイコン・SIRIUS

MERIT」というテキストは記事装飾メニューの『装飾』を使って「色・サイズ・強調」で調整後に『行揃え』で「中央寄せ」でもOK。

 

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

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

 

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

 

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

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

 

見出しの下の「鈴成行政書士事務所が対応するメリット」というテキストですが、見出しを”H2”にした場合は見出しとテキスト間のすき間があいてしまいます。

 

その場合はテキスト側にマイナスマージン(※上方向)をかまして隙間を埋める作業が出てきます。

 

ただこれはスタイルをよく知らない方には難しいやり方かもしれません。

 

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

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

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

【Volar2】での設定

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

 

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

 

②画像とテキスト縦並び

これ、一見するとパーツアイテム比較>でいけそうな気がします。

 

ということでやってみたら…レイアウトは問題なしなんですが消さなきゃイケない箇所が多すぎて。

 

キャプチャ画像

 

アイコン・SIRIUS

そこでここは先ほど諦めた<レイアウトボックス>で作ってみました。

 

先ほどとの違いはここでは画像とテキストが”横並び”ではなく”縦並び”なこと。
テキストブロックの縦位置の調整が必要ないのでPCでもスマホでもほぼ同じレイアウトで表示されます。

 

こちらが設定画面。

『コンテンツ』内のテキスト装飾や中央寄せは右上にある各エディタを起動して作成してます。

 

キャプチャ画像

 

③背景色

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

 

アイコン・SIRIUS

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

 

 

 

キャプチャ画像」

 

①見出し+テキスト

アイコン・SIRIUS

ここは直前のブロックと同じ内容なので説明は割愛します。

 

②画像とテキスト縦並び

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

ここも直前のブロックと同じく<レイアウトボックス>を使って作成してます。

 

ただし<レイアウトボックス>ではそのままだと③のテキストは画像幅と同じ広さにまで広がって表示されてしまいます。

 

そのため③のテキストブロックには導入事例・英語教室でご紹介した”横幅決め打ち”機能を使って表示範囲をちょっと狭くしてます。

(※スマホでは画面幅いっぱいで表示されます)

 

 

 

キャプチャ画像

 

アイコン・SIRIUS

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

アイコン・SIRIUS

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

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

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

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