WordPressのテーマを作る-その1-事前準備


WordPressは「テーマ」ファイルを変えることで簡単に見栄えを変更することができます。

インターネット上には様々なテーマファイルがありますが、誰が作ったかわからないものには得体の知れないプログラムが組み込まれている場合もあるらしいので注意が必要です。

心配な場合は、WordPressのテーマ配布ページにあるWordPress本家の規格に適合したテーマを選びましょう。

しかし、英語サイトだからなのか、デザインの傾向が英語圏で人気のあるものに偏りがちです。

いや、カッコいいデザインばかりだとは思うんですが、海外のデザインが空間を重視したものが多いのに対し、日本では文字や画像を詰め込んだデザインのほうが人気があるような。

日本語は2バイト文字で画数が多いため、アルファベットだけのサイトとはコントラストが違って雰囲気も変わってしまうから、というのも理由の一つとしてあるとは思いますが、とにかく、実際ここに載っているテーマのうち、公式テーマ以外のテーマを日本語サイトで見かけた覚えがない・・・・。

ということで、公式テーマを基にして自分で作ることにしました。

過去に“TwentyTen”と“Twentyfourteen”をカスタマイズしたことがありますが、今回はこの記事の執筆時点で最新の“Twentyfifteen”を基にすることにしました。
覚え書きとして作業を記録しておきます。そのうちゼロからテーマを作れるようになれたらいいなと期待しつつ。

テーマ作成環境を準備する

テーマのために、まず自分が準備した制作環境はこんなところです。

・パソコン(Windows8.1)
・Wordpress(レンタルサーバ内とローカル両方)
・基にするテーマファイル(今回はTwentyfifteen)
作りたいテーマの完成イメージ ← 重要
・Photoshop
・テキストエディタ(notepad++)[別記事
・XAMPP[別記事

またCSSファイルを手打ちする際に面倒なのが色設定なので、使う色リストをあらかじめHTMLで作成しておいて、そこからコピペするようにしています。

本サイトでは以下の色リストを作成してコピペしていました。(最終的に変更した色もあるけど)colour-chart-for-Rocknit基本の3色と薄い色、濃い色を決めておいて、使うときはだいたいアルファ値も設定(rgba)しています。
なので、実際はHEX値を設定している個所はほとんどありません。

なおノーマライゼーションの観点から、色覚障害があっても違いが分かるように違う色を重ねる際は濃さを変えるよう意識しています。
iPhoneの色覚シミュレーションアプリで確認したところ、多分大丈夫かと。

ちなみに自分がサイトをデザインする際に常に意識するのは、「デジタルっぽくない」こと。

こんなんばっかり作ってるから商業的デザインがいつまで経っても苦手なのに、これでメシを食べていけたらいいなと願うあたりが、甘ちゃんな素人から抜け出せないでいる原因なんですが。 :ちぇっ: