ヘッダーアニメーション・テキストカスタマイズ

 

＜ヘッダーアニメーション＞ではテキスト欄に文字を打ち込むだけで設定済みのレイアウトで表示されます。

 

もちろん画像ごとに異なるテキストを設定してもいいんですが、トップページという性格上、サイト名や簡単な説明文を常時表示させたい場合もあるでしょう。

 

そのときにSIRIUS2標準の設定だけだと細かい融通が利きにくい面もあったりします。

そこでここではサイト名とサイト説明文を2行（2段）で表示するやり方をご紹介してみます。

 

文字（テキスト）のサイズや表示位置などもある程度自由に調整できるカスタマイズも併せてご紹介します。

ただしHTMLやスタイルがふんだんに出てくるカスタマイズになるのであらかじめご了承ください。

 

＜ヘッダーアニメーション＞で文字サイズや文字の表示位置などをある程度自由に調整できるようにするには以下のような形式でテキストを記述する必要があります。

 

書き方はこちら。

 

赤文字部分のみ変更可です。

 

これを画像すべてのテキストにコピー＆ペーストします。

さらにテキストを常時表示させるため【テキスト設定】→『エフェクト』は「指定なし」にしておきます。

 

続いて編集画面の左ツリー画面の「トップページ」右クリック→「ページの設定」を選択し、【サイト全体設定】→【詳細設定】タブ内→【スタイル割り込み】に下のスタイルを加筆します。

 

 

文字サイズは1行目と2行目で異なるサイズを指定できます。

 

 

①の”30”pxがモバイルでの1段目（サイトタイトル）の文字サイズ。

②の”16”pxがモバイルでの2段目（サイト説明文）の文字サイズになるので、それぞれ好みの数値に変更します。

 

同様に③の”60”pxがPCでの1段目（サイトタイトル）の文字サイズ。

④の”26”pxがPCでの2段目（サイト説明文）の文字サイズになるので、それぞれ好みの数値に変更します。

 

この時点で一度プレビューして文字サイズが変わっているのを確認してみます。

設定は『縦位置・横位置』とも「デフォルト（中央）」。

 

 

先にモバイルでのテキスト表示位置を決めます。

 

たとえば画面左上にテキストを表示したいなら【テキスト設定】→『エフェクト・位置』→『縦の位置』と『横の位置』で、『縦の位置』→上側＆『横の位置』→左側を選択します。

 

 

この場合、下のように表示されます。

 

 

ここでPC用のテキスト位置を微調整するに当たって、こちらで用意したカスタマイズ用スタイル内の同じコメントが記されてる、

ここで設定されてる数値を

から

に変えてみます。

 

 

その結果がこちら。

モバイルでは固定レイアウトなので変化はありませんが、PC上では若干内側で表示されるようになります。

 

 

 

#header-mv .slide-title.top-center{/*『縦』上側＆『横』デフォルト（中央）*/

のように「デフォルト（中央）」が含まれる選択肢を選択した場合。

 

『横』デフォルト（中央）に関しては水平位置が中央で変えようがないので、カスタマイズ用スタイルは

の設定欄しか用意してません。

”10”のところを変えればテキストの『縦』の表示位置が変わります。

 

 

別のサンプルとして

『縦の位置』→下側＆『横の位置』→右側

を選択したとします。

 

この場合の表示はこちらのようになります。

 

 

ご覧になってわかるように＜ヘッダーアニメーション＞のデフォルト設定では右寄せになりますが、カスタマイズ設定では（「サイト名」と「サイト説明文」の表示を前提としてるので）左寄せでの表示にしてます。