wordpress blog header image

Twenty Fifteenの設定とカスタマイズを行った

はじめに

WordPressのテーマ「 Twenty Fifteen 」の設定とカスタマイズを行った。
Twenty Fifteenを採用した理由は、単純にデザインが好きだから。
他のブログではあまり見たことのないレイアウトだが、結構気に入っている。

今回は、テーマを設定しカスタマイズするまでの流れをまとめる。

Twenty Fifteen をインストールする

WordPressのダッシュボードの「外観」でインストールすることができる。自分は「アクセシビリティ対応」の公式テーマの中から探した。

アクセシビリティは重要ですよねー。

子テーマを作成する

テーマをインストールすることができたので、次はカスタマイズ。

テーマファイルを直接編集するのがリスキーなのは私でも分かる。
WordPressでは、既存のテーマを変更する方法として「子テーマ」が推奨されているようなので、今回は「子テーマ」を使用した。

子テーマというのは、既存のテーマ(今回はTwenty Fifteen)の機能とスタイルを継承したテーマで、これを上書きすることでカスタマイズを行える。詳しくはコチラを参照。

今回は、「style.css」を上書きした。
タイトルと本文の文字サイズやフォント、リンクの色などに手を加えた。

  • Before
  • before Twenty Fifteen image

  • After
  • after Twenty Fifteen image

※ 画質が悪く分かり辛いが、フォントを変更するとかなり印象が変わる。

ソースコードは以下の通り。

テーマ一覧から子テーマを選択する

設定が完了すると、ダッシュボードの「テーマ一覧」に子テーマが表示される。
これを「有効」にすれば自分が作成した style.cssを反映させたテーマが適用される。

おわりに

子テーマを使用すれば気軽に既存のテーマをカスタマイズすることができると分かった。
今回は、サイトの見た目(style.css)だけをいじったが、次回以降は中身の処理にも手を加えていく。

参考ページ

WordPressにおける子テーマの作り方
http://creive.me/archives/9296/

Twenty Fifteen カスタマイズ
http://kwski.net/wordpress/1667/

シェアしていただけると嬉しいです

スポンサーリンク