customizr の見た目をCSS を使っていろいろカスタマイズしてみる

同じテーマを使っていると、どうしても他のサイトと見た目が似たり寄ったりになってしまいますよね。

標準機能を使ってカスタマイズしてみたものの、他のサイトと差をつけるのに限界を感じたり・・

そんな時、CSSに少しだけ手を加えるだけで、自分だけのオリジナルなテーマに変身させることが可能です。

（重要）CSSをカスタマイズする前にやっておくべきこと

CSSやPHPに手を加えるような場合、子テーマを使うことがが必須条件になります。

カスタマイズするためのCSSを記述する場所は、子テーマの style.css になります。

もし子テーマを作わずにバージョンアップをすると、せっかくカスタマイズした部分がすべてパーになります。

子テーマをまだ作っていないという方、下記のサイトをご参考にさっそく作ってください。

wpdocs.osdn.jp

子テーマ - WordPress Codex 日本語版

https://wpdocs.osdn.jp/子テーマ

wp.myafi.net

WordPressをカスタマイズする前に子テーマを作っておく | WPnavi

http://wp.myafi.net/child-theme/

子テーマについての前置き WordPressはほとんどの方が既存のテーマからお好みのものを選んで使用していらっしゃると思います。テーマを初期状態のまま使うのももちろんアリ。ですが、WordPressに慣れていくにつれてもっとこうしたいのにな～っていう要求は膨らむもの。そんな時「カスタマ

ページナビ上に表示される「ナビゲーション」や「Post navigation」という文字を消す

CSS

h3.assistive-text{
 line-height:0%;
 color:#fafafa;
 font-size:0px;
}

h3.assistive-text{

line-height:0%;

color:#fafafa;

font-size:0px;

}

フォント

CSS

body {
  font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;
}

input,
button,
select,
textarea {
  font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;
}

input[type="submit"] {
  font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;
}

.navbar-search .search-query {
  font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;
}

body {

font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;

}

input,

button,

select,

textarea {

font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;

}

input[type="submit"] {

font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;

}

.navbar-search .search-query {

font-family: Helvetica, Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;

}

ヘッダーの背景

背景画像の上に白のグラデーション（縦方向）をかけています。

CSS

header.tc-header{
background:  linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.9)), url(https://plumpliver.com/wp-content/uploads/2016/05/shared-img-thumb-FSC_sukitoorusuimen_TP_V.jpg) center center / cover no-repeat;
}

header.tc-header{

background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.9)), url(https://plumpliver.com/wp-content/uploads/2016/05/shared-img-thumb-FSC_sukitoorusuimen_TP_V.jpg) center center / cover no-repeat;

}

フッターの背景

背景画像の上にグラデーション（斜め方向）をかけています。

CSS

footer#footer{
background:  linear-gradient(-45deg,  rgba(229,93,135,.7), rgba(0,36,173,.7)), url(https://plumpliver.com/wp-content/uploads/2016/05/shared-img-thumb-NAT85_beachsanset_TP_V.jpg) center center / cover no-repeat;
}

footer#footer{

background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(0,36,173,.7)), url(https://plumpliver.com/wp-content/uploads/2016/05/shared-img-thumb-NAT85_beachsanset_TP_V.jpg) center center / cover no-repeat;

}

記事内のh2タグ

CSS

section > h2 
{
        position: relative;
        padding: 0 .4em .1em;
}

section > h2:after 
{
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        content: '';
        width: 100%;
        height: 10px;
        background-color: #b6f0fc;
}

section > h2

{

position: relative;

padding: 0 .4em .1em;

}

section > h2:after

{

position: absolute;

bottom: 0;

left: 0;

z-index: -1;

content: '';

width: 100%;

height: 10px;

background-color: #b6f0fc;

}

記事内のh3タグ

CSS

section > h3 
	padding: 0.50em 1em;
	border: 1px solid #ccc;
	border-top: 3px solid #3498db;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
        margin-top: 40px;
}

section > h3

padding: 0.50em 1em;

border: 1px solid #ccc;

border-top: 3px solid #3498db;

background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);

background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);

box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;

margin-top: 40px;

}

記事内のh4タグ

CSS

section > h4 
{
        font-size: 120%;
        line-height: 120%;
	position: relative;
	padding: 0.75em 1em 0.75em 1em;
        margin-top: 40px;
}
section > h4:after 
{
	position: absolute;
	top: 0.5em;
	left: 0em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #3498db;
	border-radius: 4px;
}

section > h4

{

font-size: 120%;

line-height: 120%;

position: relative;

padding: 0.75em 1em 0.75em 1em;

margin-top: 40px;

}

section > h4:after

{

position: absolute;

top: 0.5em;

left: 0em;

content: '';

width: 6px;

height: -webkit-calc(100% - 1em);

height: calc(100% - 1em);

background-color: #3498db;

border-radius: 4px;

}

記事内のblockquote（引用）タグ

CSS

section > blockquote{
    background-color: #FFF;
    padding: 3.5em 1em 2.5em;
    position: relative;
    border: 3px solid #3498db;
    margin: 0 1em 1.5em;
    box-shadow: 1px 2px 4px rgba(50,50,50,.5);
    -webkit-box-shadow: 1px 2px 4px rgba(50,50,50,.5);
    -moz-box-shadow: 1px 2px 4px rgba(50,50,50,.5);
}
 
section > blockquote:before{
    content: "“";
    font-size: 600%;
    line-height: 1em;
    color: #999;
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
}
 
section > blockquote:after{
    content: "”";
    font-size: 600%;
    line-height: 0em;
    font-family: "ＭＳ Ｐゴシック",sans-serif;
    color: #999;
    position: absolute;
    right: 20px;
    bottom: 0;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
}

section > blockquote{

background-color: #FFF;

padding: 3.5em 1em 2.5em;

position: relative;

border: 3px solid #3498db;

margin: 0 1em 1.5em;

box-shadow: 1px 2px 4px rgba(50,50,50,.5);

-webkit-box-shadow: 1px 2px 4px rgba(50,50,50,.5);

-moz-box-shadow: 1px 2px 4px rgba(50,50,50,.5);

}

section > blockquote:before{

content: "“";

font-size: 600%;

line-height: 1em;

color: #999;

position: absolute;

left: 0;

top: 0;

font-family: 'Times New Roman' ,"ＭＳＰゴシック" ,sans-serif;

}

section > blockquote:after{

content: "”";

font-size: 600%;

line-height: 0em;

font-family: "ＭＳＰゴシック",sans-serif;

color: #999;

position: absolute;

right: 20px;

bottom: 0;

font-family: 'Times New Roman' ,"ＭＳＰゴシック" ,sans-serif;

}