Simplicity2でシンプルなブログを作成しよう

ゴール

本記事はWirdPressのテーマであるSimplicity2の使用方法についてまとめます。
Simplicity2は固定ページとサイドバーウィジェットの２段構成になっており、ウィジェットの配置などを自由に変更することができます。
この記事もSimplicity2を使用していますが、例として下の画像のようなサイドバーウィジェットにサイト内検索やプロフィールを乗せた記事を作成することを目指します。

必要なもの

	必要なもの		価格(円)
1	PC		ピンキリ
1	備考	インターネット接続可能なこと
2	WordPressのアカウント		無料
2	備考	持っていない場合は、こちらを参照→WordPressのインストール方法
3	Simplicity2		無料
3	備考	このサイトからダウンロードできます→Simplicity2のダウンロード
4	Simplicity2子テーマ		無料
4	備考	Simplicity2と同じサイトでダウンロードできます。

Simplicity2の使用方法

Simplicity2は親テーマであるSimplicity2とその子テーマであるSimplicity2子テーマで運用します。
子テーマとはこの後Simplicity2を自分好みにカスタマイズしていくのですが、そのときのカスタマイズ部分をまとめたものとなります。
イメージとしては下記のような図になります。
子テーマを利用しない場合はSimplicity2をアップデートするとカスタマイズした部分が上書きされてしまいます。
一方子テーマを利用した場合、カスタマイズ部分は子テーマにあるためSimplicity2をアップデートしてもカスタマイズ部分は上書きされずに残ります。
またSimplicity2と子テーマで同様の関数があっても、子テーマが上書きされるため問題なく動きます。
ただし、子テーマで使っている関数に対するアップデートがあった場合は動作に問題が出る可能性もあります。互換性があるか事前に確認が必要です。

Simplicity2のインストール方法

SimplicityのテーマはWordPressのテーマ検索では見つからないので、直接ダウンロードをし、WordPressに手動でインストールする手順を取る必要があります。

Simplicity2をダウンロードする

Simplicity2は下記のURLから直接ダウンロードします。
→Simplicity2のダウンロード

上のURLにアクセスし、下にスクロールしていくとSimplicity2.x 安定版があるので最新版をダウンロードします。
2017年2月9日ではSimplicity2.4 安定版が最新バージョンでした。

Simplicity2子テーマをダウンロードする

Simplicity2子テーマもSimplicity2と同様のURLからダウンロードできます。
→Simplicity2のダウンロード

上のURLにアクセスし、下にスクロールしていくとSimplicity2子テーマ(無印)があるので最新版をダウンロードします。

Simplicity2をインストールする

WordPressにログインし、外観/テーマメニューで新規追加ボタンをクリックします。

その後、”テーマのアップロード”ボタンをクリックします。

するとテーマのアップロード画面がでるので、ダウンロードしたSimplicity2をドロップ&ドロップするかファイル選択をし、”テーマのアップロード”ボタンをクリックします。

Simplicity2子テーマをインストールする

Simplicity2をインストールする方法と同様のため、割愛します。
こちらを参照ください。→Simplicity2をインストールする

Simplicity2のカスタマイズ

ここではインストールしたSimplicity2のカスタマイズ方法をまとめます。
Simplicity2カスタマイズメニューは下記方法で開けます。
・外観/カスタマイズメニューを開く(Simplicity2をテーマに設定している場合)
・外見メニュー内でSimplicity2 childに対してカスタマイズを行う

カスタマイズ項目

カスタマイズメニューを開くと、左側に下の画像のようなSimplicity2カスタマイズ項目が開きます。

それぞれのカスタマイズ項目の概要を下記にまとめます。
本ブログで変更する項目については背景黄色になっています。

	カスタマイズ項目	概要
1	サイト基本情報	サイトのタイトルやキャッチフレーズ、サイトのアイコンをカスタマイズできます。
2	色	サイトやヘッダーの背景色やリンクの色などの色に関する項目をカスタマイズできます。
3	ヘッダー	ヘッダー部分への画像やロゴ挿入などのカスタマイズできます。
4	背景画像	背景画像をカスタマイズできます。
5	スキン	Simplicity2がパーツスキンを規定しており、それらに対してカスタマイズできます。
6	レイアウト(全体・リスト)	サイト全体や一覧リストページのレイアウトをカスタマイズできます。
7	レイアウト(投稿・固定ページ)	投稿・固定ページのレイアウトをカスタマイズできます。
8	レイアウト(モバイル)	モバイルのレイアウトをカスタマイズできます。
9	画像	投稿・固定ページの本文で使用される画像に関してカスタマイズできます。
10	SEO	検索エンジンの検索結果リストに載った時にどのように表示されるかをカスタマイズできます。
10	SNS	SNSのシェアボタンやフォローボタンのカスタマイズできます。
11	アクセス解析	Google AnalyticやGoogle Search Consoleに関してカスタマイズできます。
12	広告	広告の表示や配置についてカスタマイズできます。
13	ブログカード(内部リンク)※	内部リンクブログカードをカスタマイズできます。
14	ブログカード(外部リンク)※	外部リンクブログカードをカスタマイズできます。
15	ソースコード	ソースコードのハイライト表示のカスタマイズできます。
16	コメント	コメント表示欄・入力欄のカスタマイズできます。
17	AMP(β機能)	AMP(投稿ページをモバイル上で高速に表示させる機能)のカスタマイズができます。
18	テーマ内テキスト	テーマ内で使用される定型文をカスタマイズできます。
19	管理者機能	管理画面や管理バーに独自機能を追加するなどのカスタマイズができます。
20	その他	ファビコンやアップルタッチアイコンなどのカスタマイズができます。
21	メニュー	メニューバーについてカスタマイズできます。ここでメニューバーの階層も変更できます。
22	ウィジェット	サイト内のウィジェット配置などをカスタマイズできます。
23	固定フロントページ	サイトアクセスしたときに最初に開くページや記事投稿ページなどをカスタマイズできます。
24	追加CSS※※	サイトのデザインをカスタマイズできます。
25	関連記事	関連記事の日付やコンテキストなどをカスタマイズできます。

※：ブログカードはSimplicity独自の技術なので本サイトでは基本的に使用していません。
※※：サイトのデザインカスタマイズは本ブログでは別の方法で実装しています。詳しくはこちらの記事を参考してください(→作成中)

本ブログでは
・メニュー
・ウィジェット
について変更を行うことで、ゴールで記載したブログを作成します。
それぞれの変更内容は次の章で記載していきます。

メニューのカスタマイズ

下の画像の様にメニューバーの追加する方法をまとめます。

Simplicity2のカスタマイズ項目の中でメニュー->メインメニューを選択します。
するとメインメニューのカスタマイズメニューが表示されるのでメニューバーに追加したい項目を選択します。
項目は”項目を追加”ボタンで追加できます。固定ページ、投稿、カテゴリー、タグを乗せることができます。
今回は固定ページのホーム画面と記事をまとめた投稿ページおよびWordPressのメイン画面であるWordPressの投稿ページをメニューに追加しています。
メニューバーへの配置は上から下の順番で表示されます。配置変更は項目をクリックした状態で動かせば自由に変更できます。階層構造も設定可能です。
メニュー上にある”変更を保存”ボタンをクリックすれば、設定完了です。

ウィジェットのカスタマイズ

下の画像の様にブログのウィジェットをカスタマイズする方法をまとめます。

Simplicity2のカスタマイズ項目の中でウィジェット->サイドバーウィジェットを選択します。
するとサイドバーウィジェットのカスタマイズメニューが表示されるのでサイドバーウィジェットに追加したいウィジェットを選択します。
項目は”ウィジェットを追加”ボタンで追加できます。ウィジェットは広告やテキストや最近の投稿などが追加できます。

それぞれのウィジェットを簡単にまとめました。
本ブログで追加する項目については背景黄色になっています。

	ウィジェット	概要
1	[S]パソコン用テキストウィジェット	パソコンからアクセスしたときに表示させるテキスト広告を選択できます。
2	[S]パソコン用広告ウィジェット	パソコンからアクセスしたときに表示させる広告を選択できます。１つの広告のみ表示できます。
3	[S]パソコン用広告ダブルレクタングル広告ウィジェット	パソコンからアクセスしたときに表示させる広告を選択できます。2つの広告を並べて表示できます。
4	[S]モバイル用テキストウィジェット	スマートフォン/タブレットからアクセスしたときに表示させるテキスト広告を選択できます。
5	[S]モバイル用広告ウィジェット	スマートフォン/タブレットからアクセスしたときに表示させる広告を選択できます。１つの広告のみ表示できます。
6	[S]新着記事	新着記事のリストを表示できます。
7	[S]最近のコメント	最近投稿されたコメントを表示できます。
8	アーカイブ	投稿の月別アーカイブを表示できます。
9	カスタムメニュー	カスタムメニューをサイドバーを表示できます。
10	カテゴリー	カテゴリーのリストを表示できます。
11	カレンダー	投稿のカレンダーを表示できます。
12	タグクラウド	タグクラウドを表示できます。
13	テキスト	自由に記載できるテキストを表示できます。
14	検索	サイト内検索フォームの表示