検索結果

当サイトでは基本的にベーステンプレートでの動作検証となってます。そのため他のテンプレート利用時にはここで使用しているキャプチャ画像とは若干異なる場合もあります。また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。バージョン1.140のアップデートによってブロック設定に背景画像を指定できる機能が追加されたため、当ページの内容を大幅に書き直しました。＜ブロック設定＞というのは主に1カラム（ワイド）のトップページやランディングページ向けに、ページの横幅いっぱいに背景色を指定できる機能です。設定画面は「カラー設定」とver.1.140から追加搭載された「画像設定」の2項目。編集画面右下の「ブロック設定」をクリックすると開きます。いくつかサンプル画面を通してその使い勝手を見ていきます。【カラー設定】背景色2カラムまずは”使ってもあまり意味のない”2カラムページでの＜ブロック設定＞。どんな具合か試しに見てみます。用意したのはこちらのサンプル。通常のテキストとカラー枠・装飾枠（ヒント）で囲まれたテキストを織り交ぜてます。最初に＜ブロック設定＞で背景色だけを設定してみます。結果は記事コンテンツエリアだけが設定した背景色で塗りつぶされます。筆者想定していた通りですね。ちなみにH2見出しの背景はデフォルトの設定がそのまま適用されてるためグレーになってます。「目次」の背景色も付いたままです。似たようなレイアウトデザインに『スタイル』というのがあります。試しに編集画面左下にある『スタイル』から「カラー背景」を選択したのがこちら。記事コンテンツエリアは設定済みの背景色で塗りつぶされますが、記事タイトルに入力したH2見出しは適用範囲外になります。1カラム（通常）今度は”通常の”1カラムページでやってみました…といってもサイドメニューが消えただけで基本的には2カラム時と変わりはないです。（横幅だけです、変わるのは）筆者こちらも＜ブロック設定＞の恩恵はあまり感じられません。1カラム（ワイド）おススメは1カラム（ワイド）です。ページレイアウトを「1カラム（ワイド）」に変更すると＜ブロック設定＞の『記事のワイド化』機能が有効になるのでそこをONに切り替えます。この設定で表示させてみるとブラウザ幅いっぱい（フルワイド）に背景色が敷かれるようになります。雰囲気がこれまでとだいぶ違います。筆者1カラム（ワイド）の時だけなぜかH2見出しの背景（グレー）が消えます。そしてなぜか中央寄せ。でもH3見出しは左寄せ…仕様なのか調整ミスなのか。ちょっと気になったので『見出しデザイン』機能を使ってH2見出しを「スタイル02（枠線のみ）」に変更してみました。（線色は共に青系）今度はH2見出しにちゃんと装飾がかかったもののなぜかH3見出し同様ともに左寄せに。（これはどういう仕様？）筆者1カラム（ワイド）に設定したエントリーページでも挙動は同じです。この仕様はアップデートで変更になる（？）さてここから他の機能も見ていきます。【カラー設定】テキストカラー＜ブロック設定＞には『ブロックの背景色』設定のほかに『ブロックの文字色』（テキストカラー）というのもあります。今回ここを赤系の色に設定してみます。その結果がこちら。記事編集内のテキストが赤色に変わりました。しかしながらH3見出し『H3タイトル（記事本文内）』は赤色に変わったものの記事タイトル内に付けたH2見出し『H2タイトル（「記事タイト」内）』と記事本文内に加筆したH2見出し『H2タイトル（記事本文内）』は共に黒色のままです。最後に『記事タイトルの文字色』に青系のカラーを設定してみます。結果は編集画面の”記事タイトル”内に入力したH2見出し『H2タイトル（「記事タイトル」内）』”だけ”が設定通り青色に変化しました。（いろいろと理解が難しい…）【カラー設定】背景色を暗い色にすると...背景色を暗めの色に設定してみます。上のキャプチャ画像でわかるように背景色が濃くなれば、元が黒のテキストはかなり見づらくなります。その一方で装飾系ボックス内のテキストは背景に明るい色が設定してあるので見え方は変わらずクリア。それではということで、テキストの色を見やすくするべく『ブロックの文字色』を白にしてみます。その結果がこちら。通常のテキストは白に変わって見やすくなったんですが、装飾系ボックス内のテキストまで白に変わってしまって今度はこっちが見づらくなってしまいました。どうやら『ブロックの文字色』は記事内のすべてのテキストを設定した色に変えてしまう仕様のようです。（ここでも記事コンテンツ内の”H2見出し”は黒のままで変わらずww）筆者ブロック設定の『記事タイトルの文字色』も白に設定すれば1個目のH2見出しだけは白色に変わります。ということで（現状では）背景色に暗い色を設定する場合は”プレーンなテキストだけのコンテンツ”にするか、もしくは暗い背景色は諦めるしかないようです。【Volar2】での設定【Volar2】には暗い背景色の時にテキストカラーを自動的に白に変換するダークモードを搭載してます。（画面全体が暗転する一般的な”ダークモード”とは違います）やり方は記事内のダークモードにしたいエリアの先頭と後尾に専用のモジュールを貼り付けるだけ。（2ヵ所というのがちょっと面倒なんですけどしょうがない）結果、下のキャプチャ画像のように通常のテキストのみが白で表示されます。（”調整漏れ”があるかもしれませんがアプデで対応します）【画像設定】『ブロック設定』では背景に単色だけでなく画像を設定することもできます。たとえば画像管理画面に取り込み済みの下の画像を背景に設定してみました。デフォルト設定のままなら白のオーバーレイが0.7（70%）でかかります。オーバーレイとは？画像の上に色や画像などを重ねて印象を変える手法。画像を少し暗くしたり明るくすることで画像の上に載ってるテキストの視認性をアップさせる効果もあります。スマホではこちらのように表示されます。画面幅に合わせて画像が伸縮するのでスマホでは画像が引き伸ばされたような感じでの表示になります。次はコンテンツの量を増やした（縦に長くなった）サンプルをみてみます。先ほどは手に持ったカップがいい感じで表示されてましたが、コンテンツの高さが増えると画像は拡大されて表示されます。上のキャプチャ画像はPC表示時のものです。これをスマホで見ると…かなり拡大されてもはやどんな画像なのかわからないほど引き伸ばされてしまいす。こういった特長があるので設定する画像はデザインやサイズに多少気をつかう必要があります。ちなみにオーバーレイに暗めの色を指定したサンプルがこちら。こういった場合は『ブロックの文字色』に白系の色を設定してやるとテキストの可読性が上がります。ただし前述したように見出しテキストや通常テキストの表示状態に若干問題が残ってるので使いどころは限られてきそうです。【Volar2】での設定カスタムテンプレート【Volar2】では『フルワイド背景画像』にて背景画像の固定化機能とPCとスマホで別の画像の設定も搭載してます。※【Volar2】＜フルワイド背景画像＞についてはこちらの記事をご参照ください。【Volar2】フルワイド背景画像SIRIUS2テンプレート【Volar2】の1カラムページで使えるフルワイド背景画像についての詳細ページ。

【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。動作チェック済み（対応可能）なのはmp4動画のみです。またトップページのみでの利用となり、それ以外のページでは使えません。Youtube動画は再生開始時のタイトル等が現状では消すことができず、”背景動画としてはみっともない”ので動作チェックすらしておりません。DEMOサイトを見てみる動画の作成及び設定について動画というと「敷居が高い」とつい思っちゃいますが、実はそうでもありません。もちろん企業サイトであればそれなりのレベルのものを作る必要もあるでしょうけど、それなりの機材や人材も揃ってるはずですからそういう意味では問題はないかと思います。ではアフィリエイトサイトなどを運営する個人ならどうでしょう。スキルがある人はそれなりの動画を作ればいいでしょう。そうでない方は…フリーの動画を使うのが手っ取り早いです。ただしフリー動画とうたっていても実際には著作権の表示が必要だったりするのもあるので、その辺はちゃんと確認する必要があります。筆者DEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。可能な動画形式はmp4設置可能な動画形式は拡張子が「.mp4」の動画のみです。mp4動画であれば今は基本的にはどのブラウザでも表示可能です。iPhoneで撮影した動画は拡張子が「.mov」になるためそのままだとうまく表示されません。この場合、動画編集ソフトやオンライン動画変換サービスなどを利用してmov→mp4へ変換する必要があります。そもそもそのままだとファイルサイズが大きすぎて使えないので、いずれにしても変換作業は必要です。動画サイズ動画の解像度は特に制限はありません。問題なのはファイルサイズです。一般的に解像度が大きければ大きいほどファイルサイズは大きくなります。ファイルサイズが大きければ画質はよくなりますが読み込みに時間がかかってしまうという大きなデメリットがあります。結論から申し上げますとファイルサイズは最大でも3MB以下に抑えた方がよろしいかと。ファイルサイズを落とす方法はいくつかあります。「解像度を低くする」「画質を若干落とす」「コマ数を落とす」など。（動画の種類や内容によって選択肢が変わってきます）これらは動画圧縮サービスを使えば手軽に実行可能です。私も使ったことがあるのがこちらのサービス。（使い方はググってください）COMPRESSS.COMConvertioYOUCOMPRESSDEMOサイトのヘッダー動画（ドローン撮影による田園風景）の解像度は960×540px、ファイルサイズは2.3MBまで落としてあります。筆者ファイルサイズがあまりに大きいとオンラインサービスでは受け付けてくれない場合もあります。そういう時は（フリー）ソフトをインストールして圧縮をかけるというやり方もあります。粗さ（ボケ感）解消エフェクトヘッダーに載せる動画は解像度（特に横幅）に関係なくブラウザの横幅いっぱいに表示される仕様にしてます。それゆえファイルサイズを落としたいがために解像度があまりに低い（たとえば640pxとか）と、ブラウザの広さに応じて縦横に伸びた場合は粗さが目立ったりボケ感がかなり強調される可能性もあります。そういう時のためにボケ感を”イイ感じに見せる”効果もいくつか搭載してます。SIRIUS2に標準で備わってるヘッダー画像の「オーバーレイの表示」をONにする（少し暗っぽい感じになります）【Volar2】側で用意しているフィルター群（グレースケール・モノクロ・ぼかし・セピア・ドット柄）を被せてボケ感を和らげる背景動画の設定方法動画ヘッダーの設置手順を概要だけご紹介します。動画の登録SIRIUS2には動画表示機能が搭載されてるのでこれを利用して動画を登録します。（ここに登録しておくといろいろ使いやすいんです）①をクリックした後、②のフォルダアイコンをクリックして表示したい動画を選択すると青枠内に動画URLが設定されます。OKをクリックすると専用の”動画タグ”が出力されます。同時に「media」フォルダ内に動画が登録（コピー）されます。ただ今回は動画をサイト内に登録させるのが第一目的なので、一つ前の画像の”動画タグ”は動画ファイル名だけコピーしてさくっと全削除しちゃいます。（使いません）「media」フォルダは先ほどの画像でもわかるように、【Windows】→【ACES WEB】→【SIRIUS2】→【data】→【※動画を設置するサイト名】→【media】の位置にあるので、動画登録機能を使わず「media」フォルダに直接動画フィルを放り込んでもOKです。【※動画を設置するサイト名】は特にいじってなければ”サイト名”が表示されます。ただし『サイトデータのフォルダ名変更』で名称変更をしている場合はこの限りではありません。モジュールの有効化とその中身＜動画ヘッダー＞機能はデフォルトでは無効化されてます。そのためヘッダー画像を動画ヘッダーにするには専用モジュールのコメントアウトを解除して有効化する必要があります。【テンプレート】→【HTMLテンプレート編集】→【トップページ】と開き、以下の2つのモジュールのコメントアウトを解除します。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。①のモジュールには専用のスタイルが格納されてます。今は特に変更の必要はないのでこのままで。（変更の必要性がありそうなところはマニュアルでご説明してます）②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を先ほどコピーしたファイル名で差し替えます。（※一部を抜粋）これだけで”とりあえず”ヘッダー画像エリアは動画ヘッダーでの表示に変わります。筆者動画ヘッダーの上に画像やテキストを表示させることもできます。背景動画設定時の注意点【Volar2】の動画ヘッダーはできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。メリットは簡単な手順で動画ヘッダーに切り替えられること。しかしながらデメリットもいくつか存在します。そのあたりを解決策も含めてご説明していきます。レイアウトは1カラム（ワイド）トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません)なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。＜レイアウト設定＞で【全体設定】の『ページトップ』を「1段（上部固定・ヘッダーワイド）」に設定すると、DEMOサイトのトップページのように動画表示エリアがロゴ画像やメニューの背景部分にまで広がって表示されます。その場合ロゴ画像は透過情報を保持したPNG画像などを用意する必要があります。オーバーレイが使える【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。筆者【Volar2】の動画ヘッダーは動画の上に静止画やテキストを表示させることもできるので『オーバーレイの表示』をONにすればテキストがより見やすくなります。ほかにも「グレースケール・モノクロ・ぼかし・セピア」といたエフェクト類も用意してます。ヘッダー画像が一瞬表示される【Volar2】の動画ヘッダーはSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。これはちょっとみっともない動作で可能な限り避けたいところ。じゃあヘッダー画像を設定しなければいいかというと、（DEMOサイトのように）動画表示エリアをロゴ画像やメニューの背景まで広げるためレイアウト設定で「1段（上部固定・ヘッダーワイド）」にしてる場合、ヘッダー画像を指定してないとなぜか動画をメニューの背景まで広げることができなくなります。（おそらくスタイルがどこかでぶつかってるんだと思いますが）それにヘッダー画像を未設定にするとそもそもの問題としてサイト全体がヘッダー画像なしでの表示になってしまいます。話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。ただこれの変更（改修）作業はかなり手がかかりそうなので2つの代替策を考えてみました。①白のヘッダー画像ヘッダー画像が表示されるのが避けられないのなら、”真っ白なヘッダー画像（ファイル名はheader.jpg）”であればヘッダーエリアは一瞬白っぽくなるだけなので違和感はかなり薄れます。その代わりヘッダー画像をトップページ以外でも表示するよう設定しているサイトでは今度はその白画像がヘッダー画像として表示されてしまうことになります。そこでそれを避けるために「header.jpg」ではなく「headers.jpg」をヘッダー画像として読み込む独自タグも別途用意してあります。そちらに切り替えればトップページは白画像（header.jpg）を読込み、上の独自タグを有効化したテンプレートではファイル名を変更（headers.jpg）した元のヘッダー用画像がヘッダー画像として表示されるようになります。予めこちらで100×100pxの白画像（header-empty.jpg）を用意してあります。（ダウンロードファイル内に同梱済み）必要であれば元のヘッダー画像「header.jpg」は「headers.jpg」に名称変更し、上記白画像（header-empty.jpg）を「header.jpg」に切り替えます。筆者反対のやり方、つまりトップページだけheaders.jpgをヘッダーとして読み込む設定にすれば他のテンプレートでの操作はいっさい必要なくなるのでそちらの方がラクと言えばラクです。でも今回の構成ではそれが無理そうなのでやむなく他のテンプレートでの操作にしてあります。②ローディング画面2つ目は個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）筆者本来であればサイトを開くと1～3秒程度『青っぽい画面とくるくる回るローディング画面』が表示され、それが消えると動画がスタートします。（1～3秒という時間は回線速度などによって前後します）しかしながらDEMOサイトはトップページのみのとても”軽い”サイトなので、環境によっては一瞬しか表示されないかもしれません。【Volar2】には上記ローディング画面用の設定も搭載してるのでお好みでご利用いただけます。なおデフォルトでは無効化されてますが、下の3つのモジュールのコメントアウトを解除するだけで即発動します。動画ヘッダーを止めたときは3つのローディング用モジュールも再度コメントアウト状態に戻します。先に「ヘッダー画像が一瞬表示される…」と書きましたが、この”一瞬”の時間はコンマ◯秒～1秒程度の世界です。もしかしたら【サイトオプション】→【基本設定】→【サイトの表示速度】→『画像の遅延表示』をOFFにすることでもっと短くすることもできるかもしれません。『画像の遅延表示』というのは「画面をスクロールしていって画像が表示領域に来たらその時点で画像を読み込む」といういわゆる”画像遅延読み込み”機能のことです。ページ表示時には画像の読み込みをスキップするのでその分サイト表示スピードの改善に役立つ機能と言われてます。この機能、本来であればファーストビュー（最初に表示されるエリア、つまりヘッダーエリア）では逆にいち早く画像を表示できるようそこだけ画像遅延読み込み機能を外せるような設定を付けてるテンプレートもあるんですが、SIRIUS2にはその設定はなく一括での画像遅延読み込み機能になってます。それがヘッダー画像の一瞬表示の時間が長くなってしまう可能性がなきにしもあらず。（あくまで推測です）それゆえ『画像の遅延表示』機能をOFFにすれば多少は…多少は読み込みが早くなって一瞬がホントに一瞬になる可能性も残っています。（あくまで推測ですよ）ただしこの機能をOFFにしてしまうとすべてのページで画像遅延読み込みが機能しなくなるというデメリットも併せ持ってるのでご注意ください。

【Volar2】ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。こちらでDEMOがご覧になれます。基本仕様【Volar2】のヘッダーエリアの画像スライダーの仕様は以下の通り。ヘッダーエリアに3枚の画像をフェードで切り替えしながらループ表示。（※画像は3枚固定）3個目の画像表示後は1個目の画像に戻る。画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）総尺は1周およそ10秒。（※変更不可）画像上には2段テキストも表示可。（カラーやサイズは変更可）こういった仕様から【Volar2】の画像スライダーはどちらかというと『サイトイメージの向上』的な使い方になろうかと。たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなどでしょうか。総尺は1周およそ10秒画像枚数が3枚とか総尺10秒という設定は完全に個人的な好みです。ですがこれ以上長くてもサイト訪問者は見てくれないと思います。この秒数を変えるとなると現在の設定では再計算がものすごく面倒くさいので時間は固定にしてあります。ヘッダー画像に何も設定してないと画像スライダーが表示されないので、必ず何かしらのヘッダー画像を設定しておく必要があります。有効化のやり方＜ヘッダーエリアに画像スライダー＞機能はデフォルトでは無効化されてます。標準のヘッダー画像を【Volar2】画像スライダーに変更するには専用モジュールのコメントアウトを解除して有効化する必要があります。【テンプレート】→【HTMLテンプレート編集】→【トップページ】と開き、以下の①と②の2つのモジュールのコメントアウトを解除します。※＜コメントアウト＞についてはこちらの記事をご参照ください。コメントアウトの効率的な使い方旧SIRIUS時代から受け継がれてる便利なコメントアウト機能を詳しくご紹介します。画像設定画像の登録やカスタマイズのほとんどは①の専用スタイルシート上で行います。画像に関しては横幅1400pxぐらいあれば大丈夫かと。あまり小さい画像だとブラウザ幅いっぱいまで引き伸ばされた時にボケボケになる恐れもあります。（それも演出のうちなら問題はありません）その画像を『画像管理』でSIRIUS2内に取り込みます。続いて【テンプレート】→【スタイルシート編集】→【css\header-slide】と開きます。下の赤線部分の「xxx」を、登録した画像ファイル名で差し替えます。①が1枚目の画像ファイル名、②が2枚目の画像ファイル名、③が3枚目の画像ファイル名になります。（.jpg以外の.pngとか.webpの画像は拡張子ごと差し替えてください）画像をフォルダ分けしている場合は若干修正が必要です。たとえば「AAA」というフォルダ内に画像を登録した場合は「../img/AAA/xxx.jpg」と書き換えます。これだけでとりあえず画像スライダーは稼働します。＜レイアウト設定＞で【全体設定】の『ページトップ』を「1段（上部固定・ヘッダーワイド）」に設定すると、当サイトのトップページのように画像スライダーの表示エリアがロゴ画像やメニューの背景部分にまで広がって表示されます。その場合ロゴ画像は透過情報を保持したPNG画像などを用意する必要があります。カスタマイズ可能な項目基本的にはこちらで用意した設定をデフォルトで使っていただくのがベストですがいくつかカスタマイズ項目も用意はしてます。画像にオーバーレイデフォルトで画像にはオーバーレイがかかってます。これが必要ないという方は以下の手順で解除が可能です。【テンプレート】→【HTMLテンプレート編集】→【トップページ】を開きます。[% module(【Volar2】ヘッダーに画像スライダー（HTML）) %]をダブルクリックします。該当するモジュールが開くので下の画像のオーバーレイ用のクラスである「cover」というテキストを削除します。「cover」の直前の半角スペースも削除します。元に戻すときは”半角スペース＋cover”になります。画像上にテキスト画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。（テキスト非表示も可）先ほどと同様【テンプレート】→【HTMLテンプレート編集】→【トップページ】を開きます。[% module(【Volar2】ヘッダーに画像スライダー（HTML）) %]をダブルクリックします。該当するモジュールが開くので下の画像の赤枠内を適当なテキストで差し替えます。ただし表示位置は上下左右の中央で固定です。位置の変更ができないこともないですが、座標計算がかなり大変なので固定仕様にしました。テキストの色・明朝体・サイズ変更などは専用スタイルシート側で変更可です。（やり方はマニュアルに載せてあります）SIRIUS2の＜ヘッダーアニメーション＞にしても【Volar2】の＜ヘッダー画像スライダー＞にしてもいずれも有効化するとH1が消えてしまうようなので、1段目のテキスト部分は途中から”h1”に設定を変えてあります。よって1段目のテキストは”サイト名”を入れておくのがベストかと思います。画像の高さデフォルト設定ではブラウザの画面サイズの高さに自動的に合わせる仕様になってます。これは700pxなどの固定高さに変更することもできます。スマホでは真ん中エリアが表示されます。

SIRIUS2には＜ブロック設定＞という機能が新たに搭載されており、その中の「記事のワイド化」にチェックを入れるとブラウザ幅いっぱい（フルワイド）に背景色を広げることができます。【Volar2】ではこれにプラスして背景画像もフルワイドで表示できるオプションを搭載してます。現時点では1カラムのトップページのみの対応となってます。追記：2023.12.20SIRIUS2 ver.1.140にて『ブロック設定』に背景画像の設置機能が追加されました。※＜ブロック設定＞についてはこちらの記事をご参照ください。ブロック設定SIRIUS2の1カラムLP向け＜ブロック設定＞についての詳細ページ。SIRIUS2のアップデートで『ブロック設定』に背景画像の指定機能が追加されたため、（このあとでも多少触れてますが）先にSIRIUS2標準の『ブロック設定』の背景画像とカスタムテンプレート【Volar2】の『フルワイド背景画像』との主な違いを挙げておきます。『ブロック設定』のメリット専用の設定画面で画像を選択するだけの簡単仕様。『ブロック設定』のデメリット背景画像はスクロールに応じて移動（連動）するタイプで、画像のサイズ・ページ内のコンテンツの量によっては背景画像の一部分しか表示されず想定していたのと異なるイメージで表示される場合もある。『フルワイド背景画像』のメリット背景画像はスクロールしても動かない固定表示。画像の表示範囲はブラウザ画面の高さに合わせて画像幅が決まるため、元の画像と極端に表示範囲が異なる可能性はどちらかというと低め。スマホの場合はスマホの画面高に合わせる仕様。PCとスマホで別々の画像を指定可能。オーバーレイ効果だけでなく、ぼかしやセピアカラー、モノクロ機能も搭載。『フルワイド背景画像』のデメリット編集画面上で専用のモジュール名を挿入する必要あり。（解除するにはそのモジュール名を削除 or コメントアウト）『ブロック設定』のように（SIRIUS2内のプログラムで）専用のダイアログを出すことができないので、モジュール内の指定箇所に画像名を手動でコピー＆ペーストする必要あり。フルワイド背景画像の概要当サイトトップページを例に機能の詳細をご紹介していきます。ご覧になる時期によっては説明用のキャプチャ画像の内容やデザインが変更になってる可能性もあります。予めご了ください。こちらは記事ブロック2を使って編集した「旧SIRIUSとの比較」というブロックで、背景画像がブラウザの横幅いっぱいにまで広がってます。基本的には記事ブロック全体を1個の背景画像で覆うというイメージになります。（記事ブロックの途中だけという使い方もできないことはありません）『記事ブロック』とは？記事を個別に作成できるよう、SIRIUS2には10個の記事ブロックが搭載されてます。（右端に表示されてる数字部分をクリックすると別の記事ブロックに移動可）必ず分けて書く必要はなく、記事ブロック1に全部書いても問題ありません。主な機能としては1枚の背景画像をフルワイドで表示可。PCとモバイル（タブレット＆スマホ）で別々の画像設定可。PCではスクロールしても背景画像は固定表示のまま。モバイル機器ではスクロールと共に背景画像も移動してしまいます。（iOSの仕様上の問題）そのためモバイル機器では背景画像は繰り返し表示にしてあります。モバイル機器でも背景画像が”疑似的に”固定表示されるように変更しました。背景画像を自動的に暗めにしてテキストを読みやすくするダークモードも搭載。ダークモード時は主要部分のテキストが自動で白に変更されます。背景画像を少しぼかしてテキストを読みやすくするぼかし機能も搭載。同じように背景画像のモノクロ化、セピア化機能も搭載。これらの切り替えは瞬時に行えます。背景画像フルワイド化のやり方フルワイドで表示したいエリアを2個のモジュールで囲むこちらで用意した2つのモジュールを設置（挿入）します。（通常は記事ブロック内の最初と最後に設置します）これだけでフルワイド化は終了です。ココがちょっと元に戻す場合は2個のモジュールいずれも削除するかコメントアウトします。こういう時は最後のEND用のモジュールを削除し忘れがちなんですが、それをやってしまうとレイアウト崩れを引き起こしてしまいます。（面倒ですが現状ではこのやり方しかとれません）モジュール名のオシリに”START”と付いてる場合は必ず”END”があると思っていただければ。また記事ブロックごとに背景画像を変えることができる仕様上、モジュール内の数字と記事ブロックの数字を一致させる必要があります。記事ブロックを移動させたときなんかはここを見落としがちで、数字が一致してないと思った通りの画像が表示されなくなります。画像を選択最初のモジュールをダブルクリックすると画像挿入欄が表示されるので、表示したい画像ファイル名で差し替えます。①がPC表示時の画像設定で、②がモバイル用。赤線の部分が差し替える部分です。（ファイル名をコピー＆ペースト）画像をフォルダ分けしてない場合は「img/ファイル名」となります。しかしながら画像をフォルダ分けしてる場合は「img/フォルダ名/ファイル名」になります。本当はSIRIUS2のように専用のダイアログ内で画像選択とかできればいいんですけどさすがにそれは無理なのでね。ご容赦ください。背景画像の表示に関して、PCの場合は画面をスクロールしても背景画像は固定のまま動きません。これに対してiOS搭載モバイル機器では背景画像の固定化ができないため、必然的にスクロールと共に背景画像も動いてしまいます。しかしながら【Volar2】では疑似的に固定化させる仕様にしてます。一応言語化しますと、背景画像が設定してあるエリアがスクロールで表示される際、テキストと一緒に背景画像が下から上がってきます。そのままエリア内のテキストや画像が終了するまでスクロールしても背景画像は画面内に固定表示されます。そしてエリア内のコンテンツがスクロールと共に終わりになると背景画像も上に上がって消えるというものです。なおモバイル背景画像にPC用の背景画像と同じ画像を指定している場合は、下の画像のように一部のエリアが表示される仕様になってます。ゆえにモバイル機器では想定していたのと違う画像が表示されるケースも少なくありません。そんな時はモバイル用に別画像を指定します。ちなみに当サイトでPC用に用意したこちらの画像ですが、（線画はライナストックのイラスト素材をお借りしてます）これをそのままスマホで見るとこんな感じで「？」という雰囲気になっちゃいます。（このあと紹介する”ダークモード”が有効なので画像が少し暗くなってます）ご覧になる時期によっては説明用のキャプチャ画像の内容やデザインが変更になってる可能性もあります。予めご了ください。そこでモバイル用にはこちらの画像を別指定してみました。前よりはおさまりがよくなりました。（必要なら）オプションも選択可能背景に画像を設置する場合、デメリットが1つあります。（画像によっては）テキストの可読性が下がる。先ほどご覧いただいた背景画像の例はダークモードというエフェクトがかかってます。そのエフェクトを追加する前の素の状態がこちら。（先ほどと使用画像は別になりますが）テキストがちょっと見にくくないですか？これを解消するために追加したのが「透明度の付いた暗めのフィルムを1枚被せたような効果」を演出できるオーバーレイというエフェクトです。（※以降は”ダークモード”と表記）筆者フリー素材なんかをそのまま使うにはちょっと使いにくいって方はこれ以降のオプション機能を設定するとイイ感じの仕上がりになる場合があります。オーバーレイとは？画像の上に色や画像などを重ねて印象を変える手法。画像を少し暗くしたり明るくすることで画像の上に載ってるテキストの視認性をアップさせる効果もあります。ダークモードこのオーバーレイを追加すると背景画像が若干暗くなって、画像自体は見せるのが主目的ではなくあくまでイメージとしての役割感を強めることができます。ただしその反動として黒のテキストはより見にくくなってしまいます。そこでダークモード時はテキストカラーが自動で白に変わる設定も同時に付けてます。縦線ホールドで左右にドラッグ＜ブロック設定＞でもテキストカラーを白に変えることはできます。ただしブロック設定の場合はテキストすべてが白になってしまうため、たとえば（背景が明るい青の）『ヒント』装飾を使って表示させたコンテンツなんかは中身のテキストが全く見えなくなってしまうという現象が起きてしまいます。一方、【Volar2】のダークモードは、主たるテキストのみが自動で白に変わるよう調整しているのでそういった弊害は少ないです。筆者”主たる”とか”少ない”書いてるのはすべての表示で可読性をチェックしたわけではないからであって、不具合が確認できたものについては順次対応していきます。どうやっても事前の設定だけではテキストが白で表示されないケースが出てきた場合に備えて『テキストカラーを強制的に白にするクラス（.f_w）』も別途用意はしてます。ダークモードの設定方法ダークモードにするのは至って簡単です。こちらで用意したモジュールテキスト内に「dark」と書き足すだけ。これだけで背景画像が暗くなり、テキストカラーは白に変わります。筆者ただしダークモードに限り、「dark」と加筆された専用モジュール内にも同じように画像ファイル名をコピー＆ペーストしておく必要があります。一度設定しておけばあとは「dark」を付けるだけで瞬時に背景画像が暗くなります。「背景画像はそのまま・テキストカラーも黒のまま変更なし」の条件下でテキストの可読性をあげるやり方として、『テキストブロックの背景に半透明の白背景を置く』というやり方もあります。ただそこまでやるとHTML構造がどんどん複雑になって、初心者の方は万が一表示がおかしくなった際の修正にとまどうおそれもあるので、ここでは「そんなやり方もある」ということだけご紹介しておきます。画面の狭いモバイル機器で背景画像を表示させるとかえって見にくくなるケースもあったりします。そういう時はモバイル機器だけ画像非表示もできます。その代わりに背景”色”を設定したいときは＜ブロック設定＞を利用します。ただしダークモード時に限ってはダークモード自体は”活きてる”のでテキストカラーは白のままで表示されてしまいます。よって背景色が明るいとテキストが見えにくくなるという現象が起きてしまいます。そのためダークモード時は『ブロックの背景色』で暗めの背景色を選択する必要があります。またダークモード時はたとえば明るい赤をして指定してもダークモード効果により若干暗めの赤になってしまうのでこれらの点だけご注意ください。ぼかしモードテキストの可読性アップのやり方として『背景画像をぼかす』やり方（ぼかしモード）も搭載してます。上のサンプル画像でもわかるように、ぼかしモード時のテキストカラーは変わりません。よってぼかしモードで使える背景画像はどちらかと言えば明るめの素材になってきます。ぼかしモードの設定方法ぼかしモードにするのも簡単です。ダークモードと同じようにモジュールテキスト内に「blur」と書き足すだけ。これだけで背景画像にぼかし効果がかかります。モノクロ・セピアモードダークモード・ぼかしモード以外にモノクロモード（背景画像が白黒になる）、セピアモード（背景画像がセピア調になる）も用意してます。設定の仕方はこれまでと同じで、モノクロモードなら「bw」という文字列で、セピアモードなら「sepia」という文字列で置き換えるだけで瞬時に発動します。（ぼかし効果はつきません）補足説明ダークモード以外はテキストは通常カラーのまま。ぼかしモードとモノクロモードの併用といった使い方は不可。どうしても2つのモードを同時使用したい時は…画像加工ソフトを使ってそれっぽく加工した画像を（エフェクトに頼ることなく）そのまま背景画像として使うのが手っ取り早い。＜フルワイド背景画像＞と＜ブロック設定＞による背景色指定のどちらも設定していた場合はフルワイド背景画像が優先表示される。画像加工ソフトならAffinity Photoをおススメします。画像加工はAffinity Photoにお任せ本格的な画像加工でおススメするのが安価で高機能なAffinity Photoです。背景色＋ダークモードの組み合わせこれまでは背景画像を利用する前提でのレイアウト調整でしたが、ここでは背景色に応じて自動的にダークモードにする機能についてご紹介していきます。ダークモードと言っても具体的にはテキストカラーを自動的に白に変えるだけのものですが、割と便利な機能です。たとえばSIRIUS2の＜ブロック設定＞で『ブロックの背景色』に濃いめの色を指定したとします。当然黒いテキストは見づらくなります。（範囲選択したところだけ反転してかろうじてわかります）「じゃあテキストカラーを白に設定しよう」ということで『ブロックの文字色』に”白”を設定してみます。すると通常のテキストは問題ないんですが、ヒント枠内のテキストまで白になってしまいました。しかも2個のH2見出しは依然として黒のままです。そこで今度は＜ブロック設定＞の『記事タイトルの文字色』にも白を設定してみます。ところが”記事タイトル”に入力したH2見出しは白になったものの、（当記事執筆時点では）”記事内部に設置したH2タイトル”は黒のままです。（理論的には間違いではないんですけどね）筆者H3タイトル以下はちゃんと白になるのでこれはおそらく調整ミスでしょう。いつか直るんでしょうか。いずれにしてもこれだとちょっと使えないですよね。そこで今度はフルワイド化したいエリアのアタマとオシリを、【Volar2】で用意している2個の専用のモジュールではさんでやります。その結果がこちら。必要な部分だけ”白”テキストになりました。筆者ただし＜ブロック設定＞内の『ブロックの文字色』のみ空欄にしてあります。ここに白のカラーコードを入れちゃうとすべてのテキストが白に変わっちゃうので。『記事タイトルの文字色』は白設定のままです。（ここは【Volar2】では制御できないため）元に戻すときは2つのモジュールを両方とも削除（もしくはコメントアウト）する必要があります。どちらか一方だけだとレイアウト崩れが起きるのでその点だけご注意ください。

ここはランディングページ（LP）の体裁でご紹介していきます。ご覧になってわかるようにコンテンツ以外は（最下部のコピーライト表記を除いて）非表示にしてます。こういったLPを作るには不必要なブロックを1個ずつ消す（非表示にする）必要があるんですが、1個1個確認しながらスタイルシートを操作するのは初心者やスタイルに詳しくない方にはかなり面倒な作業となります。【Volar2】ではそういった方のために予め消したい項目をリストアップして用意してあります。たとえばこのページに関してはSIRIUS2標準の項目＋【Volar2】独自の項目すべてを非表示にする設定から、H1ページタイトルとコピーライトのみ表示するカスタム設定にしてあります。機能が増えてきた場合はその部分が表示されてることも予想されます。その場合は分かり次第、追加設定で対処します。設定方法項目はリスト形式で用意してあり、（マニュアル操作にはなりますが）すべて非表示にしたければこちらで用意した設定をコピー＆ペーストするだけです。またこのページのように「ページタイトルと最後のコピーライトだけ表示させたい」なんていう場合は表示したい項目だけをコメントアウトするだけで表示できるようになってます。やり方としてはまずはサイト構成画面内の1カラムページにしたいページ上で右クリック→［エントリーページ（個別ページ）の設定］を開きます。レイアウトタブ内のカラム数で「1カラム」を選択、これで1カラムに変わります。サイドメニューを非表示にしたいなら「メインメニューを非表示にする」にチェックを入れます。このようにサイドメニュー無しの1カラムページはSIRIUS2標準の機能ですぐに作れます。ここからは【Volar2】の設定です。個別ページの設定で詳細設定タブをクリック→スタイル割り込みにこちらで用意している専用のスタイルをコピー＆ペーストします。デフォルトが非表示設定なので、ヘッダーやパンくずリストやフッターなど全消し（全部非表示）ならそのままでOK。これがたとえばH1ページタイトルは活かしたまま（表示）にしたいなら該当する項目をコメントアウトして除外します。リストの右側にはそれぞれどんな項目なのかコメントアウトで紹介してるのでそれをもとに選択していくだけで、必要なモノだけを表示させることができるようになってます。ロゴ画像及びH1（ページタイトル）に関しては中央寄せの設定にしてあります。（元の左寄せにも戻すことも簡単にできます）直前のページに戻るこのページを閉じるトップページに戻る