ワードプレスのテーマ「Simplicity2」をコピペで簡単カスタマイズ。

シェアする

  • このエントリーをはてなブックマークに追加

コピペするだけで簡単カスタマイズ

ワードプレスでカスタマイズのしやすいテーマといえば「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」のテーマ編集 スタイルシートとすすみ、空欄部分に先ほどコピーしたものを貼り付けて保存するだけです。

もし、デザインの変更がされない場合は、キャッシュのクリアを行ってみてください。

あとは、お好みで色を変えるなどしてくださいね!