Luxeritas(ルクセリタス)の見た目をオシャレに! 15のカスタマイズしたことまとめ【WordPressテーマ】

2016-12-18Web制作

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

こんにちは、とみーです。

今までこのブログではADELLEというテーマを使ってきました。

可愛くて非常にお気に入りだったのですが、カスタマイザーから設定出来ることが少ないのがネックでした。

そんなある日、ネットを彷徨っていたらビビッと来るテーマを発見!

Luxeritas(ルクセリタス)  です。

とにかく表示の速さに惹かれました。すごくないですか、これ。AMPにしてないのにめっちゃ速くないですか。

そしてカスタマイザーから設定できることの豊富さ!

何より無料!!!

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

そんな私が行ったカスタマイズのまとめ備忘録です。

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

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

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

スポンサーリンク

メインエリアを白背景に

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

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

.container {
        background-color: #FFF;
}

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

PCでは右寄せ、

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

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

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

このブログでメニューをリボンにするのは譲れない!
CSSでは端っこだけ設定してます。各メニューの色はカスタマイザーで設定。

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

@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 {
		content: "";
		display: block;
		position: absolute;
		top: 25px;
		border: 20px solid transparent;
		z-index: -1;
	}
	#header #gnavi:before {
		left: -20px;
		border-right-color: #D0394D;
	}
	#header #gnavi:after {
		right: -20px;
		border-left-color: #D0394D;
	}
	.menu {
		position: relative;
	}
	.menu:before, .menu:after{
		content: "";
		position: absolute;
		display: block;
		border-style: solid;
		border: 20px solid #DA6272;
		bottom: -20px;
		z-index: -2;
	}
	.menu:before{
		left: -30px;
		border-right-width: 30px;
		border-left-color: transparent;
	}
	.menu:after{
		right: -30px;
		border-left-width: 30px;
		border-right-color: transparent;
	}
}

続きを読むのスタイルを変更(モバイル時)

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

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

 

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


@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;
 	}
}

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

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

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

見出しのスタイルを変更

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

画像はWordPressのメディアを追加を使用せずに、FTPやサーバのファイルマネージャーから/wp-content/themes/luxechのフォルダにアップロードしてます。(よく分からない方は、urlの()の中は、 http://から始まる絶対パスを指定すれば間違いないです)

.post h2{
	border: none;
	color: #FFF;
	background: url('h2bg.png') repeat;
	padding:10px 10px 10px 60px;
}
.post h3{
	border: none;
	color: #333;
	background: url('h3bg.png') no-repeat;
	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で指定します。

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 */
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #ecacb5;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
	border-radius: 50%;
}
.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;
}

 

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

関連記事オシャレな目次に! Table of Contents PlusをCSSでデザインカスタマイズ

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

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

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

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

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

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

/* ページネーションの色を変更 */
.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;
}

関連記事のhover(マウスオン)の色を変更

関連記事タイトルにマウスオンした場合、青色だったのを赤に変更。

#related h3 a:hover {
	color: #dc143c;
}

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

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

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

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

中の人エリアにあるSNSフォローボタン。
通常だと白い枠線と影がつくのですがどちらも非表示にしてフラット化しました。

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

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

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

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

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

可変幅/名無しアイコンホワイトタイプ (カウント表示)のデザインを変更しました。
マウスオンで背景色が各ブランドカラーに変化します。

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 .google a, .snsi-w .snsib .google a {
	border: 1px solid #dd4b39;
}
.snsi-w .google-count {
	color: #dd4b39;
}
.sns-w .snsb .google a:hover, .snsi-w .snsib .google a:hover {
	background-color: #dd4b39;
	color: #fff;
}
.snsi-w .snsib .google a:hover>.google-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;
}

フォントの変更

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

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に変更しました。

Luxeritasカスタマイズ あとがき

ブログを書くのは二の次で、私の趣味はカスタマイズすることじゃないかと、ここ最近思うのです。笑

ともあれ、オリジナリティを出せて大変満足です。

見た目は変わりましたが、これからも第0版をよろしくお願いします!

おすすめ記事セレクション
シンプルなインテリアを目指す方へ → 買ってよかったホワイトの生活家電・生活用品まとめ
おしゃれな写真は誰でも撮れます → ブログ映えするオシャレな写真撮影&加工テクニック
デキる大人への第一歩 → 私のEvernoteの活用術・10個の事例【初心者でもできる活用法】
意識を変えるだけで貯まる! → 年収300万円のOLが8年で1000万円以上貯めた方法と習慣

この記事を読んだ人は他にこんな記事も読んでいます