Luxeritas(ルクセリタス)でサイト説明文をサイト名の右側に表示する

サイト名は必ずヘッダーに表示されていると思いますが
サイトの内容がわかりやすいよう、その下にキャッチフレーズ（短いサイトの説明文）を表示していることが多いと思います。

ルクセリタスで、デフォルトの状態で表示したロゴ画像、サイト名、キャッチフレーズの見た目は下のような感じです。

こちらを下のようにカスタマイズする方法をご案内したいと思います。

サイト名をデザインする

マウスオーバーで動くアニメーションをつける

開く「Luxeritas」「カスタマイズ(外観)」「アニメーション」
サイト名の箇所に「ズームイン」もしくは「ズームアウト」のアニメーションを設定します。

文字をくぼんだ様に見せる

子テーマのCSSに以下のスタイルを追記します。

/* サイトタイトル */
.sitename a {
	color: #4191e0;
	line-height: 140%;
	font-size: 1.2em;
	font-weight:600;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, .4),0 1px 1px rgba(255, 255, 255, .75);
}

サイト説明文を右側に表示する

inline-blockを使用してキャッチフレーズをサイト名の右側に回り込ませ、先頭にFontAwesomeのアイコンを表示しています。
CSSは以下の通りです。

Font Awesome 4 の場合

/* サイト説明文 */
.desc{
	display:inline-block;
	color:#4169e1; /* 文字の色 */
}
/* 説明文の前にフォントアイコン */
.desc:before{
	font-family: FontAwesome;
	content: "\f10d";
	margin-right:7px;
	color: #E44D26;
}

Font Awesome 5 の場合

/* サイト説明文 */
.desc{
	display:inline-block;
	color:#4169e1; /* 文字の色 */
}
/* 説明文の前にフォントアイコン */
.desc:before{
	font-family: "Font Awesome 5 Free";
	content: "\f10d";
	font-weight: 900;
	margin-right:7px;
	color: #E44D26;
}

ワンポイントロゴ画像を表示する

開く「Luxeritas」「カスタマイズ(外観)」「背景・タイトル・ロゴ画像」
ワンポイントロゴ画像を設定します。

見た目の調整

ワンポイントロゴとサイト名がくっつき過ぎる場合はCSSで調整します。

/* サイトイメージ */
.sitename img {
	margin: 0 15px 5px 0; /* 上 右 下 左 */
}

ここでは、ヘッダーの高さを抑えるため、マージンをなくしています。

.sitename{
	margin:0;
}

あとがき

以前は float:right を使用して、サイト説明文を右寄せにしていたのですが、スマホ表示でうまくいかず、無理やり感がありました。
とりあえず、今のところはこんな感じでいこうかな。

帯状メニューをカスタマイズする方法はこちらからどうぞ^^