Luxeritasでタイトルやロゴ画像を自由に設定してみよう!【背景・タイトル・ロゴ画像 編】

2018年10月4日ブログ管理Luxeritas, Luxeritasカスタマイズ, タイトル, ブログ管理, ロゴ, 初心者

タイトルロゴヘッダー

トリ師匠
トリ師匠
今回は背景やらタイトル部分の装飾やらをしてみようかの。
ぐず夫
ぐず夫
タイトル?
ワシはボクシングのチャンピオンやったかの。
トリ師匠
トリ師匠
知らん。
じゃあさっさと用意して始めるで!

ということで、今回はLuxeritasのカスタマイズ機能を使って背景画像の設定やタイトル・ロゴの変更してみたいと思います。

背景・タイトル・ロゴ画像 機能

タイトルロゴ選択

トリ師匠
トリ師匠
サイトの背景画像の設定や、ヘッダー部分のタイトルやロゴマークを自分の好きな画像に設定する機能じゃな。そんじゃ「背景・タイトル・ロゴ画像」を選択してみるで!

 

① サイトタイトルを画像にする

サイトタイトルを画像に置き換える機能。表示は設定する画像サイズに伴い表示されますが、「コンテナの最大幅」を超える場合は最大幅での表示となる。なお画像領域がHOMEボタンとなるため、ヘッダー全領域をボタン化したい場合は、それに伴うサイズの画像が必要

サイトタイトル例

トリ師匠
トリ師匠
ぐず夫の場合は題字だけを「1100×240」のサイズで表示させとるの。

◆「コンテナの最大幅」設定はこちらを参照!

② ワンポイントロゴ画像

ブログタイトルの左側にワンポイントロゴ画像を設定する機能

【 表示例:ワンポイントロゴ画像(パンダ)を左側に表示 】

ワンポイントロゴ

 

③ 背景画像

「背景色」と同部分を画像に置き換える機能。なお背景画像は「背景色」設定より優先されるため、設定した背景色の上に画像が表示されます。

【 例:背景色で背景画像を設定した場合… 】

背景画像

◆背景色/枠線色の設定はこちら!

 

● 背景画像透過
背景画像の透過率(透け感)を決めます。

透過設定

 

● 背景固定
画面スクロールを行っても背景画像を固定する機能。

● 背景画像の配置方法
設定した画像の設置場所と表示比率を決める機能。

【 画像表示位置(上中下) 】
表示画面に対し、画像をどこに表示するか設定する。

【 画像表示位置(左中右) 】
表示画面に対し、画像をどこに表示するか設定する。

【 画像表示(繰り返し設定) 】
画像を繰り返し表示するかを選択

【 画像表示(縦横比設定) 】
画像の画面に対する表示比率を選択します。

  • 表示例1:Top、Left、no-repeat設定
    左上
  • 表示例2:middle、Left、no-repeat設定
    左中
  • 表示例3:bottom、Left、no-repeat設定
    左下
  • 表示例4:Top、Right、no-repeat設定
    右上
トリ師匠
トリ師匠
こんな感じで画像を置くポイントを変えられるで。4つを組み合わせて好みの表示に変えたってな!

 

④ サイドバー背景画像

「サイドバー背景色」と同部分を画像に置き換える機能。なお背景画像は「サイドバー背景色」設定より優先されるため、設定した背景色の上に画像が表示されます。

【 例:サイドバー背景色をで、背景画像を設定した場合… 】

サイドバー背景画像

 

⑤ ヘッダー背景画像

ヘッダー部分の背景画像を設定する機能。

ヘッダー背景画像

トリ師匠
トリ師匠
ぐず夫の場合は①サイトタイトルを画像にするに合わせて「1100×240」のサイズでヘッダー画像を用意しとるの。

● 横幅いっぱい
画像をウインドウ幅いっぱいに設定する。

● ヘッダー背景画像の配置方法
背景画像の配置と同様のため省略。

トリ師匠
トリ師匠
注釈にもあるが、画像の表示領域は「ヘッダー/フッター」の項目の中で調節が可能じゃ。見栄えはそれぞれで調節したってな!

◆ヘッダー/フッター編はこちら!

⑥ ロゴ画像

グローバルナビ下にロゴ画像を表示する機能。

ロゴ配置

 

● グローバルナビの上
ロゴ画像の表示位置をナビの上に移動させる機能

ナビ上ロゴ

トリ師匠
トリ師匠
以上で設定は終いじゃ!

背景・タイトル・ロゴ画像の設定を終えて…

ぐず夫
ぐず夫
もうあかん、いよいよ倒れそや…
トリ師匠
トリ師匠
そかそか、健康で何よりじゃ。
ぐず夫
ぐず夫
少しは心配せえ!
トリ師匠
トリ師匠
ほれみぃ、元気元気。

以上で背景・タイトル・ロゴ画像編のカスタマイズを終了します。

ではまた次回をお楽しみに!