このサイトのWordPressテンプレートを Twenty Sixteenへ移行してみました

このサイトを WordPress v4.2.2 にアップグレードし、WordPressテンプレートを Twenty Fifteenから、Twenty Sixteen (2016) テンプレートに移行。その内容を以下に共有します。移行直前までのこのサイトのTwenty Fifteenでの通常外観は以下の通り。

TwentyFifteen1

スマホなどの細長画面の場合は、以下の通りでした。

TwentyFifteen2

WordPress 4.2.2では、Twenty Sixteenは使えますが、外観のテンプレートのところにはそのままでは表示されないようです。そこで、[外観] [テーマ]の以下の、[+ 新しいテーマを追加] をクリック。

WordPress Thema

するとTwenty Sixteenが表示されますので、クリックしてインストールします。すると、以下のようにダッシュボードの [外観] [テーマ] に、Twenty Sixteenが表示されるようになるため、こちらを [有効化] して切り替えます。

TwentySixteenThema

すると以下のように、Twenty Sixteen に切り替わりました!Twenty Fifteenの良かったシンプルを受け継ぎつつ、右側のコンテンツ・サイドバーが復活しました。(Twenty Forteenにはあった) これは、バナーや広告等を表示するのに便利です。

TwentySixteen1

縦長にすると、以下の感じ。周りに黒い枠ができて、浮き上がっているように見えます。

TwentySixteen2

また、色も良い感じで変えられる様になりました。これまでは、色の変更は中途半端だったのでWordPressで実施せず、テンプレートのソースコードを変更していたのですが、[外観] [カスタマイズ] [色] で変更できます。これであれば、一瞬で全体を好きな色に変えられるので、素晴らしいですね!これは私的には画期的です。さっそく、自分の他のサイトと同じような以下の色に変更しました。これなら一瞬ですね。

TwentySixteenColor

投稿のページは以下のように表示されます。フォトは左端までで、文章は左側に投稿者や日付、カテゴリなどのヘッダー情報が表示されるため、左側が少しあきます。

Twenty Fourteenなどは左側のメニューが分離されているイメージだったのが、ここでは一体的になったのが良いですね。全体的に画面の一体感が出て、パンフレットを見ているような印象になりました。広く感じます。

TwentySixteenPost

あと、タイトルの英文字が大文字に変換されるのが嫌いなので、[外観] [テーマの編集] で style.css で 「uppercase」 のある行を全てコメントアウトして無効にしました。

同じく style.css の 「font-family」 を以下のように、別のフォントを指定することで、フォントを変えることができます。フォントが変わると、サイトの雰囲気、変わりますね。

/**
 * 3.0 - Typography
 */

body,
button,
input,
select,
textarea {
 color: #1a1a1a;
/*font-family: Merriweather, Georgia, serif; コメント */
 font-family: sans-serif;

 font-size: 16px;
 font-size: 1rem;
 line-height: 1.75;
}

Twenty Sixteenは、色が変えられるところと、画面に一体感が出たところが気に入りました。他のサイトはまだTwenty Fourteenのままだったので、Twenty Sixteen への移行をしたいと思います!

 

FacebookTwitterGoogle+Line