【CHANGE!! 第2弾】HTML5 とかレスポンシブデザインとか…WordPress のテーマ自作始めました

thikasa

Category: ブログ / Tag: ,

WordPressLogo01
photo credit: dawvon via photopin cc

先日変更した私のアイコン。

この中で、「この 11 月は CHANGE!! をテーマに」とか言っておきながら、その次がなかなか続かなかったですが。
裏ではいろいろやっていました。

【CHANGE!! 第2弾】は、このブログの WordPress テーマの自作です。
まだまだ未完成なのですが…ひとまず放出!


今まで使っていた iTheme2

今まで使っていたのはこちらのテーマ。

見やすいしそれっぽいしレスポンシブだし…とても気に入っていたのですが、最近いろいろと気になり始めました。

使ってる人を結構見かける

これは最近というわけではなくて、使い始めた当初からそう思っていました。
あ、この人も iTheme2 だ。みたいな。
見た目イイ感じですしね。
でもまぁ気に入っているからいいかなーって思うようにしてました。

でも最近になって、やっぱり他の人とは違うのがいいなと思うようになってきたのです。

HTML5 ではない

最近になって、HTML5 が気になり始めました。(理由はこの後書きます)
でも iTheme2 は XHTML で書かれています。

どうしようかなぁと思いつつも、この点も気になり始めました。

HTML5 が気になり始めた理由

きっかけはこれ。

それまであまり HTML のタグの持つ意味について考えたことがなかったのですが、これをきっかけにいろいろと勉強するようになりました。

またそこから HTML5 にも興味を持つようになって、あかめさん(@mk_mizuho)にいろいろ教えてもらったりしました。
(激感謝!)

HTML5 と言うと、canvas を使ったグリグリ動くような派手なものがフィーチャーされがちでそれも大きな特徴のひとつではあるんですが、もうひとつ、セマンティック Web の定義というのも HTML5 の大きな特徴です。

HTML はもともと文書構造を定義するためのものですが、それをさらに押し進めて、より文書の構造に意味を持たせることができます。

これって、SEO 的に良いと思うんですね。
実際、こんな動きもあります。

なので、新しい WordPress のテーマは HTML5 で!
と強く思うようになりました。

レスポンシブデザイン

これまた最近急に注目されてる気がするレスポンシブデザイン。

CSS3 のメディアクエリーを使って、表示領域の大きさによって style(見た目)を変える方法です。

私のブログのアクセス解析を見ると、実に半分の方が iPhone から見ているようです。
なので新しいテーマにするなら、レスポンシブデザインにしたい!

iPhone 用に別のテーマをあてることも考えたのですが…複数のテーマを変更管理するのはちと面倒だなぁ(汗)と思い、レスポンシブデザインに対応することにしました。
それに、純粋にレスポンシブデザインについて勉強したかったこともあります。

選んだテーマは Constellation

おいぃぃぃぃテーマ自作するんじゃなかったのか!?

というツッコミもありそうですが…はい、すみません。既存のテーマに頼りました(汗
もちろんカスタマイズ前提ですよ!
フルスクラッチはまた次の機会に…。

さて。
テーマ選定は HTML5/レスポンシブデザインに対応していること、で探したのですが、これがなかなかいろいろあって、決定するのに時間がかかってしまいました。

途中脇道に逸れ、iTheme2 を HTML5 化するのもアリかも…とか思ってそっちを真剣に考えたりもしましたが、思い直してテーマの選定をすることに。

最終的に選んだのはこちら。
Constellation。

特徴は、とにかくシンプル!
中を見てもらえるとわかる(人にはわかる)と思うのですが、「テーマの編集」を選択すると、

Constellation

これだけしかファイルが無い。
これたぶん WordPress の最小構成。そのくらいシンプル。
そして中のコードもとてもシンプル。
それだけに、WordPress の構造がよくわかるし、ここからのカスタマイズもしがいがあります。

しかしシンプルとはいえ、HTML5 として綺麗に構造定義されてるし、メディアクエリー含む style の定義もしっかりとしてあります。

なのでこれを選びました。
まさに俺色に染めてやるぜ的な、テーマのカスタマイズにピッタリなテーマです。
ここから始めるのは…それはもう自作と言ってもいいくらいだと…思うなー…。

とりあえず最低限のことをまずはやった

基本的な見た目は、デフォルトの状態からほとんど変わっていません。
現在追加変更したのは、

  • フォントの変更
  • ソーシャルボタンの追加(プラグイン無し)
  • Google Adsense の追加(プラグイン無し)
  • 表示幅の変更(PC/iPhone 共)
  • 以前定義していた class(CSS)をコピー・変更
  • 新しい class の定義
  • site description の追加
  • タイトルロゴの変更(Google Web フォント)
  • 「続きを読む」のリンクからアンカーを外す

くらいです。
とにかく今は見た目が激しくもっさいですが…これはぼちぼちと変更していきます。

デザインセンスの無さよ…

しかしそれにしても、私のデザインセンスの無さよ。
どうにもしっくりくるデザインを思いつかないでいます。
今はなんかテキトーにやっちゃってる感じ(汗

あとはもう…いろんなブログを参考にしつつパクインスパイアされようと思います。

これからもよろしくお願いします

ということで…。
しばらくのあいだ、ブログのデザインがちょっと見にくいと思いますが、ご容赦いただければ嬉しいです。
少しずつブラッシュアップしていきます。

これからもよろしくお願いします。m(_ _)m

RSS 登録

もしこのブログを気に入っていただけたのなら、RSS 登録をお願いします。
最新情報をお届けします。

follow us in feedly