当ブログのサイトデザインを一新しました。実はWordPressテンプレートを作るのは初めてではなかったのですが、それでも難しいところも多々ありましたので、決して楽ではありませんでしたがなんとか完成までに漕ぎ着けることが出来ました。

ある程度凝ったデザインのテーマを作るにはPHP(プログラム言語)の処理が大変で一筋縄ではいきません。

そしてレスポンシブデザインを取り入れることでワンソースで全てのデバイスに対応できるよう、考慮してあります。

しかし、レスポンシブデザインにはデメリットもあるので、その辺のことも説明したいと思います。

テーマが完成するまでの格闘

以前、テーマを作ることに対しての記事を書きましたが、あれからまだ二週間なのですね。流石にまさか二週間で完成できるとは思っていませんでした。

ブログはオリジナルテーマにするべき？WordPressのテーマ作成に必要な知識と個人的意見

このときにはまだテーマの作り方の勉強をしていました。正直この時点でも簡単なものなら一日で作ることも可能だったのですが、今回はある程度ずっと使うものを目指していたのでかなり凝ったデザインを構想していました。

実はあまりPHPの知識がなく、乏しかったので勉強しながら制作という感じでした。

まずは大事なのはルールを決めること。ある程度制約を設けて制作しないと迷宮入りをしてしまう可能性があるので。

  • PC表示ではサイト幅を広く見せたい
  • 縦幅が狭くスッキリ見えるビッグバナーが貼れるようにしたい
  • タイポグラフィーで個性を出す
  • ミニマムな印象を与えるデザイン
  • 記事が読みやすいように余白を多めにとる
  • レスポンシブデザインを採用する

はじめはPCとスマホで個別につくろうと思っていましたが、今回はあまり時間をとりたくなかったですし、レスポンシブでも戦えそうだと思ったのでレスポンシブを採用しました。

何故レスポンシブデザインを採用したのかについては後で説明します。

採用した技術やポイント

Twitter Bootstrapの採用

やはりレスポンシブデザインを制作するにおいて、CSSフレームワークを使うのは最善の選択でした。Twitter Bootstrapというものはその代表格なのですが採用は初めてだったので、まずは使い方をドットインストールにて学びました。

それまではCSSフレームワーク？？便利だけどなんか「つまらないサイト」になりそうだったので採用しようとは思っていませんでしたが、使い方を一から学んだことによって便利だということを理解出来ました。

HTML5

HTML5。これはもう基本ですね。ウェブサイトをつくるのであれば最新の技術を採用するのは当たり前のことですし、Bootstrapを使うならHTML5しか選択肢もないです。HTML5を採用するのは非常にメリットがあります。まず、h1がたくさん使える点、マークアップにおいてheader、footer、article、aside、sectionなどわかりやすく配置できる点。

Bootstrapのテンプレートを使う

Bootstrapは標準でウェブサイトに必要なパーツやデバイスに合わせた表示ができるようになっています。使う、使わないは自由に選択できるのでかなり便利です。実際に使えるところは利用しています。

紹介しますと、ヘッダー下のパンくずリストや画像の枠、記事下の前・後のページのホバーエフェクトなどなど。

特に前・後のページのホバーエフェクトはPHPでの処理が一番複雑でめんどくさかった部分です。矢印をマウスかタッチすると今読んだページの前後タイトルが表示されるようになっています。

CSS3やアイコンフォントを使い、軽量化・Retinaディスプレイを意識する

視覚的にひと目でなんの情報(リンクなど)なのかを伝えるためにアイコンフォント(Font-Awesome)を使っています。このアイコンフォントは外部から読み込めるのでかなりデータが軽量です。しかも種類が豊富なので、タイム、カテゴリ、タグや矢印など大体対応出来ました。

しかしながらソーシャルリンクの中のfeedlyアイコンに関しては無かったので公式のアイコンを使いました。

あと意識したのは画像を極力使わないことです。画像を使ったウェブデザインは好きなのですが、いかんせんグラフィックデザインに弱いのでかっこよく作れるとは思いませんでしたし、データ量やRetinaディスプレイを意識するとあまりよろしくないと思ったので画像は使ってません。とにかくCSS(3)やフォント、アイコンフォントはRetinaディスプレイに対応できるのでこれからはマストで使っていったほうがいいですね。特に意識してIEや古いブラウザへの対応はしていません。(〜webkitぐらい)

何故レスポンシブデザインを採用したのか

レスポンシブデザインを採用するにあたり、問題に思った点はいくつかありました。ブログというものは意外とレスポンシブデザインにするか否か迷うものです。

多様化するデバイスに対応するにはレスポンシブデザインが一番楽です。しかし構成上、自由度が減ってしまいますし、色々な制約が出てきてしまうのも事実です。

その上で色々紹介します。

バナーサイズ問題とサイトの幅に関して

ブログを運営するにはある程度のコストが掛かりますので、最低限バナーかなにかでそれをカバーしなければいけません。

特に配置などもろもろは意識しました。邪魔に見せたくなかったので・・やはりそこは一番大事です。

まずビッグバナーを貼るということは決めていました。貼るといってもPCやタブレットオンリーですが。ビッグバナーはサイズのわりに縦幅が狭いので個人的に一番邪魔にならないバナーサイズだと思います。

728×90という幅を誇るビッグバナーを貼るには広いスペースが必要です。そこで問題になってくるのはサイトの全体幅を何pxにするかということですが、そこはある程度広めにとれば大丈夫だということはわかりました。

固定表示ではタブレットで縮小される件

iPad Air 3

また話が戻りますが、サイト幅を決める上で一番の敵はiPadです。iPadの横幅は1024px、縦幅は768pxです。まずはここを意識すると、サイト幅が1024px以内に収めるということになります。

しかしビッグバナーを貼る構成にするのであれば、なかなか話が難しくなってきます。最近ブロガーの中でビッグバナーを貼るというのが流行っていますが、かなりの確率で固定レイアウトを採用しています。実は固定レイアウトで1024px以上で制作したとしてもviewportの設定で縮小表示させることが可能なのでiPadでもはみ出ることなく表示できます。そうするとビッグバナーを表示したままにできるので実に利に適った考え方です。

でも個人的にはデメリットもあると考えます。ビッグバナーをはめ込みたいが為に幅を広げた結果、余白が狭くなり、なにやら窮屈でダサいデザインになりがちだということ。やはり文字を快適に読んでもらいたいので”なし”だなと。

もうひとつは全体的に縮小した見え方になってしまうので倍率が「1」にならず、なんか縮小されて結局ビッグバナーも小さく見えるので意味がないんじゃないかということ。

しかも、iPadはよしとしても固定レイアウトではそれ以外の多くのタブレットで見たときにどう表示されるのかがマジで心配になったので迷いましたが、結局レスポンシブの方がメリットが大きいと判断したので採用したという結論です。

もちろん、iPadの横表示ではビッグバナーは表示できません。そこで、Adsenseのバナーをレスポンシブユニットにすることでレスポンシブデザインに対応させました。

バナーを貼らない！ということはできませんが、せめて読者の方が快適に見れるような、見たい！と思えるようなUIになることを意識しました。

テーマを自作するために必要だった書籍

基礎からのWordPress　改訂版 (BASIC LESSON For Web Engineers)

この一冊で大抵のことは理解できると思います。色々な本を読みましたが、この本だけで十分だと思います。

特に『Simple Simple』というサンプルテーマが秀逸なので参考になること間違いなしです。WordPressで必要なPHPの簡単な処理の仕方も学べるのもおすすめなポイント。

WordPressユーザーのためのPHP入門 はじめから、ていねいに。

PHPの教科書は沢山出版されているけど、でもWordPressで必要な最低限のPHPの知識ってなんぞや？というテーマの書籍です。

PHPでアプリケーションを作るわけでもなければ、そこまで難しい本は読みたくない。そんなPHPだけがわからない方におすすめです。

でも正直言って、本だけで思った通りに完璧に制作することは難しいと思います。壁にぶつかったらその都度ググりましょう。

まとめ

今回は結局マニアックな話になってしまいましたが、とにかく快適に読んでもらえるようなテーマを作ったつもりです。当ブログはニッチなキーワードを含んだ記事が多いのでどうしても文字数が多くなりがちですし、読みやすいように意識して制作してみました。

まだまだ思いつきで変えていく可能性もありますが、その度に紹介していければと思います。知ってもらいたいことも多いですしね。