ルクセリタス(Luxeritas )の見出しをプチカスタマイズ │ P.net

1. プチカスタマイズ
2. まとめ

プチカスタマイズ

wordpressのテーマをルクセリタスに変更して随分たちました。

今の所はテーマを変更する必要性もないのでそのままにしてますが、もともとこのブログはwordpressの運用を通じて勉強することが目的だったのを最近忘れがちであったので、見出しをプチカスタマイズを行なってみました。

以前も紹介しましたが、このルクセリタスというテーマは基本的にはWEBの知識がなくても、カスタマイズが簡単にできるというのが一つの売りだと思います。

Luxeritas（ルクセリタス）がすげーよい！！wordpressのテーマを変更

パズルを組み合わせるように、用意されているパーツを選んで行くだけでおしゃれなものができてしまうという。

それだと私の知識が増えないのですがwww

ただ、そのパーツ自体を変えたいと思った時、そうなるとそれなりの知識が必要になってきます。

一番身近なカスタマイズポイントと言えば「見出し」だと思います。

簡単にカスタマイズしてみたので紹介します。

h2とh3をカスタマイズ

ブログもそうですが、文章作成する時に見出しでわかりやすくまとめるのが通例ですよね。

章・節・項とでもいうのでしょうか、読みやすくまとめるという形。

HTMLではマークアップの時に、各セクションごとにツリー状に構造を持つことをアウトラインとか言いますけど、それに伴って見出しもつけると思います。

・タイトル・・h1
└1章・・・h2
└─1節・・h3
└──1項・h4
└──2項・h4
└2章・・・h2

例えばこんな感じで。

ルクセリタスにはもちろん最初からh1〜見出しが設定されていますが、それを好きなように変更するにはcssに記述が必要になります。

で、cssに記述をするわけですが、ひとつだけ注意点がありますね。

wordpressのテーマをカスタマイズする時にテーマのcssとかをそのままいじってしまうと、バージョンアップ時とかにそのまま上書きされて戻ってしまう可能性あります。

なので、それを防ぐために子テーマという形でもう一つテーマがあり、そちらをカスタマイズすることで、それを防ぐという方法があります。

もちろん、ルクセリタスには親テーマの他に子テーマがちゃんと用意されているので、cssをいじるのは子テーマの方をいじるようにしましょう。親切すぎる。。。

ただ、私のはどういうわけか、、、見出しをカスタマイズした場合に親テーマの方と被ってしまう不具合がおきたので、親テーマの見出しはコメントアウトしました。。。。

インストール方法でもわるかったんだろうか。。。

あと、h1はブログ記事のタイトルのようなので、特に変更しなかったです。

私はh2とh3を変更しました。

h2

.post h2 {
font-size: 24px; font-size: 2.4rem;
border-style:solid;
border-width: 0 0 1px 5px;
border-color: #6C9FCE;
padding: 5px 10px;
}

.post h2 {

font-size: 24px; font-size: 2.4rem;

border-style:solid;

border-width: 0 0 1px 5px;

border-color: #6C9FCE;

padding: 5px 10px;

}

ルクセリタスの見出しはpostというクラス名になっているようなので、「.post」にしています。デザインとしては基本の基本ですね。。色々な参考書にのっていると思います。

簡単に説明すると

一応フォントサイズを指定しました。

border-styleで罫線の種類を指定

border-widthは罫線の太さの指定

border-colorは色

paddingは余白の指定。半角スペースで2つ指定すると、上下と左右を一度に指定したことになりますね。この場合上下に5px、左右に10pxの余白を指定していることになりますね。

h3

.post h3{
	position:relative;
	padding-left:30px;
        border-bottom:2px solid #6C9FCE;
        font-size: 18px;
	line-height: 38px;
}
 
.post h3:after, .post h3:before{
	content:''; 
	height:18px; 
	width:4px; 
	display:block; 
	background:#6C9FCE; 
	position:absolute; 
	top:8px; 
	left:15px; 
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px; 
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
}
 
.post h3:before{
	height:10px; 
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg); 
	top:16px; 
	left:7px
}