Luxeritas（ルクセリタス）の見た目をオシャレに！ 16のカスタマイズしたことまとめ【WordPressテーマ】

2016-12-182022-04-18Web制作

アイキャッチ画像は公式サイトよりお借りました。

高機能なのに
軽くて
無料

メリットいっぱいのWordPressテーマ、Luxeritas（ルクセリタス）。

デザインはいかにもブログ！という感じなので（シンプルなのも利点ではあるのですが）、自分好みにするために色々とカスタマイズした備忘録です。

カスタマイザーで設定可能なことは省いてます。カスタマイザーで変更できるのに気づかずCSSで変更してるのもあると思います。笑

CSSの編集は、ダッシュボード画面のLuxeritas → 子テーマの編集 → style.css から編集が可能です。

子テーマの編集が表示されてない方は、子テーマを導入することを強くお勧めします！（Luxeritas公式のダウンロードページからダウンロード可能です）

公式Luxeritas ダウンロード

Contents

1. メインエリアを白背景に
2. キャッチフレーズを右寄せ
3. グローバルナビメニューをリボンに（PC時）
4. 続きを読むのスタイルを変更（モバイル時）
5. 個別記事のタイトル下にアイキャッチを表示
6. 見出しのスタイルを変更
7. 目次のデザインを変更
8. メタ情報のフォントカラーを変更
9. ページネーションのデザインを変更
10. ページネーションの矢印を斜体から通常の書体に
11. 関連記事のhover（マウスオン）の色を変更
12. サイドバータイトルのスタイルを変更
13. SNSフォローボタンをフラットに
14. 記事下のSNSシェアメッセージ下線の色を変更
15. SNS共有ボタンのデザインを変更
16. フォントの変更
17. おまけ：Luxeritasおすすめ機能活用法

メインエリアを白背景に

メインエリアを白背景にして、他の背景はカスタマイザーから壁紙を設定しました。

スマホでは横幅の関係上、後ろの壁紙は全く見えませんが。

CSS

.container {
        background-color: #fff;
}

キャッチフレーズを右寄せ

PCでは右寄せ、

モバイルでは中央寄せになってます。

CSS

@media (min-width: 451px) {
  .desc {
    padding-right: 20px;
    text-align: right;
  }
}
@media (max-width: 450px) {
  .desc {
    text-align: center;
  }
}

グローバルナビメニューをリボンに（PC時）

このブログでメニューをリボンにするのは譲れない！

CSSでは端っこだけ設定してます。各メニューの色はカスタマイザーで設定。

コンテナの最大幅は1020pxで上手く表示されるよう調整してます。

CSS

@media screen and (min-width: 1050px) {
	#header #gnavi {
		margin-left: -20px;
		margin-right: -20px;
		max-width: 1060px;
		position: relative;
		z-index: 3;
	}
	#header #gnavi:before, #header #gnavi:after {
		border: 20px solid transparent;
		content: "";
		display: block;
		position: absolute;
		top: 25px;
		z-index: -1;
	}
	#header #gnavi:before {
		border-right-color: #D0394D;
		left: -20px;
	}
	#header #gnavi:after {
		border-left-color: #D0394D;
		right: -20px;
	}
	.menu {
		position: relative;
	}
	.menu:before, .menu:after {
		border: 20px solid #DA6272;
		content: "";
		display: block;
		position: absolute;
		bottom: -20px;
		z-index: -2;
	}
	.menu:before {
		border-right-width: 30px;
		border-left-color: transparent;
		left: -30px;
	}
	.menu:after {
		border-left-width: 30px;
		border-right-color: transparent;
		right: -30px;
	}
}

続きを読むのスタイルを変更（モバイル時）

↓

灰色だったので、テーマカラーと合わせてピンクに。

CSS

@media (max-width: 575px) {
  .read-more-link {
    background: #DA6272;
    border: none;
    color: #fff;
  }
}

2018年3月現在はこんな感じでまるくしてます。（ボタンの文字の表記はカスタマイザーから変更可能です）

CSS

@media (max-width: 575px) {
	.read-more-link {
		background: #ef858c;
		border: none;
		border-radius: 30px;
		color: #fff;
		display: inline-block;
 		line-height: 36px;
		width: 60px;
		height: 60px;
		vertical-align: middle;
 	}
        #list .read-more-link {
		margin-top: -30px;
		margin-right: 10px;
 	}
}

個別記事のタイトル下にアイキャッチを表示

個別記事のタイトル下にアイキャッチ画像を自動的に表示させました。

別ページにて詳細な手順を解説してます。

Luxeritasで個別記事のタイトル下にアイキャッチ画像を表示させる方法

こんにちは、とみーです。 2016年12月現在、このブログで使用しているテーマは、高機能な無料のWordPre ...

https://0edition.net/archives/2559

見出しのスタイルを変更

H2は背景画像、H3とH4はそれぞれ異なるアイコンを指定。

画像はWordPressのメディアを追加を使用せずに、FTPやサーバのファイルマネージャーから/wp-content/themes/luxechのフォルダにアップロードしてます。

よく分からない方は、urlの()の中は、 http://から始まる絶対パスを指定すれば間違いないです。

CSS

.post h2 {
	background: url('h2bg.png') repeat;
	border: none;
	color: #fff;
	padding:10px 10px 10px 60px;
}
.post h3 {
	background: url('h3bg.png') no-repeat;
	border: none;
	color: #333;
	padding:5px 5px 5px 40px;
}
.post h4 {
	background: url('h4bg.png') no-repeat;
	border: none;
	font-weight: bold;
	padding: 0px 5px 5px 30px;
}

ちなみに、当ブログの見出しデザインのページで様々な見出しのサンプルがありますので、興味のある方はご覧になってみてください。

関連記事CSSコピペで出来るシンプル可愛い見出しデザイン

目次のデザインを変更

↓

Luxeritasに搭載されている目次デザインを可愛めに。

目次の閉じる/開くボタンはカスタマイザーで変更できますが、アイコンフォントを使いたい場合はCSSで指定します。

CSS

div#toc_container {
	border: 1px solid #ccc;
	border-radius: 5px;
	display: block !important;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 90% !important;
}
.toc_toggle:before {	/* 閉じた状態 */
	border: none;
	color: #ccc;
	content: '\f204';
	font-family: FontAwesome;
	font-size: 120%;
	font-weight: 100;
}
#toc_toggle:checked+.toc_toggle:before {	/* 開いた状態 */
	content: '\f205';
	font-family: FontAwesome;
}
.toc_list ul {
	list-style: none;
	padding-left: 5px;
}
.toc_list li, .toc_list li li, .toc_list li li li {
	font-size: 1.0em;
	padding: 1px 0;
}
.toc_list .toc_number {
	display: none;
}
#toc_container > .toc_list {	/* 見出し2 */
	counter-reset: my-counter;
	list-style: none;
	margin-bottom: 0 !important;
	padding: 0 0 0 30px;
}
#toc_container > .toc_list > li:before {	/* 見出し2 */
	background-color: #ecacb5;
	border-radius: 50%;
	content: counter(my-counter);
	counter-increment: my-counter;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
}
.toc_list li .toc_list li:before {	/* 見出し3 */
	color: #ecacb5;
	content: '\f105';
	font-family: FontAwesome;
	margin-right: 5px;
}
.toc_list li .toc_list li .toc_list li:before {	/* 見出し4 */
	color: #ecacb5;
	content: '\f101';
	font-family: FontAwesome;
	margin-right: 5px;
}

プラグイン派の方は、カスタマイズ記事を参考にデザインしてみてくださいね。

メタ情報のフォントカラーを変更

↓

メタ情報とは、タイトル下にある投稿日や記事下にあるタグのこと。

色の変更と、下線の消去です。（表示する情報はカスタマイザーから変更できます）

CSS

.meta i.fa[class*="fa-"], .post .meta i.fa[class*="fa-"], .meta, .post .meta, .meta a {
	color: #bbb;
	text-decoration: none;
}

ページネーションのデザインを変更

↓

ページ移動のナビゲーションとなるページネーション。デフォルトでは隣同士くっついてますが私は離す派。

CSS

/* ページネーションの色を変更 */
.pagination>.active>span, .pagination>li>a:hover {
	background: none;
	background-color: #FF8F85;
}
.pagination>li span, .pagination>li>a {
	background-color: #eee;
}

/* ページネーションの個々のボタンを分離 */
.pagination>li {
	padding: 0px 3px;
}

/* ページネーションの枠線を消去 */
.pagination>li>a, .pagination>li>span, .pagination>li:last-child>a, .pagination>li:last-child>span, .pagination>.not-allow:first-child>span:hover {
	border: none;
}

/* ページネーションの角を丸める */
.pagination>li>a, .pagination>li>span {
	border-radius: 5px;
}

ページネーションの矢印を斜体から通常の書体に

↓

ページネーション左右端の矢印が斜体なので、通常の書体になるように斜体タグを削除。

これに関してはfunctions.phpをいじってます。

PHP

function custom_thk_pagination( $ret ) {
	return str_replace( array("<i>","</i>"), "", $ret );
}
add_filter( 'thk_pagination', 'custom_thk_pagination', 11 );

サイドバータイトルのスタイルを変更

タイトル下に枠線つけただけです。

CSS

#side h3, #col3 h3, #side h4, #col3 h4 {
	border-bottom: 1px dotted #333;
}

SNSフォローボタンをフラットに

↓

中の人エリアにあるSNSフォローボタン。

通常だと白い枠線と影がつくのですがどちらも非表示にしてフラット化しました。

CSS

#thk-follow ul li {
	box-shadow: none;
}
#thk-follow li a {
	border: none;
}

記事下のSNSシェアメッセージ下線の色を変更

↓

記事下のSNS共有ボタン上にある、シェアを促すメッセージ。下線に色を付けました。

CSS

.sns-msg h2 {
	border-bottom: 5px solid #FFC0C5;
}

SNS共有ボタンのデザインを変更

↓

可変幅/名無しアイコンホワイトタイプ（カウント表示）のデザインを変更しました。

マウスオンで背景色が各ブランドカラーに変化します。

CSS

div[class$=-w] ul[class*=sns] li a {
	background: none;
	border: none;
}
.sns-w .snsb li a:hover, .snsi-w .snsib li a:hover {
	background: none;
	opacity: 1;
	transition: all .3s ease-in-out;
}
.sns-w .snsb .twitter a, .snsi-w .snsib .twitter a {
	border: 1px solid #55acee;
}
.sns-w .snsb .twitter a:hover, .snsi-w .snsib .twitter a:hover {
	background-color: #55acee;
	color: #fff;
}
.sns-w .snsb .facebook a, .snsi-w .snsib .facebook a {
	border: 1px solid #3b5998;
}
.snsi-w .facebook-count {
	color: #3b5998;
}
.sns-w .snsb .facebook a:hover, .snsi-w .snsib .facebook a:hover {
	background-color: #3b5998;
	color: #fff;
}
.snsi-w .snsib .facebook a:hover>.facebook-count {
	color: #fff;
	transition: all .3s ease-in-out;
}
.sns-w .snsb .pinit a, .snsi-w .snsib .pinit a {
	border: 1px solid #bd081c;
}
.snsi-w .pinit-count {
	color: #bd081c;
}
.sns-w .snsb .pinit a:hover, .snsi-w .snsib .pinit a:hover {
	background-color: #bd081c;
	color: #fff;
}
.snsi-w .snsib .pinit a:hover>.pinit-count {
	color: #fff;
	transition: all .3s ease-in-out;
}
.sns-w .snsb .hatena a, .snsi-w .snsib .hatena a {
	border: 1px solid #3c7dd1;
}
.snsi-w .hatena-count {
	color: #3c7dd1;
}
.sns-w .snsb .hatena a:hover, .snsi-w .snsib .hatena a:hover {
	background-color: #3c7dd1;
	color: #fff;
}
.snsi-w .snsib .hatena a:hover>.hatena-count {
	color: #fff;
	transition: all .3s ease-in-out;
}
.sns-w .snsb .pocket a, .snsi-w .snsib .pocket a {
	border: 1px solid #ee4257;
}
.snsi-w .pocket-count {
	color: #ee4257;
}
.sns-w .snsb .pocket a:hover, .snsi-w .snsib .pocket a:hover {
	background-color: #ee4257;
	color: #fff;
}
.snsi-w .snsib .pocket a:hover>.pocket-count {
	color: #fff;
	transition: all .3s ease-in-out;
}
.sns-w .snsb .line a, .snsi-w .snsib .line a {
	border: 1px solid #00c300;
}
.sns-w .snsb .line a:hover, .snsi-w .snsib .line a:hover {
	background-color: #00c300;
	color: #fff;
}
.sns-w .snsb .feedly a, .snsi-w .snsib .feedly a {
	border: 1px solid #87bd33;
}
.snsi-w .feedly-count {
	color: #87bd33;
}
.sns-w .snsb .feedly a:hover, .snsi-w .snsib .feedly a:hover {
	background-color: #87bd33;
	color: #fff;
}
.snsi-w .snsib .feedly a:hover>.feedly-count {
	color: #fff;
	transition: all .3s ease-in-out;
}
.sns-w .snsb .cp-button a, .snsi-w .snsib .cp-button a {
	border: 1px solid #86735a;
	color: #86735a;
}
.sns-w .snsb .cp-button a:hover, .snsi-w .snsib .cp-button a:hover {
	background-color: #86735a;
	color: #fff;
}

フォントの変更

少しオシャレに見えるフォントに変更しました。

CSS

body, body.mceContentBody {
	font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	line-height: 1.8em;
}

2017.1.15追記

フォントをGoogle Fontsに変更しました。

コピペで簡単！ブログのフォントを可愛くオシャレなRounded M+ 1cに変更！【Google F

こんにちは、とみーです。いつも当ブログをご覧いただき、ありがとうございます。そうでない方も訪問 ...

https://0edition.net/archives/2672

おまけ：Luxeritasおすすめ機能活用法

別記事にて、Luxeritasのショートコードの活用法を紹介していますので、よければご覧ください。

アフィリエイトやってる方は結構使いどころあるのでぜひ。

Luxeritasのショートコードを活用して記事の一部分を期間限定で表示する方法

とみーブログで紹介した商品、期間限定キャンペーンで安くなってるから、その文言付け加えておこう！ ...

https://0edition.net/archives/7214

CSS,Luxeritas,WordPress,カスタマイズ

買ってよかったホワイトの生活家電・生活用品まとめ【シンプルインテリアにおすすめ】

ADELLEのメニューバーとフッターのリボン端を透過させる方法

コメント一覧

tommyより:
2018-09-09 23:31
ゆっきさん、初めまして。お返事遅くなりましてすみません。カスタマイズにこのブログが参考になったようで、とても嬉しく思います！
トップページのパンくずリストだけ非表示する方法ですが、CSSで対処する方法はこちらです。
.home .container #breadcrumb{
display: none !important;
}
パンくずリストの余白も非表示になってしまいますので、設定によってはメニューとの間がキツキツになってしまうかもしれません。適所調整してみてください。
にくきゅうより:
2018-09-16 02:46
こんばんは！
いつも拝見させていただいています。
よろしければ、ルクセリタスでのbgswitcher.jsのカスタマイズについて、記事にしていただきたいですm(_ _)m
背景画像をフェードアウトでいくつかの画像で回したいのですが、実装できなくて(ToT)
tommyより:
2018-09-18 22:23
にくきゅうさん、初めまして。
すみません、今ちょっと忙しくて記事を書いている時間が無くて…できればコメントやメールでやりとりさせていただきたく。
bgswitcher.jsで、どのように設定されたのでしょうか？
よければ参考URLと実際にどう記述されたのか教えてください。bgswitcher.jsは使ったことはありませんが、分かる範囲で回答させていただきます！

ピンバック & トラックバック一覧

Luxeritasカスタマイズまとめ(初心者向け) | メープルの国のアリスより:
2019-09-27 07:49
[…] 第0版こちらのサイトを参考にさせていただきました! […]
Word Press無料テーマ【Luxseritas】を選んだ理由 | blog8ohoより:
2019-12-17 23:51
[…] https://0edition.net/archives/2489 […]
Luxeritas(ルクセリタス)デザイン・カスタマイズ方法まとめ【初心者向け】 - ゆるっと投資ブログより:
2020-05-24 22:26
[…] 参考記事　Luxeritas（ルクセリタス）の見た目をオシャレに！ 16のカスタマイズしたことまとめ【WordPressテーマ】 […]
【初心者向け】ブログが一気におしゃれになる！Luxeritas（ルクセリタス）デザイン・カスタマイズ方法まとめ – 藤奈ブログより:
2021-04-19 21:54
[…] Luxeritas（ルクセリタス）の見た目をオシャレに！ 15のカスタマイズしたことまとめ【WordPressテーマ】 […]
ブログテーマをLuxeritasに変更してカスタマイズした12項目と困ってること - 急がば回れの裏側より:
2021-10-08 14:08
[…] Luxeritas（ルクセリタス）の見た目をオシャレに！ 13のカスタマイズしたことまとめ【WordPressテーマ】 […]