中学生が3日間でWordPressのテーマを作った方法2014年2月7日こんにちは。んぼー(@shun_kashiwa)です。ブログはWordPressを使っているのですが、そのテーマを3日間で作ってしまいました。今回は、そのためにやったことを、具体的にご紹介していきます。みなさんがWordPressのテーマを作るときの参考にしてみてください。誰にでも出来ると思います!テーマ作成前の僕のスペックHTML→まあ分かる。CSS→まあ分かるJavaScript(jQuery)→そこそこ分かるPHP→無知こんなところです。HTML,CSS,JavaScriptは2年位前からボチボチ勉強してます。3日間という短期間で出来たのも、この知識がかなり役立ってます。作り方の勉強2冊ほど本を買いました。プログラミングの勉強ですからね。「WordPressデザインブック」WordPressの関数なんかの解説がちゃんと乗ってて、WordPressの仕組みとPHPに無知な僕には必須な一冊でした。本もう一冊は「よくわかるPHPの教科書」です。WordPressもPHPで動いてますし、その勉強もしようと思っています。本あとは、すべてGoogle先生に聞きました。本に載っていないけどやりたいことなんてたくさんあります。Googleで検索すればほとんど出てきました。下準備:デザインを大雑把に考える僕のやり方ですが、スケッチなどはしていません。お風呂に浸かりながら、カラムはいくつ作るのかどんな色を使うのか大まかな装飾の構成この3つを考えるだけです。吹き出しのようなデザインこれくらいのことは考えていました。レスポンシブデザインを採用することもここで決めていました。一日目:装飾は無視してページ構成を作る一日目。文字のサイズ主にこの3つを作りました。PCでの表示だけです。大きさ、配置などはCSSなので慣れていましたが、何かを表示させるためにはWordPressの関数を使わなければいけません。僕にとっては一番多くのことを学ぶ必要がったわけです。基本的には本を参考にしましたが、以下のページも参考にしました。核となるPHPの作成floatやinline-blockを使った段組の作成width,height等で微調整を行いました。若干装飾もしてますね。2日目:装飾していく1日目の時点でかなりブログっぽくなります。これを装飾するのが2日目です。borderの色、角を丸く、hoverの動作、transitionなどですね。CSSで書いていきます。僕は、ここでJavaScriptも一緒に使いました。@ITCSSのアニメーションに関しては、この記事が参考になると思います。非常に分かりやすいです。ロゴをつくったのも2日目です。こんな感じで、PCのテーマはほぼ完成させました。フリーランスWebデザイナーの仕事こんな記事も参考にしました。僕の場合ですがタブレットはサイドバーを下にスマホはサイドバーを下に+記事表示を1列にこれをメディアクエリーで設定しました。3日間の作業時間これを2/1~2/3にやっていたのですが、ものすごい時間をこれに費やしました。一日に最低でも6時間。3日間で20時間は確実に使いました。ディスプレイを長く見て、デザインを考えるのは楽ではないですが、個人的にはとても楽しく、あっという間に3日間が過ぎてしまいました。さいごに僕がテーマを自作した理由は「テーマを理解し、WordPressも理解したい」からです。実際、このテーマを作ったことで自分の知識はかなり幅が広がりました。3日間で出来たのには、様々な理由があり、普通はもっと時間が必要だと思います。興味のある人は一回やっておくべきだとも思いました。中学生にできるんですから、誰だって出来るはずです!この記事が、WordPressテーマ作成に役立てば幸いです。んぼー(@shun_kashiwa)でした。