IMG 0131

こんにちは。しゅんぼー(@shun_kashiwa)です。

ブログはWordPressを使っているのですが、そのテーマを3日間で作ってしまいました。
今回は、そのためにやったことを、具体的にご紹介していきます。

みなさんがWordPressのテーマを作るときの参考にしてみてください。誰にでも出来ると思います!


テーマ作成前の僕のスペック

  • HTML→まあ分かる。
  • CSS→まあ分かる
  • JavaScript(jQuery)→そこそこ分かる
  • PHP→無知

こんなところです。HTML,CSS,JavaScriptは2年位前からボチボチ勉強してます。

3日間という短期間で出来たのも、この知識がかなり役立ってます。

作り方の勉強

2冊ほど本を買いました。プログラミングの勉強ですからね。

IMG 0133

一冊目はこちら。「WordPressデザインブック」

WordPressの関数なんかの解説がちゃんと乗ってて、WordPressの仕組みとPHPに無知な僕には必須な一冊でした。

Amazon.co.jp: WordPressデザインブック3.x対応: エビスコム: 本

IMG 0135

もう一冊は「よくわかるPHPの教科書」です。

WordPressもPHPで動いてますし、その勉強もしようと思っています。

Amazon.co.jp: よくわかるPHPの教科書: たにぐち まこと: 本

あとは、すべてGoogle先生に聞きました。
本に載っていないけどやりたいことなんてたくさんあります。Googleで検索すればほとんど出てきました。

下準備:デザインを大雑把に考える

僕のやり方ですが、スケッチなどはしていません。

お風呂に浸かりながら、

  • カラムはいくつ作るのか
  • どんな色を使うのか
  • 大まかな装飾の構成
この3つを考えるだけです。僕の場合は
  • 2カラム(右)
  • グレー+オレンジ,緑
  • 吹き出しのようなデザイン
これくらいのことは考えていました。
また、レスポンシブデザインを採用することもここで決めていました。

一日目:装飾は無視してページ構成を作る

一日目。装飾はガン無視し、

  • 各パーツの大きさ
  • その表示の中身(記事,ページetc)
  • その配置
  • 文字のサイズ

主にこの3つを作りました。なお、PCでの表示だけです。

大きさ、配置などはCSSなので慣れていましたが、何かを表示させるためにはWordPressの関数を使わなければいけません。
僕にとっては一番多くのことを学ぶ必要がったわけです。

基本的には本を参考にしましたが、以下のページも参考にしました。

テーマの作成 – WordPress Codex 日本語版

具体的には、

  • 核となるPHPの作成
  • floatやinline-blockを使った段組の作成
  • width,height等で微調整

を行いました。

IMG 0136

こんな感じ。若干装飾もしてますね。

2日目:装飾していく

1日目の時点でかなりブログっぽくなります。これを装飾するのが2日目です。

Iskydblog 0026 02 07 23 06 51

borderの色、角を丸く、hoverの動作、transitionなどですね。CSSで書いていきます。
僕は、ここでJavaScriptも一緒に使いました。

脱エンジニアっぽさ! クライアントの笑顔を引き出すCSS3アニメーション(1):CSS3アニメーションの基本 (1/3) – @IT
CSSのアニメーションに関しては、この記事が参考になると思います。非常に分かりやすいです。
また、ロゴをつくったのも2日目です。 

こんな感じで、PCのテーマはほぼ完成させました。

3日目:レスポンシブ化&最終調整

今まではPCでの表示を考えてきましたが、ここでレスポンシブ化を行いますl

レスポンシブWebデザインの作り方(簡単設定方法) | フリーランスWebデザイナーの仕事
こんな記事も参考にしました。

僕の場合ですが

  • タブレットはサイドバーを下に
  • スマホはサイドバーを下に+記事表示を1列に

これをメディアクエリーで設定しました。

3日間の作業時間

これを2/1~2/3にやっていたのですが、ものすごい時間をこれに費やしました。

一日に最低でも6時間。3日間で20時間は確実に使いました。

ディスプレイを長く見て、デザインを考えるのは楽ではないですが、個人的にはとても楽しく、あっという間に3日間が過ぎてしまいました。

さいごに

僕がテーマを自作した理由は「テーマを理解し、WordPressも理解したい」からです。
実際、このテーマを作ったことで自分の知識はかなり幅が広がりました。

3日間で出来たのには、様々な理由があり、普通はもっと時間が必要だと思います。

しかし、興味のある人は一回やっておくべきだとも思いました。中学生にできるんですから、誰だって出来るはずです!

この記事が、WordPressテーマ作成に役立てば幸いです。しゅんぼー(@shun_kashiwa)でした。