コピペするだけで簡単カスタマイズ
ワードプレスでカスタマイズのしやすいテーマといえば「Simplicity2」が有名です。
テーマを追加して、childを作るところまでは、何とか理解できる人も・・・
いざ、カスタマイズとなれば大変です。
僕もその一人で、わからない事をどういうキーワードで検索すれば回答を見つけら
れるのかすらわからず、やみくもに検索する毎日でした。
本当に最低限のカスタマイズですが、これだけで見栄えがかなり変わります。
テーマに「Simplicity2_child」を作る事が出来たら、以下をスタイルシートに
コピペするだけです。
やってみてください。
「Simplicity2_child」という子テーマを作る
子テーマの作り方は割愛させていただきます。
これはぜひやっておくべきです。というのもテーマの提供先でテーマのレイアウト変更が行われるなどされると、自分のレイアウトにも影響を受けてしまうからです。
そのため、子テーマを作り影響をうけなくてすむようにします。
コピーする
以下をコピーします。
↓ ↓ ↓ ↓
@charset “UTF-8”;
/*!
Theme Name: Simplicity2 child
Template: simplicity2
Version: 20161002
*/
/*******************************
* 投稿ページのパンくずリストを非表示
********************************/
.archive #breadcrumb {
display: none;
}
/*******************************
* 固定ページ記事タイトル非表示
********************************/
.page
.entry-title {
display: none;
}
/*******************************
* 枠組みの色設定
********************************/
#main {
float: left;
box-sizing: border-box;
width: 740px;
padding: 20px 29px;
border:4.0px solid #2098a8;
background-color:#fff;
border-radius: 4px;
margin-bottom: 30px;
}
/*******************************
* 見出しのデザイン設定
********************************/
.article h1 {
font-size:20px;
}
.article h2 {
font-size:18px;
background: #2098a8;
color: #fff;
padding: 12px 0px 12px 14px ;
border-left: none;
box-shadow: 0 2px 5px #999;
}
.article h3 {
font-size:17px;
border-bottom: none;
border-left: 7px solid #2098a8;
padding: 8px 0px 8px 12px;
box-shadow: 0 2px 5px #999;
}
.article h4 {
font-size:16px;
border-bottom: 2px dotted #2098a8;
padding: 4px 0px;
}
↑ ↑ ↑ ↑
ここまで
「Simplicity2_child」が完成したら、「Simplicity2_child」のテーマ編集 ⇒ スタイルシートとすすみ、空欄部分に先ほどコピーしたものを貼り付けて保存するだけです。
もし、デザインの変更がされない場合は、キャッシュのクリアを行ってみてください。
あとは、お好みで色を変えるなどしてくださいね！