YOUNG FLAVORのブログデザインを少し変えて見ました

公開日 : 最終更新日 :

カテゴリー :

ほぼ1年ぶりブログのデザインを変更してみました。レイアウトやカラーリングみたいなものはあまり変更を加えず、ウィジェットを自作したりプラグインをすこしかえてみたりしました。またビルドツールのgulp.js、パッケージマネージャーのbower、前のテーマでも使っていたSassのver3.3で開発したかったのでテーマを改修しました。今回のテーマ改修は、どんな感じで開発したのかを紹介します。

前のテーマから変更したところ

前のテーマから変更したところはざっとこんな感じです。

  • 背景を少し濃くした
  • ブロックで囲っていたボーダーをなくした
  • ヘッダーをサイトロゴのみにしてシンプル化
  • 各種SNSのリンクを表示するブロックウィジェットを追加した
  • style.cssにサイト全部を書くのをやめてページごとにCSSを作った
  • 3カラム化してたテーマを無理やり2カラム化してたので最初から2カラムで設計
  • パンくず・ページャをちょっと変更
  • Compassを使うのをやめた

この中で大きな変更になったのは、ウィジェットを作ったのとCSSをページごとに変えたことかなと思います。

ウィジェットの自作

ウィジェットの作成自体は、前のテーマでも新着とカテゴリーのタブリストでもやっていました。今回のテーマでは、前回作ったタブリストの他に、SNSウィジェットを追加で作って、表示出来るようにしています。今表示しているのは、Facebook・Twitter・Google+・RSSの4つですが、このほかにもGithubとFeedlyにも対応しています。

ページごとのCSS

ページごとのCSSを分けたのは単純に軽量化対策です。いままでは、WordPressのテーマ作成の作法にならってstyle.cssに書いていたのですが、ページごとに必要なスタイルとそうでないスタイルとあるのでいっそのことわけちゃったほうがいいなと思いページごとに分けることにしました。今回のテーマからstyle.cssには、テーマコメントのみ書いてページでロードしないようにし、ページごとに作ったCSSのみをロードするようにしています。

CSSを分割したおかげでstyle.cssでロードしてたころより半分から3分の1くらいにまでファイルサイズが減らせました。ページごとにCSSを作るとなるとだいぶ面倒ではあるのですが、下記に紹介するビルドツールを使えば設計次第でそんなに苦になるようなことはないです。

ビルドツールは使うといいよ!

昨今のフロントエンドのスタイル開発で欠かせないのが、SassやLessやStylusといったCSSプリプロセッサ言語です。このブログでもWordPressに以降し始めるときにつかったLESSから始まり前のテーマからはSASSを使って開発しています。CSSプリプロセッサ言語はそのままではブラウザで使えないのでビルドツールでCSSに変換する必要があります。実はビルドツール自体はGruntを今までつかっていたのですが、最近もっぱら使われているgulp.jsにビルドツールを変更しました。

gulp.jsについて

gulp.js

gulp.js(以下 gulp)は、node.jsで動くビルドツールでGruntの亜種みたいな比較的新しいビルドツールです。今回テーマを作成した動機が、gulpを使いたくてテーマ改修してんでして、Gruntとくらべてgulpがどんな違いがあるのか試してみたくてテーマを改修しました。

実際に使ってみて思ったのがタスク定義がGruntみたいにJSONで長くならずコードが見やすかったのと、使いたいプラグインがGruntとほぼ変わりないのにびっくりしました。node.jsのストリームベースでビルドもそれなりに速いのでこれからのフロントエンド開発だとGruntよりもgulpだとマジで思います。

パッケージマネージャ Bower

Bowerのサイトトップ

最近のフロントエンド開発ではパッケージマネージャを使うのが主流みたいです。パッケージマネージャは、MacでいうところのHomebrew・Mac Ports、PHPでいうところのComposerやPEAR、RubyでいうところのRubygem、node.jsでいうところのnpmみたいなライブラリを一括で管理できるシステムをいいます。

その一種であるBowerは、フロントエンドでつかうようなJSやCSS(Sass、Less)などのライブラリを管理するパッケージマネージャです。Bowerではnode.jsで動いていてBowerに登録されているライブラリをまとめて管理できます。今回のテーマ開発では、normalize.scssPantonerというSassのライブラリつかっています。

Compassをつかってたけどやめた

前のテーマはCompassも使っていたのですが、今回のテーマ改修では、Sass 3.3をベースに開発していてCompassのSASS 3.3対応バージョンのリリースがないのと前のテーマでもvertical rhythmしかつかってなかったのでRc1のvertical rhythmだけ抜き出してCompassを使うのをやめCompassでSassをビルドせずにgulpでビルドするようにしました。

今後のWordPressテーマ開発について

とりあえず今回のテーマ改修では、ツールを使うことが一番の目的でした。その中でやりたいことはだいたい出来たので満足しています。ただ、次に開発するとなるとウィンドウサイズによるレスポンシブデザインをやめることかもしれません。

現在のテーマは、ほぼ同じ情報がスマホ・PCそれぞれで表示できるようにしています。ただ正直にいってブログの形では、スマホとPCで必要な形が違う気がするのでデザインの整理をして見せ方を変えないといけないかなと思っています。

スマホの1カラムで必要な情報を入れるとPCの見せ方が難しくなりますし、PCの2カラムをスマホで見せるとなるとちょっと情報過多な感じになりがちだなとつくづく思いました。

なので今後テーマ改修をやりたい熱が出てきたら、レスポンシブデザインをやめてユーザーエージェントで見せ方を大胆に変更する方向でやろうかなと思っています。

今後ともよろしくお願いします

前回の更新からほぼ3ヶ月ちかくたちますが、その間の開いた時間にテーマの改造をしていました。そのせいか、いろいろと書きたいことがあったのにかけずにすいません。とくにChromebookの日本発売とかiPhone 6の発表とかありましたね。そのなかでChromebookのAndroidアプリ対応がおもしろそうなので今後の記事にします。

開発に使ったツール

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>