ヘッダー画像上のテキストを自在にカスタマイズ-Volar2

 

SIRIUS2ではファーストビューにあたるヘッダー画像上にテキストを表示させることができます。

そのテキストの中身は【全体設定】で設定したサイト名と説明文。なおかつ【レイアウト設定】でヘッダーテキストと説明文を非表示以外に設定したときです。

 

 

ただしこれらのテキスト、大きさや色の変更はできません。

 

たとえばこちらのヘッダー、画像上のテキストが若干小さ目なので大きくしたいところですが、その設定項目は用意されてません。

 

 

唯一あるとすれば【サイトオプション】での設定。

ただしこちらはサイト全体に共通適用される設定なのでちょっと使いづらい。

 

 

テキストに自分なりの装飾効果を付けたい気持ちはだれしもあることでしょう。それには独自のスタイルを追加指定してやる必要があります。

でもこれはCSSに詳しくないと実質無理な話。

 

そこで【Volar2】ではテキスト周りの装飾を簡単にできる設定を加えてみました。

テキスト全体をボーダーで囲むなんてこともできちゃいます。

装飾効果をふんだんに使った文字（テキスト）入れ込みのインパクトのあるヘッダー画像ではなく、シンプルなイメージ画像上にサイト名やサブタイトルなどのテキストをさりげなく表示するサイトは少なくありません。

 

そうする理由はもちろんサイトイメージもあるでしょうけど、（テキストの方が検索結果に反映されやすいという真偽不明な噂の）SEOを考慮して…というのもあります。

 

実際のところ画像とテキストでどれだけSEO効果に差があるのかは微妙なところです。

それはさておきこの機能を利用するにはモジュールの有効化が必要です。

 

 

前述のモジュールを開くと下のようなHTMLコードとテキストが入ってます。

①が1段目表示のヘッダーテキスト（※サイト名）、②が2段目表示の説明文テキストになります。

 

 

あとはテキストを差し替え、それらのテキストをSIRIUS2の装飾機能を使って編集していくだけです。

 

たとえば特定のテキストの色を変更したい場合、下のように装飾ツールで装飾効果をかけます。

 

 

すると下のように通常では変更できないテキストカラーの変更が摘要されます。

 

 

SIRIUS2での通常編集なので一部のテキストだけ大きくするなんてことももちろん可能。

 

 

HTMLコードを含めた全体を選択した後、装飾メニューの［ボックス］→［通常枠］を選択すれば下のように囲み枠も表示可能。

 

 

ただし［通常枠（背景背景）］などのように背景が透明以外の装飾を選択すると下のようにテキストが見にくくなります。

これはSIRIUS2のデフォルトのテキストカラー設定が「白」になってるためかと。

 

 

この場合でも背景色に応じてテキストカラーを変更すると問題なく見られるようになります。