検索結果

SIRIUS2ではファーストビューにあたるヘッダー画像上にテキストを表示させることができます。そのテキストの中身は【全体設定】で設定したサイト名と説明文です。ただしこれらのテキスト、大きさや色の変更はできません。たとえばこちらのヘッダー、画像上のテキストが若干小さ目なので大きくしたいところですが、その設定項目は用意されてません。唯一あるとすれば【サイトオプション】での設定。ただしこちらはサイト全体に共通適用される設定なのでちょっと使いづらい。テキストに自分なりの装飾効果を付けたい気持ちはだれしもあることでしょう。それには独自のスタイルを追加指定してやる必要があります。でもこれはCSSに詳しくないと実質無理な話。そこで《Volar2》ではテキスト周りの装飾を簡単にできる設定を加えてみました。テキスト全体をボーダーで囲むなんてこともできちゃいます。この機能はトップページのみ有効な機能です。有効化この機能はデフォルトでは無効化されてます。《ヘッダー画像上のテキスト装飾》機能を利用するには専用モジュールを有効化する必要があります。有効化のやり方『【Volar2】通常のヘッダー画像エリア（SIRIUS2標準）テキスト別設定』上記モジュールの［有効］のチェックをONにします。前述のモジュールを開き、その中で設定したテキストがヘッダー画像上に表示されます。またテキストはSIRIUS2の装飾機能を使って編集もできます。すると下のように通常では変更できないテキストカラーの変更や囲み枠なんかも表示できます。テキストの位置調整テキスト全体の表示位置は左右中央で固定ですが、縦位置（上下）は調整できます。調整するには先に以下のモジュールの［有効］のチェックをONにします。『【Volar2】ヘッダー画像にモジュールテキスト（スタイル）』上記モジュールを開くと縦位置の（デフォルト）設定値である「40」という数値が出てくるので、その数値を増減することで縦位置を変更することができます。SEO的なことソースがどうなってるかというと、通常は【全体設定】で設定したサイト名と説明文で［title］［description］［ogp］［h1］すべて統一表記になります。ここで《Volar2》のモジュールを利用した場合がこちら。わかりやすいように『説明文』テキストを変えてみました。SIRIUS2の設定をそのまま使ってるので構造的には特に問題になるようなことはありません。なので特にSEOを意識する必要はないと思います。ただしH1の部分は【全体設定】で設定したサイト名と同じにしておくのがよろしいかと。★ -->

《Volar2》ではヘッダー画像を2分割で表示かつ同時に次の画像にフェードで変わる《2分割スライダーヘッダー》機能を実装してます。ビジネス系サイトなどで使えるかと。↓デモサイトはこちら↓左右2枚の画像が同時にフェードで次の画像に変わっていきます。DEMOページ概要《2分割スライダーヘッダー》は以下のような特長があります。左右2枚の画像がゆっくりとズームイン。（デモサイトは）8秒前後で次の2枚の画像にフェードで同時切り替わり。切り換え（トランジション）形態はフェード固定。6秒前後で切り替わるタイプもご用意。画像は左右2枚×2もしくは2枚×3のいずれか。表示領域はブラウザの高さいっぱい。スマホでは縦並び。有効化この機能はデフォルトでは無効化されてます。《2分割スライダーヘッダー》機能を利用するには専用モジュールを有効化する必要があります。有効化のやり方8秒タイプなら①『【Volar2】2分割ヘッダー（HTML）』②『【Volar2】2分割ヘッダー（スクリプト）8秒』②『【Volar2】2分割ヘッダー（スタイル）8秒』6秒タイプなら①『【Volar2】2分割ヘッダー（HTML）』③『【Volar2】2分割ヘッダー（スクリプト）6秒』③『【Volar2】2分割ヘッダー（スタイル）6秒』それぞれ上記モジュールの［有効］のチェックをONにします。設定概要画像事前に用意する画像は1回だけのスライド（切り換え）なら左右2枚×2で4枚必要です。（3回スライドさせるなら6枚）それ以上は長くなるので推奨しません。あとは画像を左右1枚ずつ登録していくだけ。たとえば左1枚目の画像ならモジュール『【Volar2】2分割ヘッダー（画像左1）』をクリック→入力画面で記事装飾メニューの［画像］から当該画像を選択で完了。同様に残りの画像も1個ずつ登録していきます。タイトル画面中央にはテキストも表示できます。モジュール『【Volar2】2分割ヘッダー（タイトル）』を開いて中にサイト名や説明文を記述します。画像のオーバーレイ用のスタイルも用意してます。