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

2016-12-18Web制作

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

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

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

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

仕方なく本体に追記して色々対応していましたが、そうすると今度はテーマをアップデートしたときに0に戻ってしまいます。
また追記しなおさないといけないのが面倒で、テーマのアップデートはずっと見送っていました。

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

Luxeritas(ルクセリタス) icon-external-link です。

とにかく表示の速さに惹かれました。
すごくないですか、これ。速くないですか。
そしてカスタマイザーから設定できることの豊富さ!

何より無料!!!

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

そんな私が行ったカスタマイズのまとめ備忘録です。
カスタマイザーで設定したことは省いてます。カスタマイザーで変更できるのに気づかずCSSで変更してるのもあると思います。笑

カスタマイズは基本的に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;
	}
}

パンくずリストの余白を調整(PC時)

左のラインが記事の余白と同じになるように調整しました。
記事の余白はカスタマイザーのコンテンツ領域のパディングで設定できます。ちなみに20pxです。

@media screen and (min-width: 1050px){
	#breadcrumb{
		margin: 30px 20px 25px 20px;
	}
}

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

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

@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コピペで出来るシンプル可愛い見出しデザイン

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

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

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

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

最下記事の記事の枠線を消去

カスタマイザーであらゆる所の枠線を自由に消すことができるのですが、ここだけ消せなかったのでCSSで対応しました。

#main div.grid:last-child{
	margin-bottom: 0px;
	border: none;
}

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

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

#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共有ボタンのデザインを変更

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

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

あとがき

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

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

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

こちらの記事もおすすめです