検索結果

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】ではトップページのみですがヘッダー画像を動画ヘッダーに変えることができます。動作チェック済み（対応可能）なのはmp4動画のみです。（※Youtube動画は現状では未対応）この機能はデフォルトでは無効化されてます。DEMOページを見てみる筆者DEMOサイトで使ってるのは動画ACからダウンロードしたフリー素材です。概要可能な動画形式設置可能な動画形式は拡張子が「.mp4」の動画のみです。mp4動画であれば今は基本的にはどのブラウザでも表示可能です。動画サイズ動画の解像度は特に制限はありません。ただしファイルサイズが大きいと読み込みに時間がかかるのでできるだけ軽量化することをおすすめします。DEMOサイトのヘッダー動画（ドローン撮影による田園風景）の解像度は960×540px、ファイルサイズは2.3MBまで落としてあります。筆者ファイルサイズがあまりに大きいとオンラインサービスでは変換作業や圧縮作業を受け付けてくれない場合もあります。そういう時は（フリー）ソフトをインストールして圧縮をかけるというやり方もあります。動画ヘッダーの高さ動画の高さは【ブラウザの横幅に合わせて（縦横比率を保ったまま）高さが自動伸縮・高さを指定（600pxなど）・ブラウザの高さいっぱい（デモサイト）】の3種類から選択可能。専用の外部スタイル上で変更できます。スマホでは【動画の横幅に合わせて（縦横比率を保ったまま）縮小表示】固定です。粗さ（ボケ感）解消エフェクトヘッダーに載せる動画は解像度（特に横幅）に関係なくブラウザの横幅いっぱいに表示される仕様（フルワイド）にしてます。それゆえファイルサイズを落としたいがために解像度があまりに低いと（たとえば640pxとか）、ブラウザの広さに応じて伸びた画面は粗さが目立ったりボケ感がかなり強調される可能性もあります。そういう時のためにボケ感を”イイ感じに見せる”効果もいくつか搭載してます。SIRIUS2に標準で備わってるヘッダー画像の「オーバーレイの表示」をONにする（少し暗っぽい感じになります）【Volar2】側で用意しているフィルター群（グレースケール・モノクロ・ぼかし・セピア・ドット柄）を被せてボケ感を和らげる背景動画の設定有効化のやり方【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》を利用するには、『【Volar2】ヘッダーに動画（スタイル）』と『【Volar2】ヘッダーに動画（HTML）』という2つのモジュールの［有効］のチェックをONにし、『【Volar2】通常のヘッダー画像エリア...』のチェックは外します。①のモジュールには専用のスタイルが格納されてます。動画の高さはここで変更可能です。（デフォルトは【ブラウザの高さいっぱい】）②のモジュールをダブルクリックすると下のような画面が開くので、赤線部分を登録済み動画のファイル名で差し替えます。（※一部を抜粋）（※動画のSIRIUS2への登録方法はマニュアルに記載してます）これだけで”とりあえず”ヘッダー画像エリアは動画ヘッダーでの表示に変わります。筆者動画ヘッダーの上に画像やテキストを表示させることもできます。注意点【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》はできるだけ設置手順を簡素化するべく、SIRIUS2のヘッダー画像設置機能をベースにカスタマイズしてます。レイアウトは1カラム（ワイド）トップページのヘッダーをインパクトのある動画に差し替えるくらいですからレイアウトは1カラム（ワイド）のみの対応及び動作チェックとなってます。（通常の1カラムでもイケると思いますが、2カラム or 3カラムは動作保証外です。チェックしてません）なおSIRIUS2のヘッダー画像の機能を”間借り”してるので、ロゴや（グローバル）メニューは通常通り表示されます。オーバーレイが使える【サイトオプション】→【デザインの設定】→【ヘッダーの設定】→『オーバーレイの表示』も機能します。筆者動画の上に静止画やテキストを表示させることもできるので、『オーバーレイの表示』をONにすればテキストがより見やすくなります。ほかにも「グレースケール・モノクロ・ぼかし・セピア」といたエフェクト類も用意してます。ヘッダー画像が一瞬表示される【Volar2】の《ヘッダー画像の代わりに動画ヘッダー》はSIRIUS2のヘッダー画像表示機能を”間借り”してるせいか、動画ヘッダーが表示される前に一瞬だけヘッダー画像（header.jpg）が表示されてしまいます。これはちょっとみっともない動作で可能な限り避けたいところ。じゃあヘッダー画像を設定しなければいいかというと、（DEMOサイトのように）動画表示エリアをロゴ画像やメニューの背景まで広げるためレイアウト設定で「1段（上部固定・ヘッダーワイド）」にしてる場合、ヘッダー画像を指定してないとなぜか動画をメニューの背景まで広げることができなくなります。（おそらくスタイルがどこかでぶつかってるんだと思いますが）それにヘッダー画像を未設定にするとそもそもの問題としてサイト全体がヘッダー画像なしでの表示になってしまいます。話がちょっとそれましたが、”ヘッダー画像が一瞬表示される”現象はおそらくファイルの読み込み順のせいかと思われます。ただこれの変更（改修）作業はかなり手がかかりそうなので代替策を用意しました。ローディング画面個人的には動画ヘッダーが表示されるまで”ゴースト画面”が一瞬でも出てしまうのが気持ち悪いので、それを隠すためDEMOサイトではシンプルなローディング画面を付けてあります。（※画像不使用）筆者本来であればサイトを開くと1～10秒程度『青っぽい画面とくるくる回るローディング画面』が表示され、それが消えると動画がスタートします。しかしながらDEMOサイトはトップページのみのとても”軽い”サイトなので、環境によっては一瞬しか表示されないかもしれません。【Volar2】には上記ローディング画面用の設定を搭載してるのでお好みでご利用ください。この機能はデフォルトでは無効化されてます。有効化のやり方【Volar2】の《ローディング》機能は、『【Volar2】ローディング（HTML）』と『【Volar2】ローディング（スクリプト）』という2つのモジュールの［有効］のチェックをONにするだけで発動します。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】ではトップページのみですがヘッダー画像をズーム付きのフェード切り替え画像スライダーに変更することができます。DEMOページを見てみる概要【Volar2】の《ヘッダーエリアに画像スライダー》の基本仕様は以下の通り。ヘッダーエリアに3枚の画像をフェードで切り替えしながらループ表示。（※画像は3枚固定）3個目の画像表示後は1個目の画像に戻る。画像はズームアウトしながらの表示。（※ズームインもズームなしも可能）総尺は1周およそ10秒。（これ以上長くてもサイト訪問者は見てくれないと思い10秒に設定＆変更不可）画像上には2段テキストも表示可。（カラーやサイズは変更可）こういった仕様から【Volar2】の《ヘッダーエリアに画像スライダー》はどちらかというと『サイトイメージの向上』的な使い方になろうかと。たとえば時計を扱うサイトなら時計の象徴的なイメージカットとか。美容関連のサイトなら商品のイメージカットや身に着けてる人物のイメージカットなどでしょうか。有効化この機能はデフォルトでは無効化されてます。有効化のやり方《ヘッダーエリアに画像スライダー》機能を利用するには、①『【Volar2】ヘッダーに画像スライダー（スタイル）』と②『【Volar2】ヘッダーに画像スライダー（HTML）』という2つのモジュールの［有効］のチェックをONにし、③『【Volar2】通常のヘッダー画像エリア...』のチェックは外します。画像設定画像の登録やカスタマイズのほとんどは専用スタイルシート上で行うことになります。表示したい画像は前もって『画像管理』でSIRIUS2内に取り込んでおきます。続いてSIRIUS2の上部メニューからテンプレート→スタイルシート編集→（※専用スタイル）を開きます。下の赤線部分の「xxx」を、登録した画像ファイル名で差し替えます。①が1枚目の画像ファイル名、②が2枚目の画像ファイル名、③が3枚目の画像ファイル名になります。これでとりあえず画像スライダーは稼働します。カスタマイズ可能な項目基本的にはこちらで用意した設定をデフォルトで使っていただくのがベストですが、いくつかカスタマイズ項目も用意はしてます。画像にオーバーレイデフォルトで画像にはオーバーレイ（※画像を少し暗くする）がかかってます。これが必要ないという方は以下の手順で解除が可能です。モジュール『【Volar2】ヘッダーに画像スライダー（HTML）』を開きます。（下の画像の）オーバーレイ用のクラスである「cover」というテキストを削除します。「cover」の直前の半角スペースも削除します。元に戻すときは”半角スペース＋cover”になります。画像上にテキスト画像スライダー上にテキストを表示できます。「見出し」と「説明文」の2段形式。（テキスト非表示も可）先ほど同様、モジュール『【Volar2】ヘッダーに画像スライダー（HTML）』内にテキスト表示エリアがあるのでそこに記述します。画像の高さデフォルト設定ではブラウザの高さに自動的に合わせる仕様になってます。これは700pxなどの固定高さに変更することもできます。スマホでは真ん中エリアが表示されます。

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。＜ヘッダーアニメーション＞機能を使うと、トップページのヘッダー静止画像を（動きのある）アニメーション表示に変えられます。アニメーションの種類は全8種類（「指定なし」を含めれば9種類）。テキストの表示や画像のオーバーレイも設定可。画像の登録＜ヘッダーアニメーション＞を利用するにはデザインタブ内にある【ヘッダーアニメーション】をクリック。下のような設定画面になるのでまずは『アニメーションを有効にする』をONにします。続いて上の画像の『新規追加』をクリックすると画像管理画面が表示されるので、表示させたい画像を選択していきます。（Shiftキーで連続複数選択、Ctrlキーで個別での複数選択が可）「挿入」ボタンをクリックすると『アニメーション画像』内に画像が追加されます。IDが若い順に（上に位置する画像から順に）画像が表示されるので、表示順を変えたい時は画像を選択して「上に移動」「下に移動」で調整します。とりあえずここでプレビューしてみます。登録した画像がズームアウトしながら10秒前後で次の画像に切り替わるのが確認できるかと思います。筆者画像切り替わり時のエフェクトはフェードのみです。表示させる画像はどれも同じサイズにしておくと表示上の見栄えが統一できます。また大きく表示されるヘッダー画像なので画像サイズが小さめだと拡大表示された際にボケが強調される恐れがあります。そのため画像はある程度大き目のサイズで用意した方がいいです。プレビュー画面の「スマホ表示」でスマホ上での見え方も忘れずにチェックしておきます。テキスト表示画像上にはテキストも表示できます。しかも画像ごとに異なるテキストが設定可。改行もそのまま表示。テキストの位置や装飾に関しては後述する『テキスト設定』のところで詳しくご紹介します。共通設定必要に応じて各種設定を行っていきます。画像の高さ画像の表示サイズ（高さ）を変えたい時はここで設定します。PCとスマホ用が用意されてるのでそれぞれ調整していきます。筆者画像の表示”幅”はレイアウト設定での設定値に基づいて自動調整されます。なお画像の表示範囲は使用する画像の縦横のサイズによって微妙に変わってくるので、想像していたのと大きく異なっている場合は画像サイズの調節が必要になってくる場合もあります。その他の設定縮小版アニメーションの種類画像の動き（アニメーション）をここで指定できます。「ズームアウト（カメラが徐々に引いていくように画像全体が徐々に見えてくる）」の他にもいくつかあるので実際に動きを確認してみてください。選択肢をスクロールしていくと「指定なし」というのが出てきます。それを選択するとアニメーションなしの静止画状態でフェードしながら画像が切り替わります。アニメーション時間次の画像に切り替わるまでの長さの調整です。筆者デフォルトの10秒はけっこう長いです。画像3枚でも30秒。ただし時間は4秒～16秒までしか設定できないようです。テキストのH2表示画像上のテキストがH2の見出し扱いになります。（H2用の見出し装飾などは反映されません）テキスト設定画像上に表示させるテキストはある程度調整が可能です。サイズ・色縮小版文字サイズ（PC・スマホ）テキストの大きさの調整項目でPC用とスマホ用が用意されてます。プレビューで確認しながら調整するといいでしょう。ただし実際にはPC用は56xp、スマホ用は32pxが上限になってるようです。試しに大きな数値を入れても56pxや32pxに強制変換されてしまいます。ちなみに56pxはどんな大きさかというと…縮小した画像だとちょっとわかりにくいですが、実際に見てみると56pxはまあまあ大きいです。ただもっと大きくして目立たせたいという場合はテキスト入れ込みの画像を用意する必要があります。テキストの状態でもっと大きくする方法も一応あるにはあります。ただしHTMLやCSSを駆使するカスタマイズになるので敷居はちょっと高めです。あとでやり方の一例をご紹介します。文字色テキストの色に関してはカラーコードがわかる方は直接記述してもいいし、わからない方は用意されてるカラーテーブルから選択すると簡単に設定できます。筆者テキストの内容は画像ごとに別々のものを設定できますが、文字サイズや文字色に関しては統一設定となります。エフェクト・位置縮小版エフェクトテキストの表示に動き（アニメーション）を付けられます。「フェードイン」や「フェードレフト」などいくつか用意されてますがいずれもフェードタイプの動きになります。（実際にためして動きを確認してみてください）「指定なし」という選択肢もあります。こちらを選択するとテキストは最初から表示された状態になり、画像がフェードで切り替わると同時にテキストも同じタイミングで切り替わります。これを利用するとヘッダーアニメーションには搭載されてない、とある機能を疑似的に再現することができます。それがサイト名と説明文のテキスト表示。通常のヘッダーであればレイアウト設定の『ヘッダー』で「ヘッダーテキスト」や「説明文」を”表示”にしていれば自動的にそれらがテキストで表示されます。しかしながらヘッダーアニメーションにはその機能は搭載されていません。こんなときは『エフェクト』で「指定なし」を選択し、登録したすべての画像に同じテキストを指定すれば”疑似的に”サイト名と説明文を表示させることができます。ただし1行目（サイト名）のテキストは大きく表示して2行目（説明文）のテキストは若干小さめになんてことはできません。ですが、こちらも1行目と2行目で文字サイズをそれぞれ変える方法があるにはあります。あとでやり方の一例をご紹介します。縦の位置テキストの”縦”（画面の上の方か下の方か…）の表示位置です。選択肢には『デフォルト（中央）・上側・下側』の3つが用意されてます。横の位置テキストの”横”（画面の左側が右側か…）の表示位置です。選択肢には『デフォルト（中央）・左側・右側』の3つが用意されてます。ちなみに『縦』→中央＆『横』→中央を選んだ際の表示（※PC表示）がこちら。（”画面中央”という意味ですね）『縦』→上側＆『横』→左側を選んだ際の表示がこちら。けっこう左寄りです。『縦』→中央＆『横』→左側を選んだ際の表示がこちら。『縦』→下側＆『横』→左側を選んだ際の表示がこちら。『縦』→上側＆『横』→右側を選んだ際の表示がこちら。これもかなり右寄り。筆者『横』→右側を選択した時のテキストは右寄せでの表示になります。『縦』→中央＆『横』→右側を選んだ際の表示がこちら。『縦』→下側＆『横』→右側を選んだ際の表示がこちら。全体的にはかなり端っこに納めるレイアウトになってます。（画面幅の狭いスマホではそれほど違和感はありません）こちらも表示位置をある程度自由に選べる調整方法があるにはあります。あとでやり方の一例をご紹介します。非表示テキストを非表示にしたいときはONにします。設定だけ済ませておいて一時的に非表示にするときなんかに使えそうですね。シャドウシャドウテキストに影やぼかし等のエフェクトを付けられます。ぼかしシャドウのぼかし具合の調整項目です。シャドウの色シャドウにつける色の選択項目です。プルダウンメニューのカラーテーブルから選択するかカラーコードを直接入力します。詳細設定ここでは画像のオーバーレイに関する設定が行えます。オーバーレイとは？画像の上に色や画像などを重ねて印象を変える手法。画像を少し暗くしたり明るくすることで画像の上に載ってるテキストの視認性をアップさせる効果もあります。表示オーバレイ効果を有効化したい時はここをONにします。色オーバーレイに使う色をプルダウンメニューのカラーテーブルから選択するかカラーコードを直接入力します。透明度オーバーレイの透明度を設定します。0に近くなるほどオーバーレイの色が薄くなり（画像がはっきり見える）、1に近くなるほど色が濃く（画像が暗く）なります。種類選択肢には『デフォルト・オーバーレイ』の2種類があります。両者の違いですが…言語化するのがちょっと難しいので比較画像でご覧下さい。最初のパターンはオーバーレイなしの通常画像と透明度「0.3」の「デフォルト」設定画像の比較。オーバーレイをかけた方はテキストの視認性が若干上がります。続いてオーバーレイなしの通常画像と透明度「0.3」の「オーバーレイ」設定画像との比較。こちらは差がイマイチわかりにくいですね。次は透明度「0.3」の「デフォルト」設定画像と透明度「0.7」の「デフォルト」設定画像の比較。透明度の数値を0.7まで上げると画像はだいぶ暗くなります。今度は透明度「0.3」の「デフォルト」設定と透明度「0.3」の「オーバーレイ」設定の画像の比較。最後は透明度「0.3」の「オーバーレイ」設定と透明度「0.7」の「オーバーレイ」設定画像の比較。（今回のサンプル画像では）『種類』で「オーバーレイ」を指定した画像に関しては透明度を変えても大きな変化はあまり見られませんでした。利用する画像によっても印象はだいぶ変わってくるので、これは実際にトライしていい感じの設定を見つけるしかないですね。【Volar2】の画像スライダーとの違いカスタムテンプレート【Volar2】では、＜ヘッダーアニメーション＞の機能が実装される前からほぼ同じ機能の《ヘッダー画像の代わりに画像スライダー》を実装済みです。今回＜ヘッダーアニメーション＞機構が搭載されたことで【Volar2】の同機能は廃止しようかとも思いました。しかしながら使い勝手に微妙に差があるので敢えて残してみることにしました。それぞれの機能の違いをご紹介しておきます。ヘッダーアニメーション画像スライダー【Volar2】画像登録枚数制限なし3枚固定画像登録方法専用ダイアログにて画像選択専用スタイルシート上で画像ファイルを名をコピー＆ペースト画像上のテキスト表示画像ごとに異なるテキスト表示可（文字サイズは統一）1種類のテキストを常時表示（2段に分けたテキストの文字サイズ違いもOK）テキスト表示位置5か所から選択可画面中央のみ画像の高さ設定で自由に調整可（ただし固定サイズ）自動的にブラウザ画面の高さいっぱいに表示画像表示時間4秒～16秒で設定可画像3枚で約10秒（固定）画像切り替えフェードフェードオーバーレイ効果可可こうやって比較するとやはりSIRIUS2標準の＜ヘッダーアニメーション＞の方が使い勝手はよさそうです。では【Volar2】の《画像スライダーヘッダー》のメリット？はと言えば、ブラウザ全画面での表示でしょうか。（※レイアウト設定で「上部固定・ヘッダーワイド」選択時）【Volar2】《画像スライダーヘッダー》はあくまでイメージ的な使い方なので、ファーストビューで（PCでもスマホでも）全画面表示だとそれなりのインパクトは出るかと思います。あとはテキストの表示方法でしょうか。＜ヘッダーアニメーション＞では行を分けて文字サイズを変えたりするのは通常ではできません。一方、【Volar2】の《画像スライダーヘッダー》は専用のスタイルシート上での変更は必要ですが、2段テキストのそれぞれの文字サイズを変えられます。ということでお好きな方をご利用くださいという感じです。SIRIUS2の＜ヘッダーアニメーション＞を有効化すると自動的に通常のヘッダー設定は無効化されます。その際ソースを見る限りでは通常ヘッダー部分のHTML自体が削除されるようで、そうなると通常ヘッダーに設定されてたH1も消えてしまいます。その代わりにヘッダーアニメーションのどこかにH1が充てられているかというとそうでもなさそうなんですね。つまりヘッダーアニメーションを有効化するとトップページからH1が消えてしまうみたいなんです。（あくまで筆者が確認した限りなので見落としがあるかもしれません）ということで【Volar2】の《ヘッダー画像の代わりに画像スライダー》では2段テキストの1段目にH1を設定してあります。