このサイトのテーマを Twenty Seventeen に変更しました (・∀・)!!

このサイトは CMS(コンテン・マネジメント・システム)として WordPress を使っていますが、使用テーマは長く WordPress 公式の Twenty Fourteen を採用してきました。
その後 WordPress 公式テーマとしては毎年 Twenty Fifteen、Twenty Sixteen とリリースされて来ましたが特にアピールする特徴もなく、デザインとしては Twenty Fourteen の方が好みだったのでそのまま自分好みにカスタマイズしながら使い続けて来ました。
その後もモバイルファーストの流れから技術的にはレスポンシブデザイン対応等進化して来たのでしょうが、基本的なデザインがイマイチだったんですよね〜、、

ところが今年のデフォルトテーマ:Twenty Seventeen はこれまでのバージョンアップから一転、非常にドラスティックな進化を遂げました。
あまりにもクールな変化だったので素直に変更です。

Twenty Seventeen の特徴・クールな点

1 ユニークなフロントページセクション

まず最も特徴的なのが、フロントページセクション / トップページ・ホームページです。

パララックス効果の効いたクールなフロントページ

実はボクはこのパララックス効果が大好きでして。

パララックス効果
視差効果。Web デザインにおけるパララックスはスクロールなどの動作に応じて複数のレイヤーにある要素を異なるスピードで動かすことで立体感や奥行きを演出する手法

実は Twenty Fourteen 時代にもパララックス効果が採用されたテーマをチェックして充ててみたことがあるのですが、基本的なデザインとかがイマイチだったりして実際に使うことはありませんでした。今回の Twenty Seventeen はその点フロントページセクションだけでなく全体的なデザインもクールで言うことなしです。

そしてこのパララックス効果と併せて Twenty Seventeen のフロントページセクションには次のようなクールさがあります。

  1. TOP ページに加えて 4つの固定ページの合計 5つの固定ページを連続してパララックス効果で繋ぎます。
  2. 各固定ページには推奨サイズ 2000 pixel ✕ 1200 pixel の大きなヘッダー(アイキャッチ)画像を設置でき、これがパララックス効果を伴って表示されます。
  3. サイト全体のヘッダーには、これも推奨サイズ 2000ピクセル✕1200ピクセルの動画も設定可能です。
    この動画には YouTube の動画も使えます。
    また、トップページ以外やモバイルデバイスでは動画ではなくサイトヘッダとして登録された画像・静止画が表示されます。

百聞は一見に如かずですので、よろしければこのサイトのフロントページセクションをご覧下さい。

TOP

& サイトヘッダー用にサクっと作ったビデオです。
本当はちゃんと作り込みたいところですが、取り急ぎには Mac の写真スライドショー作成機能や iPhone の写真モーメント作成機能でちゃちゃっと作っても結構クールなビデオが作れますね♬

2 デフォルトで美しいフォント

以前にも書きましたが WordPress の唯一の弱点とも言えたのがデフォルトフォントがイマイチ美しくない点でした。
∴僕はフォントファミリーをカスタマイズして使っていましたが、それも今回の Twenty Seventeen のローンチで解消されました。これは大きいです。

3 レスポンシブデザイン

これは Twenty Seventeen で始まった訳ではありませんが、引続きレスポンシブな機能が強化されています。
iPhone だとこんなカンジですね。

* 写真はメニューを開いたところ

その後はデフォルトテーマで標準でレスポンシブ対応ですが、以前はその為にプラグインを入れたりしていたんですよね〜
話逸れますが、企業のサイトとかでもいまだに手作りっぽいイケてないのを時々見かけますが、更にそれがモバイル端末でも同じ体で表示されるとガッカリしちゃいますね、、
その企業のアレな社員さんがガンバっていまだになんたらビルダーとかで作ってるんでしょうけど WordPress なり入れられないんだったら外出しすれば?って思いっちゃいます。割と名の通った企業でもいまだに見る。。

Twenty Seventeen に実装したカスタマイズ

という訳でこのままでも充分クールな Twenty Seventeen ですがいくつかのカスタマイズを行いました。

コンテンツ幅の拡大

Primary Contents と Secondary Contents の割合の変更

Twenty Seventeen のデフォルトサイズは次の通りです。(単位:pixel)

  • サイト幅 1000
  • 両端余白 48(厳密には 1文字16ピクセルの場合の 3文字分)
  • コンテンツ幅 904
  • メインコンテンツ幅 524(904ピクセルの 58%)
  • サイドバー 325(同 36%)

サイドバーに余裕がある割にメインコンテンツの幅が小さい印象でした。
∴次のように変更することにしました。

  • 両端余白 16(1文字分)
  • コンテンツ幅 968
  • メインコンテンツ幅 630(65%)
  • サイドバー 290(30%)

絶対値指定ではなく割合指定なので具体的には style.css の 58%・36% をそれぞれ 65%・30% に書き換えてあげます。
なお、site-info クラスと social-navigation クラスの幅は変更しない方が良いようです。

これでだいぶ良い感じになりました (・∀・)!!

サイト全体幅の拡大

ってかサイト全体の幅を広げればいいんじゃね?と気付いたのはその後でした、、、
いまどき 960グリッドでもあるまいし。
(昔のサイトは幅 960 ピクセルを 5列とか 6列とかに割ってデザインしてた。
例えば、↓ の Yahoo は 5列デザイン)

style.css の ↓ の部分を 1200ピクセルに変更すると無事サイト全体の幅が広がって良いカンジになりました。

/* Layout */
.wrap {
max-width: 1200px;
padding-left: 3em;
padding-right: 3em;
}

Primary と Secondary の割合変更しなくて良かった、、、orz..

2018/5/9 追記:メインコンテンツ+サイドバーの幅割合変更機能せず、、

その後、1年程この設定で使ってきましたが、メディア幅設定のカスタマイズ等する中で改めてメインコンテンツ幅、サイドバーの幅、その割合・バランスなどを考えました。
で、メインコンテンツ幅はこれで充分・ちょうど良いと満足でしたが、「サイドバーの幅が少し広過ぎるかなぁ」と感じました。
サイト全体の幅も現在の 1200px がちょうど良いので、メインコンテンツ幅とサイドバーの幅の割合を変更してみることにしました。
おおむね上記の割合で変更しました。

  • メインコンテンツ 64%
  • サイドバー    30%
  • 間の余白      6%

その結果、メインコンテンツ幅はちょっと広いかなぁと思いましたが、サイドバーがギュッと適切な幅に収まって良い感じに。

「こりゃイイや」

とご満悦だったのですが、念のため iPhone でチェックすると、、、、

なんと、スマートフォンなのに 2カラム。。。。。
せっかくの Twenty Seventeen のレスポンシブなデザインが。。

、、

こりゃダメだ と慌てて元に戻しました。

恐らく、Twenty Seventeen の場合も「表示幅が●●px 未満の場合にはサイドバーを下に回り込ませ 1カラムにする」的な記述があると思われますが、追加CSS に記述する方式だとそのレスポンシブ記述の後に追加されて優先されてしまうものと思われます。
このような場合にやはりカスタマイザーの追加 CSS に記述する方式よりも子テーマを利用する方法に分があるようです。

* 以上、2018/5/9 追記

その他 Twenty Fourteen と共通のカスタマイズ

フォントファミリーのカスタマイズ等不要になりましたが引続き次の手当は行いました。

その他のカスタマイズ

Jet Pack やその他プラグインの進化

Twenty Seventeen 関係なくその後の WordPress 界隈も進化を続けていますので、今回のテーマの変更に併せて次のようなカスタマイズも行いました。

AGO Font Awesome Icons

グローバルナビゲーションメニューに Font Awesome Icons を使ってみました。

文字だけじゃなくてアイコンも一緒に表示されるのでクールですね。

マイルストーン

Jet Pack にこんなウィジェットも追加されていたので入れてみました。

僕の場合で言うとライブの予定とかある時にその日付で設定してカウントダウンさせるとかクールですね。

ギャラリー

 

あと昔から良くブログパーツで見かけるギャラリー。
今更ですが設置してみました。

僕はモザイクタイルにしましたが他に、

・正方形タイル
・スライドショー

等々選べますのでスペース等に合った設置が可能です。

なお、このギャラリー内の写真をクリックすると Light Box 的に写真が表示されます。

クール (・∀・)!!

他にもその後色々クールな進化を遂げたウィジェットやプラグインが増えているようですのでこの辺もチェックしてみたいところです。

 

 

 

 

 

まとめ

という訳でずっと Twenty Fourteen を使って来ましたが、あまりのクールさに Twenty Seventeen にシフトしました。
Twenty Fourteen の時には Fourteen Extended や Fourteen Colors のような便利なプラグインも出てきましたが、Seventeen では今のところそれはないようです。こういう便利プラグインが出てきたらカスタマイズが更に楽しくなりますね。


【バンド:流 / Ryu】NY Song 絶賛発売中♬ 試聴も出来ます。

iTunes: http://bit.ly/1b7OEiD  ブラウザで見る http://goo.gl/NIfXf4 NY Song アルバムジャケット

僕のソロも試聴・ご購入いただけます (・∀・)!! 是非、お聴き下さい! Free Trial Listening of My Tunes 😀

スクリーンショット 2013-06-08 21.54.36 1曲 ¥150 です / $ 1.29 each

各種 SNS アカウントでコメントできます