[Simplicity2] カスタマイズ

概要

WordPress の人気テーマ「simplicity2」のカスタマイズメモ。

Simplicity2のダウンロード

無料WordpressテーマSimplicity2のダウンロードはこちらです。インストール方法はこちら。テーマのアップデート方法は、以下を参照してください。Simplicity2のダウンロードWordPress4.1以上、PHP5.4以上で

wp-simplicity.com

カスタマイズ

カスタマイズは直接親テーマを修正せず、子テーマを使い子テーマの style.css を修正する。（親テーマのアップデート時に影響を受けないようにするため）

子テーマのダウンロード

以下のリンク先から Simplicity の子テーマをダウンロードし、有効化する。
https://wp-simplicity.com/downloads/child-theme2/

フォント

英語フォントは Google の Web Font を利用。Web Font の日本語フォントは重くなるので利用しない。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

本文に Robot Slab、pre 用の等倍フォントに Space Mono、サイドバー用に Josefin Slab を使う。

@import 'https://fonts.googleapis.com/css?family=Space+Mono|Roboto+Slab:400,700|Josefin+Slab';

本文

・見出し(h2,h3)のスタイル変更

.article h2 { background-color:#cccccc; border-left: none; }

.article h3 {
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

・pre のフォントとスタイル変更

pre { font-family: 'Space Mono', monospace, serif; }
.entry-content pre.nohighlight { background-color: #444444; color: white; }

・画像に影を付ける

.entry-content img { display: inline-block; box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 1); }

サイドバー

・[外観][ウィジェット][サイドバーウィジェット] で設定。

・見出しのフォントとスタイル変更。

#sidebar h3 {
	font-weight: normal; 
	font-family: 'Josefin Slab';
	border: 1px solid #888888;
	padding: 7px;
	text-align:center;
	background-color: #ffffff;
}