初めてwordpressのテーマを作成して、ブログをリニューアルしました

約一週間かけて、ブログのテーマを新しく作成しました。ここ一年はほとんどブログを更新していなく、これではいけないと感じていましたが、ようやく踏ん切りをつけて取り組みました。HTML,CSSを触るのも久しぶりで苦労しましたがなんとかできあがりました。まずは形からですが、これからは内容も充実させていきたいです。

今回のサイトのコンセプト

今回、テーマを新しく作成するにあたり気をつけたことは、シンプルに見せること。最近のサイトはサイドバーがすごくごちゃごちゃした感じでしたので、1カラムであくまでブログの記事が目立つようにしました。もう一つは、固定のページでトップ画面を作ること。将来的に、ブログの他にも自分が作成したアプリケーションなどの紹介ページも作りたいと考えていますので、それが一覧で見れるようにしたかった。

テーマ制作で苦労したこと

一週間かけて作った中で何点か非常に苦労したことがありました。今後、またテーマを新しくする際に気をつけていきたいです。

ローカル環境からアップデートする際

MAMPを使い、Mac上にPHPが動くローカル環境でテストをしながらテーマを作成していたのですが、実際のサーバーにアップした際に、ローカル環境の設定との違いでエラーが出てしまいこれを修正するのに苦労しました。例えば、wordprseeの「固定のページ」でCSSの画像を変えたり、ナビゲーションの設定を「固定ページ」のタグ番号で振り分けをif文で行っていたのですが、これがローカルと番号が違いうまく表示されなかったこと。後は、テーマを加えただけでは固定のページの作成から投稿設定、フラグインの設定までをすべて差し替える（新たに作り直す）必要があったのでこれもローカル環境のモノに合わせるのが大変でした。

多分、MAMPを使わずに何かうまくできる方法があるのだと思いますが、今後行うときは注意していきたいです。

CSS

CSSを書く順番によって、タグに適応されるされないがあるみたいで、思いつきでHTMLをそのまま書いていった場合、あとで修正するのが大変でした。これを防ぐには、コーディングをする前に、

や id や　class　などのタグが予めどうしていくかを決めてから行う必要があると思います。今回はデザインも実際コードを書きながら、「あーしよう」「こうしよう」「これはやっぱり止めておこう」など色々修正しながらデザインをしていたのでその辺がややこしくなってしまったからだと思います。色々なサイトや本でも、コーディングする前の準備段階をしっかりしなくてはいけない的なことが書いてあるのは本当なんだなあと今回思いました。まずは仕様をはっきりさせてからしたほうが後で困ることは少なくなりそうです。

参考にしたサイト

デザイン能力がない自分にとって、いきなり一からブログをデザインするのは無理なので、まずは色々Webサイトを閲覧して、良さそうと感じたところをつまみ食いしながらデザインしていきました。大体のコンセプトとしては、企業のホームページがトップにあり、そこからブログなどの各ページに飛ぶような形にしたいと思っていました。

任天堂

白を貴重とした背景がとても素敵なサイトです。色合いやデザインはこの任天堂のサイトを参考にしました。実際にテーマが完成してから、任天堂のサイトと見比べて見るとまだまだ全然見劣りしていると感じますが、ちょっとづつ修正をして、こういったシンプルなサイトをになるようにしていきたいです。

Webクリエイターボックス

プラグインやwordpressのテーマについての記事を参考にしました。 Webデザインについての記事がよくはてブでも見られるように、とても綺麗な記事の書き方でデザイン以外にも参考にできる所は多いと思います。私もこういった他の人に役立てていただけるような記事を書いていけたらと思います。

Web Design Recipes

テーマ作成に必要な「functions.php」の設定やwordpressに関する様々なtipsを掲載しています。私のサイトもまだまだ改善点が多くあり、少しづつ改善をしていくつもりですが、それを助けてくれるであろうエントリーが多いと感じます。ブログのデザインもとても綺麗で「firebug」などで見てもどうやってできているのか謎な部分も多い。