ルクセリタスのヘッダー画像設定による表示の違いとモバイルで非表示にする方法

使い方

ルクセリタスのヘッダー画像の設定方法をサンプルと共に解説します。

また、モバイル端末ではヘッダー画像を表示しないようにする簡単な方法も。

 

ヘッダー画像の設定

「外観」→「カスタマイズ」から「背景・タイトル・ロゴ画像」を開きます。

ルクセリタス・ヘッダー画像設定

 

繰り返さない画像の場合

ルクセリタスのコンテナ幅の初期値が 1280pxなので、横幅1280pxの画像が良いかもしれません。

コンテナ最大幅

サンプル画像

ヘッダー画像サンプル

 

ヘッダー背景画像にセットします。

ルクセリタス・ヘッダー画像設定

画像に合わせて高さを自動的に調整する」にチェック

 

ルクセリタス・ヘッダー画像設定

no-repeat(繰り返さない)」を選択。
contain(画像全体が見えるように伸長)」を選択。

 

PCでの見た目

ルクセリタス・ヘッダー画像設定

 

スマホでの見た目

ルクセリタス・ヘッダー画像設定

 

繰り返す画像の場合

どんな小さな画像でもOK。シンプルな模様のドットファイルを使えば軽量な画像でヘッダーを飾れます。

表示方法の設定を変える事で、小さな画像ひとつで色々なパターンの表示が可能です。

サンプル画像

ヘッダー画像サンプル

 

ヘッダー背景画像にセットします。

ルクセリタス・ヘッダー画像設定

 

画像に合わせて高さを自動的に調整する」にはチェックしません

 

ルクセリタス・ヘッダー画像設定

repeat(繰り返し)」を選択。

 

この繰り返し項目の下にある表示パターンを選択する事で、表示方法が変わります。

ルクセリタス・ヘッダー画像設定

 

パターン1

 

auto(自動)」を選択。

 

表示サンプル

ルクセリタス・ヘッダー画像設定

 

 

 

パターン2

contain(画像全体が見えるように伸長)」を選択。

 

表示サンプル

ルクセリタス・ヘッダー画像設定

 

 

パターン3

cover(領域を埋めるように伸長)」を選択。

 

表示サンプル

ルクセリタス・ヘッダー画像設定

 

 

モバイル端末でヘッダー画像を非表示に

小さな画面に大きなヘッダー画像がどのページでも出てしまうのが邪魔な場合は、簡単なCSSだけで非表示にできます。

 

「Luxeritas」→「子テーマの編集」でスタイルシートに追記します。

子テーマの編集

 

CSS

/*モバイル端末ではヘッダー画像を非表示*/
@media only screen and (max-width: 767px){
.head-cover{display:none;}
}

 

指定する端末のサイズについては、お好みで変更して下さい。

 

関連記事

使い方

Posted by 綾糸