画像の登録
＜ヘッダーアニメーション＞を利用するにはデザインタブ内にある【ヘッダーアニメーション】をクリック。
下のような設定画面になるのでまずは『アニメーションを有効にする』をONにします。
続いて上の画像の『新規追加』をクリックすると画像管理画面が表示されるので、表示させたい画像を選択していきます。
（Shiftキーで連続複数選択、Ctrlキーで個別での複数選択が可）
「挿入」ボタンをクリックすると『アニメーション画像』内に画像が追加されます。
IDが若い順に（上に位置する画像から順に）画像が表示されるので、表示順を変えたい時は画像を選択して「上に移動」「下に移動」で調整します。
とりあえずここでプレビューしてみます。
登録した画像がズームアウトしながら10秒前後で次の画像に切り替わるのが確認できるかと思います。
筆者
画像切り替わり時のエフェクトはフェードのみです。
表示させる画像はどれも同じサイズにしておくと表示上の見栄えが統一できます。
また大きく表示されるヘッダー画像なので画像サイズが小さめだと拡大表示された際にボケが強調される恐れがあります。
そのため画像はある程度大き目のサイズで用意した方がいいです。
プレビュー画面の「スマホ表示」でスマホ上での見え方も忘れずにチェックしておきます。
テキスト表示
画像上にはテキストも表示できます。
しかも画像ごとに異なるテキストが設定可。
改行もそのまま表示。
テキストの位置や装飾に関しては後述する『テキスト設定』のところで詳しくご紹介します。
共通設定
必要に応じて各種設定を行っていきます。
画像の高さ
画像の表示サイズ（高さ）を変えたい時はここで設定します。
PCとスマホ用が用意されてるのでそれぞれ調整していきます。
筆者
画像の表示”幅”はレイアウト設定での設定値に基づいて自動調整されます。
なお画像の表示範囲は使用する画像の縦横のサイズによって微妙に変わってくるので、想像していたのと大きく異なっている場合は画像サイズの調節が必要になってくる場合もあります。
その他の設定
縮小版
- アニメーションの種類
-
画像の動き（アニメーション）をここで指定できます。
「ズームアウト（カメラが徐々に引いていくように画像全体が徐々に見えてくる）」の他にもいくつかあるので実際に動きを確認してみてください。
選択肢をスクロールしていくと「指定なし」というのが出てきます。
それを選択するとアニメーションなしの静止画状態でフェードしながら画像が切り替わります。
- アニメーション時間
-
次の画像に切り替わるまでの長さの調整です。
筆者
デフォルトの10秒はけっこう長いです。画像3枚でも30秒。
ただし時間は4秒～16秒までしか設定できないようです。
- テキストのH2表示
-
画像上のテキストがH2の見出し扱いになります。
（H2用の見出し装飾などは反映されません）
テキスト設定
画像上に表示させるテキストはある程度調整が可能です。
サイズ・色
縮小版
- 文字サイズ（PC・スマホ）
-
テキストの大きさの調整項目でPC用とスマホ用が用意されてます。
プレビューで確認しながら調整するといいでしょう。
ただし実際にはPC用は56xp、スマホ用は32pxが上限になってるようです。
試しに大きな数値を入れても56pxや32pxに強制変換されてしまいます。
ちなみに56pxはどんな大きさかというと…
縮小した画像だとちょっとわかりにくいですが、実際に見てみると56pxはまあまあ大きいです。
ただもっと大きくして目立たせたいという場合はテキスト入れ込みの画像を用意する必要があります。
- 文字色
-
テキストの色に関してはカラーコードがわかる方は直接記述してもいいし、わからない方は用意されてるカラーテーブルから選択すると簡単に設定できます。
筆者
テキストの内容は画像ごとに別々のものを設定できますが、文字サイズや文字色に関しては統一設定となります。
エフェクト・位置
縮小版
- エフェクト
-
テキストの表示に動き（アニメーション）を付けられます。
「フェードイン」や「フェードレフト」などいくつか用意されてますがいずれもフェードタイプの動きになります。
（実際にためして動きを確認してみてください）
「指定なし」という選択肢もあります。
こちらを選択するとテキストは最初から表示された状態になり、画像がフェードで切り替わると同時にテキストも同じタイミングで切り替わります。
これを利用するとヘッダーアニメーションには搭載されてない、とある機能を疑似的に再現することができます。
それがサイト名と説明文のテキスト表示。
通常のヘッダーであればレイアウト設定の『ヘッダー』で「ヘッダーテキスト」や「説明文」を”表示”にしていれば自動的にそれらがテキストで表示されます。
しかしながらヘッダーアニメーションにはその機能は搭載されていません。
こんなときは『エフェクト』で「指定なし」を選択し、登録したすべての画像に同じテキストを指定すれば”疑似的に”サイト名と説明文を表示させることができます。
ただし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段テキストのそれぞれの文字サイズを変えられます。
ということでお好きな方をご利用くださいという感じです。
テキスト関連のカスタマイズ
ここからはテキスト関連のカスタマイズの一例をご紹介していきます。
ただしHTMLやCSSなどの要素が出まくりなので興味のある方のみご覧下さい。
またかなりかみ砕いてご説明してるので内容もかなり長めとなっております。
ご利用に際して
この先は「サイトが正しく表示されない」などのトラブルが発生する可能性もあるカスタマイズになりますゆえ、ご利用に際しては自己責任にてお願いします。
心配な方はカスタマイズする前のデータをコピーするなどしてバックアップをとっておいてください。
”基本の”テキストの書き方
＜ヘッダーアニメーション＞ではテキスト欄に文字を打ち込むだけで設定済みのレイアウトで表示されます。
ここで文字サイズや文字の表示位置などをある程度自由に調整できるようにするには以下のような形式でテキストを記述します。
筆者
今回はサイト名とサイト説明文を2行（2段）で表示する体でやっていきます。
書き方はこちら。
赤文字部分のみ変更可です。
<span class="headertitle">サイトタイトル</span><br /><span class="headerdesc">サイト説明文サイト説明文サイト説明文サイト説明文</span>
『共通設定』→『その他の設定』→『テキストのH2表示』のチェックをONにすればH2見出しとして認識されます。
（デザインの変更は生じません）
これを画像すべてのテキストにコピー＆ペーストします。
さらにテキストを常時表示させるため【テキスト設定】→『エフェクト』は「指定なし」にしておきます。
続いて下のスタイルを【テンプレート】→【スタイルシート編集】→【ユーザー指定スタイル】に加筆します。
/*
★ヘッダーアニメーション・テキストカスタマイズ★
*/
#header-mv .slide-title {
line-height: 1.4;
}
#header-mv .slide-title span.headertitle,
#header-mv .slide-title span.headerdesc {
opacity: 1!important;
font-feature-settings: "palt";
}
#header-mv .slide-title .headertitle {
font-size: 30px;/*モバイルでのテキストサイズ（1段目）*/
}
#header-mv .slide-title .headerdesc {
font-size: 16px;/*モバイルでのテキストサイズ（2段目）*/
}
@media screen and (min-width: 1025px) {
#header-mv .slide-title span.headertitle {
font-size: 60px;/*PCでのテキストサイズ（1段目）*/
}
#header-mv .slide-title span.headerdesc {
font-size: 26px;/*PCでのテキストサイズ（2段目）*/
}
#header-mv .slide-title.top-left{/*『縦』上側・『横』左側*/
top:10%;
left:5%;
text-align: left;
}
#header-mv .slide-title.top-center{/*『縦』上側＆『横』デフォルト（中央）*/
top:10%;
}
#header-mv .slide-title.top-right{/*『縦』上側＆『横』右側*/
top:10%;
right:5%;
text-align: left;
}
#header-mv .slide-title.center-left{/*『縦』デフォルト（中央）＆『横』左側*/
left:5%;
text-align: left;
}
#header-mv .slide-title.center-right{/*『縦』デフォルト（中央）＆『横』右側・*/
right:5%;
text-align: left;
}
#header-mv .slide-title.bottom-left{/*『縦』下側＆『横』左側*/
left:5%;
bottom:8%;
text-align: left;
}
#header-mv .slide-title.bottom-center{/*『縦』下側＆『横』デフォルト（中央）*/
bottom:8%;
}
#header-mv .slide-title.bottom-right{/*『縦』下側＆『横』右側*/
right:5%;
bottom:8%;
text-align: left;
}
}
文字サイズ
文字サイズは1行目と2行目で異なるサイズを指定できます。
①の”30”pxがモバイルでの1段目（サイトタイトル）の文字サイズ。
②の”16”pxがモバイルでの2段目（サイト説明文）の文字サイズになるので、それぞれ好みの数値に変更します。
同様に③の”60”pxがPCでの1段目（サイトタイトル）の文字サイズ。
④の”26”pxがPCでの2段目（サイト説明文）の文字サイズになるので、それぞれ好みの数値に変更します。
この時点で一度プレビューして文字サイズが変わっているのを確認してみます。
設定は『縦位置・横位置』とも「デフォルト（中央）」。
ヘッダーアニメーションのプレビュー機能には反映されないのでSIRIUS2標準搭載のプレビュー機能を使う必要があります。
テキストの表示位置
テキストの表示位置はデフォルト設定で『左上・左下・右上・右下・真ん中』の5つが用意されてます。
これらは固定位置で変更は効きません。
実際に試してみたところかなり端っこに表示されるなあというのが第1印象で、これを好みの位置に調整できるカスタマイズを考えてみました。
ただし画面幅の狭いモバイル機器での表示はデフォルト設定でもさほど違和感はないので、今回はPC上でのテキスト表示位置を好みの位置に調整するカスタマイズとなります。
先にモバイルでのテキスト表示位置を決めます。
たとえば画面左上にテキストを表示したいなら【テキスト設定】→『エフェクト・位置』→『縦の位置』と『横の位置』で、『縦の位置』→上側＆『横の位置』→左側を選択します。
この場合、下のように表示されます。
ここでPC用のテキスト位置を微調整するに当たって、こちらで用意したカスタマイズ用スタイル内の同じコメントが記されてる
#header-mv .slide-title.top-left{/*『縦』上側・『横』左側*/
ここで設定されてる数値を
top:10%;
left:5%;
から
top:20%;
left:15%;
に変えてみます。
top→（画面の）上から◯%離れた位置（※以下、どれも絶対値ではなくおおよその計算値です）
bottom→下から◯%離れた位置
left→左から◯%離れた位置
right→右から◯%離れた位置
その結果がこちら。
モバイルでは固定レイアウトなので変化はありませんが、PC上では若干内側で表示されるようになります。
筆者
他の位置も考え方は同じです。
「デフォルト（中央）」が含まれる位置の場合
#header-mv .slide-title.top-center{/*『縦』上側＆『横』デフォルト（中央）*/
のように「デフォルト（中央）」が含まれる選択肢を選択した場合。
『横』デフォルト（中央）に関しては水平位置が中央で変えようがないので、カスタマイズ用スタイルは
top:10%;
の設定欄しか用意してません。
”10”のところを変えればテキストの『縦』の表示位置が変わります。
『縦の位置』も『横の位置』も「デフォルト（中央）」つまり画面中央での表示はそれ以上変えようがないのでこちらも新たなスタイルは用意してません。
別のサンプルとして
『縦の位置』→下側＆『横の位置』→右側
を選択したとします。
この場合の表示はこちらのようになります。
ご覧になってわかるように＜ヘッダーアニメーション＞のデフォルト設定では右寄せになりますが、カスタマイズ設定では（「サイト名」と「サイト説明文」の表示を前提としてるので）左寄せでの表示にしてます。
関連ページ
-
SIRIUS2の＜画像最適化機能＞についての紹介ページ。 -
SIRIUS2の＜スマホ固定フッターメニュー＞機能についての詳細ページ。 -
SIRIUS2の＜4種のテンプレート＞についての紹介ページ。 -
SIRIUS2の＜PR表記＞についての紹介ページ。 -
SIRIUS2の1カラムLP向け＜ブロック設定＞についての詳細ページ。 -
SIRIUS2のトップページ表示用＜スライダー＞の使い方についての詳細ページ。 -
SIRIUS2のサイト全体の＜レイアウト設定＞についての詳細ページ。 -
SIRIUS2のサイト全体に共通する＜カラー設定＞についての詳細ページ。 -
SIRIUS2の＜見出し用装飾スタイル＞についての詳細ページ。