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

ルクセリタスでサイトタイトル・記事タイトルを揃えてカスタマイズする

ルクセリタス・カスタマイズ
この記事は約5分で読めます。

ルクセリタスで、サイトタイトル部分と、記事のタイトル部分の文字装飾をカスタマイズする方法です。

 

サイトのタイトルとは、サイト左上に出るサイト名にあたる場所です。

8284_05

 

 カスタマイズ例

8284_03

 

今回はサイトタイトル&記事タイトルのセット2パターン記載しています。

どんなデザインにでも簡単にカスタマイズ出来ますので、参考にして独自スタイルを作ってみて下さい★

 

基本の設定

 

サイトのタイトル、記事タイトル、(記事内の見出しや全体の文字についても)カスタマイザーの「文字サイズ」・「文字の色」で設定出来ます。

<デフォルト文字サイズ>

サイトのタイトル、記事タイトル共に28pxです。

<デフォルト文字色>

濃いグレー?? または黒です。

 

基本の設定を変える場合は以下から行えます。

 「外観」→「カスタマイズ」→「文字サイズ」

8284_06

8284_07

 

 「外観」→「カスタマイズ」→「文字色」

 

ヘッダーの文字色を変更すると、サイトタイトルとキャッチフレーズが同じ色になります。

 

8284_08

 

「文字色(Body)」で色変更をすると、記事タイトル・見出し・記事内容が同じ色になります。

 

8284_09

 

 

カスタマイズ

それぞれのクラス名は以下ですので、以下を使って好きなようにデザイン編集が可能です。

サイトネーム :#sitename
キャッチフレーズ:.desc
記事タイトル:h1

CSS追記

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

「Luxeritas」→「子テーマの編集」で「スタイルシート」を選択します。(Ver.3.7.9以前は「style.cssタブ」)

Luxelitasスタイルシート編集画面

 

文字色を変える基本

サイトタイトルの色とキャッチフレーズの色が同じになるのを変えたい場合は、CSSで対応します。

 以下を子テーマのスタイルシート(style.css)に追記します。

 

サイトタイトル、キャッチフレーズ、記事タイトルの文字色を変えるには以下を追記します。

/*サイトネーム*/
#sitename {color: #507ea4;}
/*キャッチフレーズ*/
.desc {color: #a22041;}
/*記事タイトル*/
.post h1 {color: #507ea4;}

 

色の変更は以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 

 

 

パターン1

以下のように、1文字目の色を変えて、文字を少し大きくしてみます。

8284_03

サイトタイトル

8284_04

記事タイトル

 

/*サイトネーム*/
#sitename::first-letter {
font-size: 40px; /* 文字サイズ指定 */
color: #a22041; /* 文字色指定 */
}
*記事タイトル*/
.post h1::first-letter {
font-size: 36px; /* 文字サイズ指定 */
color: #a22041; /* 文字色指定 */
}

 

 

パターン2

背景色をつけてみます。サイトタイトルのホバー色も指定します。

8284_11

記事タイトル

 

 上記のセットは以下を追記します。

 

/*サイトネーム*/
#sitename {
color: #fff;
background: #a22041;
padding: 5px;
}
#sitename a:hover{
color: #a22041;
background: #fff;
padding: 5px;
}
/*記事タイトル*/
.post h1::first-letter {
font-size: 36px;
color: #fff;
background-color: #a22041;
}

 

キャッチフレーズの背景色例

キャッチフレーズに背景色を指定すると、文字数に関わらず「横幅いっぱい」に色が付きます。

 

8284_13

 

/*キャッチフレーズ*/
.desc {
color: #fff;
background: #a22041;
padding: 5px;
}

 

以上です!

 

色の変更は以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 

 

見出しCSSは以下も参考にして下さい。

見出し(H2~H5)デザインCSSをまるごとコピペ!4パターン+α
とにかく簡単にコピペで初期の見出しタグを実装する為のラフCSSです。 H2~H5を一度にコピーできるサンプル4バターン、サクっとコピペでも可能です、その他にも見出しサンプルちょっと載せてありますので、それぞれからお好みのデザインの部分を組み...

 

その他、ルクセリタスのカスタマイズは以下もご覧ください。

ルクセリタスLuxeritasの約40ヵ所をカスタマイズ!高速・高機能無料テーマ
高機能でスピード抜群の無料テーマ「ルクセリタス」を、いろいろカスタマイズしていますので、少しまとめてみます。 カスタマイズ済みの当サイトオリジナルデザインファイルは以下をご覧ください。 ルクセリタスについて 今のところテーマはこの一択と決め...

コメント

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