この手順でテーマを作りました。WordPressのテーマを作成したときの流れや道具、参考になった本や記事について

  • 更新日:
  • 公開日:

ある程度このブログのテーマが出来上がってきたので、テーマを作成したときの流れや道具についてまとめてみます。

実際の作り方だとかそういうモノではなく、「僕の作業の流れはこんな感じでした。このツール便利だよ、この本良いよ！」っていう内容です。

紙に軽くレイアウトをスケッチ

最初に、実際にペンを動かして紙でレイアウトをスケッチ。左に記事コンテンツ、右にサイドバーの2カラムレイアウトはこのときに決めました。

パソコンでもモックアップを作るツールはありますが、なるべく目を使いたくないので紙に書いてます。

ラフデザインにはこのクロッキー帳を使っています。

マルマンのクロッキー帳は枚数が多く（100枚）、柔らかさとは裏腹に消しゴムを使っても破れ辛い良質な紙を使っています。持ち運んだりしないのであれば、この大サイズをオススメしたいです。

実際にPCでデザイン

レイアウトが決まったらPhotoshopで大まかにデザインを開始しました。

CIが大事な会社のホームページや、パーソナルブランディングが目的のブログでもない、ただの個人ブログなので「何となく」でデザイン。

デザインにはPhotoshopの他、黄金比や白銀比の計算ツール「Metallic Ratio」を使いました。

Metallic Ratio

Metallic Ratio

はてブ数
Metallic Ratio | 黄金比、白銀比などの貴金属比の比率を計算するWebツール。by B-SHIKI Fld. http://www.b-shiki.com

長辺か短辺に数値を入力すると、メニューで選択した黄金比や白銀比などの数学的比率で計算してくれるWebサービスです。サイズに悩んだら迷わず使ってます。

また、デザインで特に意識した点はコントラストと整列です。この意識付けの影響元は「ノンデザイナーズ・デザインブック」です。

デザインの普遍的な考えが学べる本です。主にデザインの4つの基本原則である近接、整列、コントラスト、反復のことが書かれています。英文字フォントの基本的な知識も書かれていて勉強になります。

デザインからHTMLファイルを作成

デザインが大体出来たら、模写するようにHTMLファイルを作成しました。レスポンシブデザインにするのでHTML5/CSS3をベースにコーディングしてます。

HTML5のテンプレート（フレームワーク）には「HTML5 Boilerplate」を使っています。

CSSのコーディングではメタ言語の「SASS（SCSS）」を使うととても効率的。さらに、SASSのフレームワークである「Compass」を使うとめっちゃ捗ります。ホームページ制作にSASS/Compassを導入するならこの本が分かりやすくて人気があります。

BoilerplateのCSSファイルをSCSSファイルにする方法は「css2sass」を使っています。

BoilerplateはHTMLの、SASS/CompassはCSSのブラウザ互換を補ってくれるので、あの人間として大事な何かを失いそうになるデバッグ作業が大分軽減されます。（Boilerplateについては正確に言うと同梱のJavascriptのおかげです）

あと、CSS3のbox-shadowの数値指定が苦手だったので「CSS3 box-shadowジェネレーター」というWebサービスを使いました。

CSS3 box-shadowジェネレーター

CSS3 box-shadowジェネレーター

はてブ数
CSS3で使うbox-shadowのジェネレーターです。ざっくりと作ってくれます。FirefoxとChrome用も出します。ついでにborder-radiusも設定出来ます。

box-shadowは数値だけでは実際の見え方のイメージが難しいのですが、このWebサービスはスライダーを操作すると同時にbox-shadowの見え方＆ソースコードを確認できるんです。影のデザインに役立ちました。

その他「だれでもWebデザインができる本」を参考に、文章中の画像と文字の間隔や文字サイズを調整してます。

この本は最近買ってパラパラっとめくって読んでみたのですが、「画像と文字の間隔は8~14px！」「見やすい行の高さは1.5～2.0em！」と、とにかく具体的な数値で教えてくれます。

「ここの間隔は何pxにしよう…」とか「行の高さって一般的にはどのくらいなの？」と悩んだときは結構重宝すると思います。

WordPressテーマ化（phpファイル化）

HTML、CSS（そしてJavascript）を使った静的ページを作り終えたら、Wordpressでテーマとして読み込めるようにphpファイル化作業に入ります。

この「HTML　→　WordPressテーマ化（phpファイル化）」の方法ですが、基本的なやり方はこの記事が理解しやすいです。

この記事を参考にミニマルな作業で少しずつ理解を深めたら、次は体系的な知識を学べる本をオススメします。例えば僕は「WordPress 逆引きデザイン事典PLUS」という本でWordPressのテーマ構造を勉強しました。

”逆引き”とタイトルにありますが、テーマを構成するテンプレートについて１つずつ解説しています。条件分岐タグやURL出力などのテンプレートタグについても詳しく記載されているので、これ一冊でWordPressに関する知識を広く網羅出来ます。

あと、「WordPressテーマってphp知らないと作れないよね？phpの勉強が必要なんじゃないの？」と億劫になってしまっている方もいるかもしれません。しかし、WordPressテーマ制作には（込み入った、オリジナルな機能を盛り込まない限り）phpの深い知識は必要ありません。

ただ、「最低限のphpの知識は知っておきたい」と考えている方にはオススメのプログラミング勉強サイト「ドットインストール」があることを紹介しておきます。

ドットインストールは「プログラミングを3分動画で勉強しよう」というコンセプトの元作られたWebサービスです。プログラミングを知らない初心者をターゲットにしています。

ユニットテストデータでデザイン漏れをチェック

「さて、WordPressテーマ化したし後は記事を書くだけでござる」と生き急ぐなかれ。

  • コメントが来た場合
  • 画像が回り込みした場合
  • 複数ページの場合

と、WordPress（特にブログ）はコンテンツ内容が変化するので、あらゆる状況のスタイリングをしておく必要があります。

だからって自分で様々な状況の記事を用意するのは想像しただけでやつれます。想像やつれです。

なので僕は「テーマユニットテストデータ」を使いました。テーマユニットテストデータとはつまりダミーの記事です。

コメント、画像の回り込み、複数ページ、見出しタグ、引用タグなど基本的な状況の全てをカバーしています。これらを１つ１つ漏れ無くスタイリングしていくのは結構骨が折れますが、ダミー記事を用意する複雑骨折レベルの作業よりは格段と楽になるでしょう。用意してくれた方に感謝してます。

あとはWordPressのテーマ水準に達しているかチェックしてくれる「Theme-Check」がありますが、使うのは自分だし、特に気にする必要はないと思うので使っていません。

このユニットテストデータを使ってスタイリングした所で、ひとまずテーマの初期段階の完成としました。細かい部分は記事を書きながら少しずつ修正しています。

こんな感じでWordPressテーマを作成しました。1つの参考になったら嬉しいです。

書いた人

Symbol Mark

Ryoichi（しつ）

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone