2015年迎春は WordPress 4.1 標準テーマ Twenty Fifteen のカスタマイズにて明けまして

  • このエントリーをはてなブックマークに追加
  • LINEで送る

明けましておめでとうございます。2015年初投稿です。

大晦日は大晦日らしく(?)子どもらとドンじゃらしながら紅白歌合戦を視ました。みておかないと落ち着かないと感じるテレビ番組は紅白歌合戦くらいです。

ものすごく気になったのは、

審査員にIPS細胞の山中先生が居られたのをみてSTAP細胞の人が座ってる絵をイメージしたところから始まり、なんとか48のメンバーは全員マイクを持っているがマイクチャンネル数すごいな!?とか、トリで松田聖子が「ためすぎて」歌うのとかを。

で、「ゆくとしくるとし」へとなり年が明ける瞬間には WordPress 4.1 標準テーマの Twenty Fifteen をカスタマイズしておりました。

WordPress 4.1 テーマ Twenty Fifteen とは?

ブログを WordPress で作ったさいに最初にインストールされているテーマです。ここでテーマとは WordPress でのレイアウトや機能がパッケージになっているものでしたね。

昨秋あたりにベータ版が発表されてちらっと見てはいましたが、正式リリース後ようやくチェックする時間がとれました。

Twenty Fifteen のデモページはこちら。
http://twentyfifteendemo.wordpress.com/

800px-Responsive_Twenty_Fifteen

ちょっと見てみるつもりが使ってみたくなり、気になるところをカスタマイズし始めたので紹介します。

なぜ WordPress Twenty Fifteen が気になったのか?

カスタマイズといっても現在施したのは

  • 使用フォントの変更
  • 本文 font-size 調整
  • 投稿タイトル font-size 調整
  • 本文スペースの拡張
  • サイトタイトルへの装飾

くらい。

私、CSS作業でやったことのエントリとか苦手なのでそれはまたカキコの練習がてら書いてみます。このエントリーでは「なぜ TwentyFifteen が気になったのか」について語っちゃいますね。

TwentyFifteen 使って新しいサイト立ち上げようとお考えの方、TwentyFifteen に何となく可能性を感じるという方向けです。作業のレビューは追って。

TwentyFifteen が気になった理由その1〜白いから〜

わたくし、以前から自分の管理するWEBサイトは「白」と決めていました。

モデム回線から始まり ADSL などでインターネットに繋がり始めた頃、頻繁に Apple のサイトを見ていたからかも知れません(笑)。

自分でサイト作って運営する際はカラーリングの知識やセンスがめんどくさそうだし。基本は白・黒・グレーでシンプルイズベスト。

そもそも中身の盛り込みに労力を使いましょうというのがコンテンツファーストの呼びかけであるところ、色づかいで効果が変わるようなコンテンツを持ち合わせてございません(笑)。

テキストベースかつ紙ベースで、ときたま朱色を扱うくらいw

もっとも TwentyFiftee ではカラーリングもちゃっちゃと出来ますよと謳われていますので見ておきましょう。カスタマイザーですぐに選べるのは全6色。

750px-Twenty_Fifteen_Colors

提案の色づかいがビビッドにすぎる気もしますが、マージンをたっぷりと大胆に取った「コンテンツファースト」なデザインが、かえってカラーリングで魅せていく方向にも効果的に働くのかも知れませんね。

そうそう。「和」な感じにしたり、背景画像を使ってマットな質感を出してみるのも良さそう。って私はホワイトで精一杯な人でしたw

TwentyFifteen が気になった理由その2〜レスポンシブだから〜

WordPress 標準テーマであれば今どき当然なのでしょうがレスポンシブデザイン。STINGER5 も STINGER3までは非レスポンシブでしたね。

と言ってみたところでレスポンシブデザインの定義について幅がありそうなのに気づいたので一応確認してみますと、スタイルシートのファイル中で、閲覧を想定するデバイスごとの書き方(メディアクエリ)になっているものが厳密な意味での「レスポンシブ対応」。

他方で、スマホからのアクセスの際に別のスタイルシートを読ませる設定でも「PCとスマホの両方でキレイに表示される」を実現できますがこれは非レスポンシブというべきもの。

あらゆる端末をもっていて自作サイトの見栄えをニヤニヤしながら確認してる人はあまりいません。私もそうですが PC とスマホで見るくらい。

読者としてなら崩れて読みにくいサイトはスルーですが、書いて発信するとなると自分の端末で見えたからオケ!では済まなくなります。

ネット上には様々なサイズの端末からアクセスがあり、それへの対応が必要というわけですよね。

とりわけ私は同業者のウェブサイトのほとんどがスマートフォン対応していないのを嘆きまくっているのです。

しかし、想定する端末ごとに読み込みファイルを別個に用意していたら大変なことになります。コーディングのフローを想像しただけで失神しそうです(この作業が本業じゃない!)。

この点、先日のエントリー「使用テーマを Gush2 から STINGER5 に変更しました」で Gush2 のタブレット表示の調整に手間取った話を書きましたが、その際 STINGER5 が非常にわかりやすく対応させてるのも実感できました。

その流れもあり TwentyFifteen はどんな書きぶりになっているのか?かなり気になったわけです。

「スマートフォン対応」とか「モバイルファースト」とは、単にスタイルシートの書き方のみならず、ウェブサイトの役割が「見るために置く」から「使うために創る」に発展してきている流れも指しています。そのあたりのことはいつもこれを座右に置いて読んでいます。

「2015年」を冠して WordPress に標準搭載されたテーマ TwentyFifteen には、WEB制作の潮流やワークフローの発展も盛り込まれているはずです。いやいや、その集大成として発表されてるから注目があつまるわけですよ。

TwentyFifteen のメディアクエリ

さてその TwentyFifteen レスポンシブ対応(=メディアクエリ)ですが、スタイルシートを見てみると私にはわりと複雑に感じます(汗)。

これでも昨年の標準テーマ TwentyForteen よりは対応端末数(ブレイクポイント)が減っているようですが、カスタマイズに着手してみると修正箇所が多く、細かくメモ取りながらの作業になりました。

ひさびさにこちらのノートを登場させたら大活躍してくれました。

小○方さんみたく研究ラボの人でなくても(これ使ってたのか?)、ブログ運営してたら手書きノートやらメモ帳いりますねw

TwentyFifteen が気になった理由その3〜え?ヘッダーがない?〜

twentyfifteen-small

これをぱっと見でお分かりのように TwentyFifteen にはヘッダーがありません。

最初に見たときは左サイドバーというだけで動かしてもみずに違和感を覚えました。ブログを右サイドバーで使っていることもあり、本文読んでもらうのに邪魔なはずと思ったのでしょう。

しかし先入観でした。よくよく見て実際に幾つか投稿してみると、ここまでスカスカにマージン取ったデザインだと気にならないです。むしろ左サイドバーと本文との視線を引き離すかのように配置されたマージンがここでも活きていますよね。

ヘッダーもこのまま現れない仕様で(笑)、これってある意味1カラムに近いんじゃないか?と発見。

そう。ここ最近はEllora さんがブログ Betzで1カラムに挑戦したり、コンテンツに集中していただきましょうな作り方をしてるサイトと書いてる中の人がちょくちょく気になっておりました。

サイトはワンカラムでいい!と強調してそうしてしまった人も。
ブログをリニューアルしたので、デザイン感などをお話してみたいと思います。

ここらへんもいわゆるコンテンツファーストで、従来までやってきたことを割り切ってやめていく流れを感じます。

そしてこのブログも STINGER5 でワンカラムにカスタマイズか?

まとめ

WordPress 4.1 標準テーマの TwentyFifteen についてどこに注目したかを書いて見ました。

そういえばカスタマイズを実施したサイトを紹介しませんでしたが、本業のサイトに実装したので知ってる方は見にいってくださいませ。

それにしても中森明菜さんはどうしてニューヨークからだったのかも不思議で(謎)、午前3時すぎまでカスタマってました。

  • このエントリーをはてなブックマークに追加
  • LINEで送る
 

SNSでもご購読できます。