HTMLの知識ゼロからWordPressテーマ自作までできるようになった参考書
目次
「これはわかりやすかった！」おすすめWordPress参考書をメモ
今の会社に就職してからほぼ独学でHTMLやCSS、WordPressを勉強してきて、「これはわかりやすい！」と思った参考書を改めてメモしてみる。5日くらいの連休の間に一人合宿気分で取り組んだら、HTML？タグ？な状態から小さな会社の企業サイトくらいは運営できるようになるかもしれない。
HTMLとは何か＞テキストエディタでHTMLとCSSを覚えよう
はじまりの書。「HTML/XHTML&スタイルシートレッスンブック」
前職を辞めて、「何だったら食べていけるのかな…」と考えて、学生時代から細々と小さなWebサイトを作っていたので、その延長線なら好きなことだしやれるかも、とWebサイト運営の職を探すことにした。だけど、それをやっていたときはDreamweaverを使ったtableレイアウト。難しいことはよくできたWYSIWYGエディタであるDWに任せていたものだから「tableでレイアウトしてるのは小学生までだよねー」「これからはdivでレイアウトするのがスタンダード」な時代では全く通用しないだろう。「よくわからん」と手を出してなかったCSSを一から覚えるために購入したのが「HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる」。
全ページカラーで本を見ながらテキストエディタにコードを打ち込んで、ブラウザを更新するたびに「おお」と嬉しくなれた。ページがカラーなのは大事。白黒だとそれだけで初心者には難しそうに見える。この本の通りにテキストエディタにコードを打っていったら（読むだけじゃなくてちゃんと手を動かすのが大事）、HTMLの主要なタグの意味と使いどころ、スタイルシートの記述の仕方、今も昔もよくあるヘッダー、メニューバー、メインコンテンツ、サイドバー、フッターで構成される2カラムレイアウトのページをdivで組めるようになる。
今はもう本格的にHTML5を使うようになっているからXHTMLメインのこの本は少し情報が古い。だけど、HTMLを一から覚えるにはXHTMLから覚えるのも有りかと思う。中途入社で入った会社のサイトがスマホ未対応でXHTMLだった、なんてことはまだまだ普通にあるだろう。後からHTML5になってheadタグ内の難しい呪文を書かなくてよくなることに感動してもいい（笑）。
この本でdivレイアウトでのページ作りを覚えて無事に再就職ができた。
副読本におすすめ「現場のプロから学ぶXHTML+CSS」
XHTMLの本を読んでdivを使ったレイアウトを勉強していると、「あれ？」と引っかかることがいくつも出てくる（だいたいは回り込みについて）。そんなときに横に置いておきたいのが「現場のプロから学ぶXHTML+CSS」。初めにこちらを読んでもいいのだけど、チュートリアル本ではないので副読本におすすめ。つまったときにその箇所についての解説を読むと、タグの仕様がわかって何が原因だったのかを理解していける。先の本とこの2冊を行ったりきたりしているうちに「ブロック要素」「インライン要素」についてはほぼ理解できていることだろう。
無料ブログサービスじゃ限界がある。＞小額で自分のドメインでサイトを運営してみよう。
仕事をしながらプライベートのブログも（更新頻度はそれほど多くはなかったけれど）続けていて、当時はNiftyのココログでサイトを開設していた。無料で使えたのはもちろんありがたかったけれど、デザインのカスタマイズでできることは限られていて、用意されたテーマの切替、バナーの変更くらいしかできなかった。
仕事で覚えたことをフィードバックしようにも、手をだせるところがない。時はブログサービスのプラットフォームの主流がMovable TypeからWordPressに変わっていく時期で、会社のブログもMTからWPに切り替えた。会社のサイトを実験場にするのもいいけれど、いちいちエラーを出して画面を真っ白にしていては問題になる。サーバーに手を出すのにビビリながらも独自ドメインを取ってレンタルサーバーでWordPressの勉強を始めることにした。
レンタルサーバーの設定画面も載っているのがわかりやすい「WordPress 2.7対応「導入&カスタマイズ」実践ガイド」
初めてのWordPressの勉強のために手にとったのが「WordPress 2.7対応「導入&カスタマイズ」実践ガイド」。この本の良かったところは独自ドメインを取った後のレンタルサーバー契約からWordPressのセットアップまでの手順が解説されていたところ。初心者がレンタルサーバーを契約しようというときに、レンタルサーバー会社のサイトのほとんどは敷居の高さを感じさせる。初心者向けの手取り足取りで手順を教えてくれるページが無いサイトはいくつもある。
この本を参考にロリポップレンタルサーバーでサーバーをレンタル、ムームードメインで独自ドメインを取得して現在に至っている。この本を手にとっていなかったらまだレンタルサーバーデビューしていなかったかもしれない。足を向けて寝られない1冊。
ロリポップはどちらかといえば「遅い」と言われることの方が多い印象がありますが、1日～千PVくらいまでなら十分だと思います。何より低コストで始められるので趣味サイトのレンタルサーバーデビューにおすすめです。セキュリティに関してもSiteGuard WP Pluginを利用するなどユーザー側でもある程度強化できます。サイト運営を続けられて1日数百PVくらいになればAdSenseやAmazonアソシエイトでサーバー、ドメイン代は回収できます。また、サーバー、ドメイン代は支払いを忘れるとサイトが表示されなくなってしまうので、クレジットカード（デビットカードも使用可）での自動更新にしておくのが便利です。
現在ではサーバーの管理画面からWordPressを含めたCMSの簡単インストール機能が用意されているレンタルサーバー会社も多いし、対象のWordPressのバージョンも2.xで今からのWordPressの勉強には逆に向いていない（非推奨となった関数などもあるため）。新品では手に入らないだろうからこの本については「是非！」ではなく、「こんな本があった」というお話で。
これからWordPressの勉強を、というタイミングなら”XAMPP”か”WebMatrix、Instant WordPress”という単語が載っているWordPress参考書を探すといい。ローカル（自分のPC内）にWordPressの動作環境が作れて、エラーを気にせずレンタルサーバーデビュー前の練習ができる。
小テーマじゃ限界があるし、探り探りでじれったい。＞自分でもテーマを作ってみたい！
WordPressでブログを始めて、テーマをカスタマイズして使ってはテーマのアップグレードで初期化されてまた直し…とやっていると「子テーマ」なる機能を知ることになる。スタイルシートだけの変更なら子テーマでも満足できるかもしれないけれど、そのうちに表示する要素を取捨選択したくなったりしてくる。だけど複雑なことをしようとすると、いかんせん海外の「プロい」人たちの作ったテーマ。何がどこでどうなっているのかがわからない。「こうしたい」というときの関数を見つけられても、いざ自分の使っているテーマのphpファイルを覗いてみると解せぬ書き方をされている…（なるほど、わからん！）。
ならばよろしい、自作テーマだ。
WordPressデザインブック3.x対応
運命の書。ブレイクスルーの1冊となったのが「WordPressデザインブック3.x対応」。この本も全ページカラーで構成されていて、見やすい。
プログラミングの参考書の中には、コードを解説するときにプログラムの冒頭と終わりを省略して記載しているものが多くて、そういう構成は初心者からすると、頭と終わりをどう書いていいのかわからないから手を出せなくなる（hogeとかもそう）。この本はそうではなくてまっさらな状態からコードが増えていって、そのページで新しく入力するコードは色付きで（それまでに入力した部分は黒）記載されているから安心して進んでいける。
基本的には個人のブログを想定したテーマの作成方法が書かれているけれど、タクソノミーの追加やカスタムフィールドの扱い方も学べるし、チュートリアルを進めていく内にそれまで”進入禁止ゾーン”扱いだっただろうfunction.phpに触れることにもなる。この本を一通りこなせれば、もう後は自分の思い通りに機能を追加できるし、デザインも自由に反映させられるようになる。企業サイトも応用で作れるようになる。
Amazonアソシエイトで物が売れ始める。＞アクセス欲しい！＞SEOって何？
自分で理解しながら作った自作テーマ、どんどんと機能を追加したりデザインを詰めていったりしているうちに、導入しておいたAmazonアソシエイトからおすすめアイテムが売れていくようになっていった。年間のサーバー代が賄えるようになると、アクセス数も気になってくる。Google Analyticsとウェブマスターツール（現在のSearch Console）を導入して、おすすめアイテムが売れている記事を見てみると、検索順位も上に来るようになっている。他の記事も上に持っていければ…検索に引っかかりやすい記事の書き方は、そもそも正しくタグを使えているのか…。”SEO”という言葉に意識が向くようになる。パンダ？ペンギン？ブラックハット？
これからはじめる SEO内部対策の教科書
AdWordsのような広告を出稿したり、自作自演リンクのようなことはしたくない。Googleのアルゴリズム変更にあたふたしないで済む、風邪を引きにくい基礎体力のついたサイトにしたいと思っていた。それに向いたのは「内部対策」というものらしい。そこで手に取ったのが「これからはじめる SEO内部対策の教科書」。
この本では「お金をかけずに自分でできる範囲」のSEO対策のほとんどが書かれている。XHTMLからHTML5の移行時期の本ではるけれど、基本的な考え方はまだまだ普遍的だと思う。「やるべきでないこと」を知るのにいい1冊で、会社に入ってWeb担当になったのなら読んでおいた方がいい。
小さな会社にいるとSEO業者からの営業電話がかかってきて、それはちょっと詳しい人間に回ってくる。で、内容を聞いてみれば「外部リンクを～」「NAVERまとめページを代行で～」挙句の果てには「ユーザーに小さなアプリをイントールしてもらってポップアップで広告を～」なんて提案をしてくる企業もある（作ってくれるのはいいけど消して欲しい時に消してくれるのか？）。ちょっとでもSEOに関する知識を入れておけば、彼らの話がブラックなのかホワイトなのか、リスキーなのかが判断できる（数十万円の提案のほとんどは、自社内に勉強した人間がいればそれほど難しくなくできることだ）。
WordPressに慣れてきたら続きはWebで。「もっとああしたい」ためのググり方。
SEOを考えると思い通りにタグを使い分けたい！スマホ対応も自作テーマでこなしたい！＞Media Queriesと条件分岐
今からサイトをテーマファイルも含めて勉強するならレスポンシブレイアウトにしておきたい。そんなときはCSSのMedia Queriesを使ったウィンドウ幅に合わせてコンテンツの幅を可変、表示または非表示を切り替えながらレイアウトさせる方法と、WordPressに用意されているwp_is_mobile関数などの条件分岐を利用する方法がある。「CSS Media Queries」「レスポンシブ ブレークポイント」「WordPress 条件分岐 スマホ」といったワードで検索するとヒントが見つかる。WordPressの条件分岐の使い方がわかってくると、トップページのh1タグはサイト名、記事ページのh1タグを記事タイトルに、といったようにSEOに適したタグの付け方も可能になる。
WordPressメモ：条件分岐を使って見出し要素を変更する方法
WordPressのテーマをスマホ対応させるのに便利な関数「wp_is_mobile」
プロのとる”余白”を知ろう。Chrome Developer Toolsの使い方を覚えよう
スタイルシートの書き方がわかってきたら覚えたいのがGoogle Chromeの「その他のツール」にある「デベロッパーツール」。これを使っている間、クリックした部分のスタイルの設定を細かにON/OFFしたり、数値を切り替えたり、指定を加えたりがその場で試せるようになる。テーマの修正で手探りでスタイルを記述して更新を繰り返すより、デベロッパーツールでスタイルをある程度調整してコードを追加していくほうが効率的。どんなサイトを見ているときでも使えるので、「このサイトは素敵だな」と思ったときにmarginやpaddingの数値を調べることができる。プロの技から学ぶためにも使いこなせるようになっておきたい。
ドットインストール：Chrome Developer Tools入門 (全10回)
テキストに影を落としただけの画像はもう作らなくていい！CSS3を学ぼう
CSS3以降はもうドロップシャドウは画像ソフトを使わなくても表現できるようになった。Webフォントを使えばさらに画像ソフトの出番が少なくなる。「Webフォント アイコンフォント」で検索してみよう。
簡単！Webフォントを使ってブログをさりげなくリッチにしよう
トップページの抜粋表示のコンテンツの並び順をHTMLそのままで変更したい！＞Flexboxを覚えよう
スマホ向けレイアウトを採用してから、トップページ、アーカイブページの記事抜粋部分はどんどんシンプルになっていった。今（記事作成時）ではキュレーションアプリやTwitterCard、Facebookの概要表示に習って見出しタグの記事タイトルより上にサムネイルをもってきたカード型にしている。
テーマファイルでそのまま見出しタグの上にimgタグを置く手もあるけれど、見出しタグの下にimgタグがあった方がHTMLの書き方としては正しそうな気がするので、コードはそのままFlexboxを使ってコンテンツの表示順を入れ替えた。
Flexboxはまだ仕様が確定していないようだけど（ベンダープレフィックスも必要）、モダンブラウザのほとんどがサポートしているしこれから使いこなせるようになりたい。慣れが必要だけど、小さく試すのに抜粋部分はちょうどいい箇所だ。「Flexbox 使い方」「CSS Flexible Box」で検索してみよう。
CSS3 Flexboxに関してはCollisさんの記事がわかりやすい
coliss：CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
結局「自分でそれを必要とする」のが覚える近道。
数年前は「ホームページをタグ打ちでなんて」と思っていたのに、今はWYSIWYGエディタよりテキストエディタの方が好きだし、プロじゃないと作れないんだろうなと思っていたWordPressのテーマも自作できるようになった。あの時から思えば随分とできることが増えた。
ぐんと学習のスピードが早まったのはやはりレンタルサーバーを借りて自分でWordPressのサイトを運営するようになってから。自分でお金を出して本を買うのも大事だ。いくつも途中で挫折して本を買い増していくうちに良書に出会う。本を読みながらやりたかったことができるようになっていくのは小さくも感動できる。できるようになることが増えていくだけやっぱり嬉しいし、それは他人が評価しなくたって自信になっていく。
もっともっとやりたいことがはっきりしてくるし、自ずと「ググる技術」も身につけていく。そうなればエラーで画面を真っ白にしようとももう慌てない。「WordPress （プラグイン名） 真っ白」なんて検索の仕方でも案外対処法を見つけられる。「やり方はわからないけれど、これがああできたらそれはできそうだ」とアイデアが浮かぶようになってくる。
自分でそれを必要とすれば、身につくものだ。