>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→
PR

ルクセリタスでキャッチフレーズ変更表示とサイトアイコンやタイトルの設定方法

ルクセリタス・使い方
この記事は約4分で読めます。

今回は、サイトタイトルやロゴなどヘッダーまわりの設定と、サイトアイコン(ファビコン)の設定方法などです。

タイトルやキャッチフレーズの設定はワードプレスの一般設定で行える基本の設定ですが、ルクセリタスでは、ワードプレスで設定するキャッチフレーズとは別にもうひとつサイトに表示できるキャッチフレーズを設定出来ます。

 

7188_01

 

7188_05

 

ルクセリタスのヘッダー構造

 

7188_54

ルクセリタスのヘッダーは、ヘッダー背景、ワンポイント、サイトタイトル、ロゴのそれぞれの画像もセットすると上図のような配置になっています。

  • ヘッダー上の帯状メニュー
  • ヘッダー背景画像
  • ワンポイント画像
  • サイトタイトル(テキストまたは画像)
  • キャッチフレーズ
  • グローバルナビメニュー
  • ロゴ画像(ナビの上または下に配置可能)

 

 

タイトル・キャッチフレーズ

ワードプレスの「設定」→「一般」で設定。

7188_41

7188_42

 

ここで設定しているものが、以下のカスタマイザーでの初期表示になります。

 

 「外観」→「カスタマイズ」からカスタマイザーを開きます。

7188_04

 

 「サイト情報/サイトアイコン」を選択します。

7188_06

 サイトタイトル・キャッチフレーズを入力します。

7188_43

 

ここで設定変更すると、ワードプレス設定も変わります。

 

7188_46

↓ 自動で変わる

7188_47

 

キャッチフレーズの表示・非表示

 「外観」→「カスタマイズ」→「細部の見た目」

「ヘッダーのキャッチフレーズを表示」にチェックを入れると表示されます。

7188_49

7188_50

 

キャッチフレーズを独自に変更してサイト表示

冒頭でも記載した通り、タイトルとキャッチフレーズの設定はワードプレスの設定と連動していて、検索結果などに表示されたり、ページタイトルとしてブラウザのタブに表示されるものです。

このキャッチフレーズの部分を変更して、サイト内にのみ表示させることが出来るルクセリタス独自の機能があります。

 

 「外観」→「カスタマイズ」→「細部の見た目」

「ヘッダーのキャッチフレーズを表示」にチェックを入れ、

 「ヘッダーのキャッチフレーズ変更」にサイトで表示させたいキャッチフレーズを入力します。

7188_44

 

7188_45

ページのタイトルは通常のキャッチフレーズに設定されたものがブラウザのタブに出ています。

7188_05

 

キャッチフレーズをサイト名(またはロゴ)と並列で表示する方法は以下をご覧下さい。

ルクセリタスのヘッダーカスタマイズ:キャッチフレーズを横並びに表示
ルクセリタスのキャッチフレーズを、サイト名やサイトロゴの右側に並列して表示する方法です。 ルクセリタスのキャッチフレーズは、WordPressで設定するものとは別にも設定可能で、便利です。 キャッチフレーズ設定方法 通常のキャッチフレーズ ...

 

タイトルの表示方法設定

 

 「Luxeritas」→「カスタマイズ」から「タイトル」タブを選択
セパレーターの記号、タイトルの表示スタイルを選択します。

7188_48

 

タイトル・ロゴのアニメーション設定

 カスタマイザーの「アニメーション」を選択します。

7188_52

 

ヘッダーアニメーション

動きの詳細は開発者るなさんの以下の記事をご覧ください。
パララックス・オープニングアニメの追加など Luxeritas 3.6.9

上記ページの中央あたりに各アニメーションのデモを見れるリンクがあります。

 

サイト名のアニメーションは以下で設定します。

7188_53

 

サイトアイコン

 「外観」→「カスタマイズ」からカスタマイザーを開きます。

7188_04

 

 「サイト情報/サイトアイコン」を選択します。

7188_06

 「画像を選択」から設定します。

 

7188_51

 

サイトアイコンに適した画像をセットする

サイトアイコンはブラウザのタブに表示できるサイト独自のアイコンです。

正方形や円のものや透過処理した画像がGood★

Web上で透過や丸抜きできる便利なサイトなどもあります。

PEKO STEP(透過)
画像丸抜きくん

 

白いアイコンの例

 

白いアイコンは背景をつけて丸抜きにするときれいに表示されます。

 

7188_08

 黒いデザインのブラウザでは

7188_09

 

透過画像の例

7188_10

 黒いデザインのブラウザでは

7188_05

 

 

タイトルをロゴ(画像)にする

サイトタイトルは文字のままでもOKですし、ロゴなどの画像にする事も出来ます。

画像か文字かどちらか1つなので、画像の設定をすれば画像、しなければ文字で表示されます。

 

 「背景・タイトル・ロゴ画像」を選択します。

7188_07

 

 サイトタイトル画像をセットします。

 

7188_03

 

ワンポイント画像

 

上記のように、ワンポイント画像も設定すると、タイトルの左側に表示されます。

 

ロゴ画像

 

サイトタイトル画像以外に、ロゴ画像も設定できます。

グローバルナビの上または下に配置可能。

 

7188_55

7188_56

 

タイトルまわりの設定は以上です!

 

 

コメント

タイトルとURLをコピーしました