2015-11-03 – WordPressをカスタマイズしたい

wordpressのテーマ「Twenty Fifteen」はデフォルトではサイトが真っ白になりますね
前回、見出しに装飾を加えたのでついでにサイトカラーもかえましょう
これはCSSをさわることなくダッシュボードから簡単にできます

外観－カスタマイズ で以下の設定画面が出てきます。

ここでは、テーマの変更のほか、
・サイト基本情報
・色
・ヘッダー画像
・背景画像
・メニュー
・ウィジェット
が設定できます

サイトカラーを変更するために「色」を選択します

ベース配色で6色の中から選択することができます
背景色
ヘッダー・サイドバーテキスト色
ヘッダー・サイドバー背景色
で色を変更できますので、自分好みに調節しましょう

最後に保存して終了になります。
サイトカラーを変更するだけでサイトのイメージが変わってきますね

wordpressのテーマ「Twenty Fifteen」では
記事の見出し（h1.h2.h3…など）はなにも装飾されていませんよね

少しさみしいのでかんたんなデザインで装飾します

twentyfifteenでは「entry-content」と「comment-content」を指定します。
entry-contentだけでは表示されませんでしたのでご注意を！

h1はタイトルで使っているので見出しには使えません。
ここではh2からh4までの見出しを装飾します。

まずはh2です
左と下にオレンジの線で装飾しました

.entry-content h2,
.comment-content h2 {
margin: 0 0 1.5em;
border-left: 7px solid #ff4500;
border-bottom: 1px solid #ff4500;
padding-left: 5px;
}

.entry-content h2,

.comment-content h2 {

margin: 0 0 1.5em;

border-left: 7px solid #ff4500;

border-bottom: 1px solid #ff4500;

padding-left: 5px;

}

h3はデザインは同じに、色を少し薄くしてみました。

.entry-content h3,
.comment-content h3 {
margin: 0 0 1.5em;
border-left: 7px solid #ff8c00;
border-bottom: 1px solid #ff8c00;
padding-left: 5px;
}

.entry-content h3,

.comment-content h3 {

margin: 0 0 1.5em;

border-left: 7px solid #ff8c00;

border-bottom: 1px solid #ff8c00;

padding-left: 5px;

}

h4は下線を点線にして色を薄くしました

.entry-content h4,
.comment-content h4 {
margin: 0 0 1.5em;
border-left: 7px solid #ffa500;
border-bottom: 1px dotted #ffa500;
padding-left: 5px;
}

.entry-content h4,

.comment-content h4 {

margin: 0 0 1.5em;

border-left: 7px solid #ffa500;

border-bottom: 1px dotted #ffa500;

padding-left: 5px;

}

表示はこのようになります

見出し2

見出しはCSSを編集して色々装飾できます
自分のサイトに合ったデザインにしてみたらいいかもしれませんね