【ルクセリタス】サイト名をカスタムする方法:CSSクラスと設定

WordPress

今回はWordPressの人気無料テーマのLuxeritas(ルクセリタス)のサイトタイトル部分とキャッチコピーを好きなデザインにカスタマイズする方法を紹介します。

ルクセリタスとは?

ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。

Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。

詳しくはルクセリタス公式ページより。

サイト名の設定

サイト名の設定場所は、WordPressの管理画面左側メニューの設定一般の「サイトのタイトル」部分で変更できます。

もしくは、WordPressの管理画面左側メニューのLuxeritasカスタマイズ(外観)サイト情報/サイトアイコンで設定できます。

キャッチフレーズも同じ場所で変更が可能です。

サイト名のクラス名(id)

今回の、サイト名はidで指定されています。「#sitename」がサイト名のidです。キャッチフレーズは「desc」です。

要素class or id
サイト名#sitename
キャッチフレーズ.desc

当サイトのサイト名のCSSは下記です。

/*サイトタイトル*/

#sitename {
 text-shadow: 3px 3px 4px #777777;
 font-size: 60px;
 font-weight: bold;
}

.desc {
 color: #777777;
}

当サイトではシンプルが好きなので、デザインは影を付けてる程度です。あとはサイト名のみを大きくしたかったので直接CSSでサイト名を大きくしています。

色に関しては、Luxeritasカスタマイズ(外観)の文字色のヘッダーがサイト名部分の色になります。しかし、そうするとキャッチコピーも同じ色になるのでCSSで#777に上書きしています。

※今回紹介する方法は2020年4月26日時点のものです。開発者によって設定項目やCSSクラス名を変更された場合は、変更後の項目、クラスに沿って作業してください。


以上が「【ルクセリタス】サイト名をカスタムする方法:CSSクラスと設定」でした。

2020年4月30日WordPressLuxeritas,WEB,WP

Posted by KT