レイアウト設定-SIRIUS2

レイアウト設定

SIRIUS2のサイト全体の<レイアウト設定>についての詳細ページ。

サイト全体のレイアウトは<レイアウト設定>で調整できます。

 

たとえばヘッダー画像を画面幅いっぱいに表示させたり、トップページは1カラム、その他のページは2カラムにさせたりといったことも専門知識なしで設定することができます。

 

しかも専用の設定画面で実際にプレビューを見ながら設定できるので変化がひと目でわかってサクサク進めます。

ココがちょっと

最初に申し上げておきますが、設定がかなり細かいです。

 

なんでここまで細分化したのかっていうぐらい細かすぎてかえって設定が面倒くさいものになってます。


全体設定

<レイアウト設定>は全体設定タブの中にあるのでそこをクリックして開く方法もありますが、全体設定アイコン下部をクリックして表示される『レイアウト設定』を選択すれば1クリックで開けます。

 

 

最初に<全体設定>で大枠を決めていきます。

 

全体設定-サイト全体

 

サイト全体』でデフォルトとなるサイト全体のカラム数メニューの位置を決めます。

 

よく見かけるのは本文エリアとサイドメニュー(左・右・非表示)が横に並ぶ2カラムでしょうか。

 

 

 

1カラムは”サイドメニューがない”状態のレイアウトです。

(実際にはサイドメニューは下の方に移動しただけで表示はされます)

 

1カラム(ワイド)ブラウザの画面幅をフルに使って背景色を表示できるモードで、SIRIUS2から採用された新機能です。

(本文の表示エリア幅は変わりません)

 

サイト管理人

筆者

 

1カラムのトップページやランディングページ(LP)などでは後方に表示されるサイドメニューそのものを非表示にした方がすっきりする場合も往々にしてあります。

 

トップページだけを1カラム(or ワイド)にするには、とりあえず『サイト全体』設定では2カラムなどを選んで設定を保存しておきます。

 

その後リボンバーにある<全体設定>の”任意設定”内にあるレイアウトタブの『カラム数』で「1カラム(or ワイド)」を選択すればトップページのみ1カラム化が実現します。

 

他の方法としては『サイト全体』設定で「1カラム(or ワイド)」を選択しておき、(カテゴリーやエントリーなどの)各ページでは個別に”2カラム”を選択しておくとトップページは1カラム、それ以外は2カラムで表示させることができます。

 

前者の方が管理がしやすいですかね。

 

全体設定-ページトップ

上部に表示される(グローバル)メニューの位置やキャッチコピーの表示・非表示、それら全体の表示位置の調整はこここで設定できます。

 

『1段』

 

『2段』

 

『2段(リード文)』

 

『2段(中央揃え)』

 

『上部固定・ヘッダーワイド』ヘッダー画像にかぶるようにメニューが表示されます。

 

プレビュー画面ではヘッダー画像に薄くオーバーレイ効果(画面ちょっと暗め)がかかってます。

しかしながら”実際の表示上”では効果をOFFにすることができます。

 

ただしその設定は【サイトオプション】→【サイトデザイン】→【ヘッダーの設定】→【オーバーレイの表示】でのON・OFF調整となります。

 

全体設定-ヘッダー

設定項目は4つあります。

キャプチャ画像

 

ヘッダー画像

当初、その違いがよくわからなかったのが『ヘッダー画像』内の選択項目でした。

キャプチャ画像

 

プレビュー画面だけだとイマイチわかりにくかったんですが、やっと理解できたので詳しくご紹介していきます。

 

コンテンツ画像

ヘッダー画像とコンテンツ(記事本文)の間にテキストが表示されるレイアウトです。

 

「ヘッダーテキスト」というのは”ページタイトル(H1)”のことです。

 

 

ヘッダー画像

コンテンツエリアいっぱいに広がったヘッダー画像内にテキストが表示されるレイアウトです。

 

ヘッダー画像(ワイド)

ブラウザ横幅いっぱいに広がったヘッダー画像内にテキストが表示されるレイアウトです。

キャプチャ画像

 

サムネイル画像

記事本文エリア幅に収まったヘッダー画像内にテキストが表示されるレイアウトです。

(なんでサムネイル画像という名称にしたんでしょう。これが?の始まりでした)

キャプチャ画像

 

ココがちょっと

こうやって見てくると「ヘッダー画像を横幅いっぱいに表示したままヘッダー画像と記事本文との間にヘッダーテキスト群を表示」させるレイアウトがないんです。

 

それがよく見かける一般的なレイアウトだと思うんですけどね。

どうなんでしょう。

ヘッダーテキスト

 

サイト管理人

筆者

 

おそらくヘッダーテキスト(+説明文)の位置調整だと思うんですが、左か右か中央か…ただ筆者の環境では変化がなかったのでよくわかりません。

 

画像アイテム

 

説明文』は表示・非表示のみの設定となります。

(ヘッダーテキストを非表示にすると説明文も同時に非表示になります)

サイト管理人

筆者

 

画像アイテム』はアイコンなどの付け足し画像のことでしょうか。
これもよくわかりません。

 

全体設定-フッター

スクロールすると見えてくる最下段のエリア(青枠内)です。

設定項目は1つのみ。

 

ココがちょっと

『中央揃え』はわかるとしても『両端揃え』はその響きからエリア幅いっぱいに均等配置されるものかと思ったんですけど現時点ではそうはなってません。

 

SIRIUS2公式サイトにある”導入事例”ではちゃんとページ幅いっぱいで表示されてるのでたぶん調整ミスでしょう。

(※特に1カラムページではアンバランスさが目立つ)

 

キャプチャ画像

この仕様はアップデートで変更になる(?)

 

全体設定-ブログ

ブログ形式でサイトを作ってる方は記事一覧表示のレイアウトが選べます。

シンプルに1列に何個並べるかの設定だけです。

 

カテゴリー・エントリー・独立ページ

いずれも共通で「ページ設定・ページトップ・ヘッダー」の3つの設定項目だけになります。

 

全体設定で決定した設定と同じでよければ基本的には「デフォルト設定」のまま、異なる場合はそれぞれ好みの設定を選んでいきます。

 

たとえば下のキャプチャ画像はエントリーページの『ヘッダー』設定ですが、「ヘッダー画像は非表示でヘッダーテキストだけ表示」という設定になります。

 

解決済み

本日の時点では、一度設定を済ませた<レイアウト設定>を再度開くとなぜかデフォルトの状態に戻ってしまい、しかもそのままキャンセルしてもデフォルト設定が勝手に保存されてしまうというバグがところどころで残ってるようです。

 

こちらで確認できた例としては上の画像のようにエントリーページの説明文を「非表示」にしても次に開いたときは必ずデフォルトの「説明」に戻されてしまいます。

 

面倒なのは確認のために<レイアウト設定>を開いただけで確認後に「キャンセル」で閉じたとしても、一度開いたら再度設定をやり直して保存しないとデフォルト設定に戻されたままの状態で表示されてしまうということです。

 

一応、解決済み

「サイト内検索ページ」用の”レイアウト設定”がないみたいですね。

(data-page="pages other"となってる…)

 

その結果、検索結果ページはどうもトップページと同じレイアウトで表示されるような感じです。

アップデートで”検索結果ページ用の設定”がプラスされるまでのつなぎとして「検索結果ページのレイアウトを変更するには」に改修方法を書いておきました。

 

ただしHTMLテンプレートの直接編集になるのでどなたでも変更可というわけにはいきません。

スマホ

スマホ用に別個で設定が用意されてます。

 

これはありがたいことなんですが…全ページ共通の設定しか搭載されてないみたいでして。

 

例えば「トップページだけヘッダー画像を表示させてそれ以外では非表示にする」というのはPC用の設定では問題なくできても、スマホ用設定だとヘッダー画像は「表示」か「非表示」かの二者択一の選択肢しかないのでヘッダー画像の振り分けができないんです。

 

これは旧SIRIUSでは実現できてたことで、SIRIUS2で細かい設定が可能になったにもかかわらず便利な設定が排除されてしまったのはちょっと残念です。

 

【Volar2】での設定

スマホトップページのみヘッダー画像表示で他のページはヘッダー画像非表示を実現するためのスタイルをご用意しました。

 

そちらをユーザー指定スタイルに追記すれば設定完了です。

 

全体的な印象としては、ユーザーからの要望を全部搭載したらこんなんなっちゃったみたいな感じです。(笑)

 

もっとコンパクトな仕様に変えるなんてことは修正箇所が多すぎておそらくやらないでしょうから、せめて保存した設定が戻ってしまう仕様だけは早めに対処してほしいものです。

 

ココがちょっと

これは仕方がないことなんでしょうけど<レイアウト機能>を立ち上げると内蔵ブラウザが”消え”ます。

同時起動はできないみたいなんですね。

 

<レイアウト機能>のプレビュー画面もそれはそれで便利なんですけど、しょせんはサンプル素材でのプレビュー画面。

 

そのためレイアウトを変更したあとはすぐにでも内蔵ブラウザでちゃんと確認したいところなんですが、同時起動が無理なので確認のたびに何度も内蔵ブラウザを立ち上げなきゃならないんです。

 

これが地味に面倒。

ま、しょうがないか。

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

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

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