Luxeritas ヘッダー周りのカスタマイズ

「Luxeritas」→「カスタマイズ（外観）」→「サイト情報/サイトアイコン」をクリックする。

「サイトアイコン」欄の「サイトアイコンを選択」をクリックする。

画像をアップロードする。（サイズ: 35 x 31 pxの 画像をアップロード。）

「公開」をクリックすると、サイトを閲覧した際のブラウザのタブに、アイコンが表示されるようになる。

「カスタマイズ（外観）」→「背景/タイトル/ロゴ画像」をクリックし、下にスクロールして「ヘッダー背景画像」欄の「画像を選択」をクリックする。

画像をアップロードし、「公開」をクリックする。

【1000 × 198 ピクセル】の画像をアップロードした結果、文字の色が黒で見えにくい。

「カスタマイズ（外観）」→「文字色」を選択し、下にスクロールして「ヘッダー文字色」で、【白】を設定する。

ヘッダーの文字が【白】になったが、画像の下部の全てが表示されていない。

「カスタマイズ（外観）」→「ヘッダー／フッター」を選択し、下にスクロールして「ヘッダーのパディング」を表示する。

「ヘッダー下」を、【20】から【57】に変更してみる。

画像の表示領域が下に拡がり、画像全体が表示されるようになる。

「子テーマの編集」の中から、「スタイルシート」タブを開き、CSSを追記する。

CSSの適用結果、タイトル（ヘッダー文字）の位置が下に下がる。

/*-----------------------------------------------*/
/* サイトのタイトルとキャッチフレーズの間隔 */
#sitename {
	display: inline-block;
	max-width: 100%;
	margin: 0 0 1px 0;
	font-size: 2.8rem;
	line-height: 1.4;
}
/* サイトのタイトルの位置 */
.info {
	padding: 100px 10px 1px 30px;
	overflow: hidden;
}
/*-----------------------------------------------*/

タイトル（ヘッダー文字）の位置と、追記したCSSの関係。

同じように、AMPのCSS【style-amp.css】にも追記する。

「カスタマイズ（外観）」→「背景/タイトル/ロゴ画像」をクリックし、「ワンポイントロゴ画像」の「画像を選択」をクリックする。

画像をアップロードする。（【 50px x 47px 】の画像をアップロード。）

タイトルの前に、ワンポイントロゴ画像が入る。

「カスタマイズ（外観）」→「ヘッダーの上の帯状メニュー」をクリックし、下にスクロールして「フォローボタンの表示方法」を表示する。

「フォローボタンをカラーにする」と、「Twitter フォローボタン表示」や「 Facebook フォローボタン表示」にチェックを入れ、それぞれのIDを入力する。

フォローボタンが追加された画面表示。

「カスタマイズ（外観）」→「ヘッダーナビ（グローバルナビ）」をクリックし、「スクロール固定」欄を「PC サイズだけスクロール固定」に変更する。

「区切り線を付ける」欄の、「区切り線を付ける」にチェックを入れる。

ナビ文字色やナビ背景色を設定する。

ナビ上下パディング ( px )を変更して、グローバルナビの高さを変更する。

ヘッダーナビ（グローバルナビ）の、カスタマイズ結果。

管理画面の「外観」から、「メニュー」をクリックし、グローバルメニューを開く。

ナビゲーションラベルの前に、【Font Awesome】のアイコンを埋め込む。

【Font Awesome】のアイコンの記述要領。

Luxeritas（ルクセリタス） サンプルページからの 初期設定

Luxeritas（ルクセリタス） サンプルページでの初期設定   WordPressの無料テーマである「Luxeritas（ルクセリタス）」でのサイトが立上ったので、これから本格的にカスタマイ

2020-02-01

2021-06-07

【Font Awesome】のアイコンを設定した、ヘッダーナビ（グローバルナビ）。

ヘッダーナビ（グローバルナビ）を中央揃えにして、完了。