ワードプレステンプレートSINKAの見出し装飾とカスタマイズ!!

今回はWordpressテーマ(テンプレート)SINKAの見出しの装飾カスタマイズについてです。

 

SINKAはシンプルなデザインで、綺麗なブログを作ることが可能なのですが、少し見出しが味気ない感じがするので、この機会にカスタマイズしておきましょう。

 

見出しの種類

カスタマイズといっても、SINKAであればCSSを追加して、とても簡単に見出しを装飾する事ができます。

 

下記に見出し装飾の見本とCSSがありますので、気に入った見出しを選んでください。

 

ちょっとしたことですが、見出しだけでブログの雰囲気が大きく変わりますよ。

 

 下線を引く

sinka見出し2
.post h3 {
	border-bottom: 1px solid #000000;
}

 

先頭に■を付ける

 sinka見出し4

.post h3 {
	border-left: 23px solid #0077B3;
	margin-left: 10px;
	padding-left: 10px;
}

 

色枠で囲う

sinka見出し3

.post h3 {
	margin: 0 0 30px;
	padding: 12px 10px;
	background: #0077B3;
	color: #ffffff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

 

吹き出し

sinka見出し5

.post h3 {
	position: relative;
	color: #111;
	background: #fff;
	font-size: 20px;
	line-height: 1;
	border: 2px solid #555555;
	margin: 30px -10px 10px;
	padding: 15px 5px 12px 10px;
	border-radius: 3px;
}

.post h3:after,.post h2:before {
	content: "";
	position: absolute;
	top: 100%;
	height: 0;
	width: 0;
}

.post h3:after {
	left: 33px;
	border: 11px solid transparent;
	border-top: 11px solid #fff;
}

.post h3:before {
	left: 30px;
	border: 14px solid transparent;
	border-top: 14px solid #555555;
}

 

上記はh3の見出しで設定してあるので、その他の見出しで使うときは【h3】の部分を変更してください。

 

見出しのカスタマイズ

気に入った見出し装飾が見つかったらCSSを追加していきます。

 

ダッシュボードの【外観】⇒【テーマオプション】へと進み、【自由入力欄】のタブをクリックします。

 

sinka見出し装飾2

 

一番下にある【ユーザー定義CSS】の部分に先程のCSSをコピペして貼り付けて、設定をクリックすれば完了です。

 

sinka見出し装飾

 

どうです?簡単ではないですか?

 

この使いやすさがSINKAの最大のメリットで、ちょっとしたブログを作るときなどは重宝します。

 

他のテンプレートだと少し複雑な設定になってくるのですが、SINKAであれば、それほど難しくはないと思います。

 

見出しの装飾のCSSはネット上にも様々なものがあるので、慣れてきたら色々と変更してみましょう。