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

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

スポンサーリンク
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

Simplicity2はそのままでも十分使えるテンプレートですが、自分らしいデザインにできるように、まずはこのあたりのカスタマイズから試してみてはいかがでしょうか。

次はヘッダー画像のカスタマイズも試してみては。
https://nonbiriteatime.com/210.html

スポンサーリンク