WordPressのSimplicity2テーマを使った超初心者向けのカスタマイズ入門

WordPressのテーマSimplicity2を使った簡単なカスタマイズをご紹介します。
修正箇所も影響の少ない部分ですので、初心者の方がカスタマイズを試すのにもってこいです。

Simlicity2の子テーマを修正してカスタマイズする
Simplicity2をカスタマイズしてフォントサイズを変更する
Simplicity2で見出しをデザインする
まとめ

Simlicity2の子テーマを修正してカスタマイズする

Simplicity2ではアップデートに備えて子テーマを修正することを推奨しています。
これはテーマファイルのアップデートがあった場合でも子テーマの設定は残るようになっており、運用面でのリスクを低減できる為です。

子テーマをまだインストールされていない場合はまず子テーマをインストールしてください。

子テーマのインストール方法は

1.　Simplicity2のダウンロードページからSimplicity2の子テーマのダウンロードを見つけてそこからダウンロードしておく。

2.　WorkPressのダッシュボードから「外観」→「テーマ」→「新規追加」から、「テーマのアップロード」を選択して先程ダウンロードしたファイルをアップロードする。

3.　アップロードできたらSimplicity2 childを有効化する。

これで子テーマが使えるようになりました。
子テーマの修正方法は、ダッシュボードから「外観」→「テーマの編集」を選択します。

テーマの編集画面では、Simplicity2 childのスタイルシート(style.css)を編集できますので、ここに追加設定したいスタイルを登録していきます。

追加したスタイルは「ファイルを更新」で追加した設定が有効になります。

次の章で簡単なスタイルの追加でブログの表示をカスタマイズするサンプルをご紹介します。

Simplicity2をカスタマイズしてフォントサイズを変更する

フォントのサイズを各パートで変更することができます。

トップページの記事タイトルのフォントサイズの変更

トップページに表示される記事タイトルのフォントサイズを19pxに設定します。
以下をstyle.cssに追記します。19pxの部分の数字を変えれば他のサイズにもできます。

/*---------------------------------
topページ記事タイトルのフォントサイズの変更
--------------------------------*/
.entry h2 a{
 font-size: 19px;
 line-height: 1.4;
}

記事ページのh2見出しタグのフォントサイズの変更

これは記事ページのh2タグの部分のフォントサイズの指定です。
20pxの部分の数字でサイズが変わります。

/*---------------------------------
記事ページh2タイトルを小さく
--------------------------------*/
.article h2 {
	font-size: 20px;
}

サイドバーのフォントサイズを変える

サイドバーのフォントサイズも変えることができます。

/*---------------------------------
サイドバーのフォントサイズを変える
--------------------------------*/
#sidebar {
	font-size: 15px;
}

Simplicity2で見出しをデザインする

今度はh2タグで指定される見出し部分をちょっと変えてみましょう。
以下を追加することでh2の見出しを下側に吹き出しを出すようなデザインに変更できます。

#ff9933と書かれた部分には自分の好きな色のカラーコードを指定してください。

/*---------------------------------
h2のデザイン
--------------------------------*/
.article h2 {
	position: relative;
	padding: .7em .75em;
	background-color: #ff9933;
	color: #fff;
	border-radius: 6px;
	border-bottom: 0;
}

.article h2::after {
	position: absolute;
	top: 100%;
	left: 40px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 12px solid #ff9933;
	border-bottom: 0;
}