プラグインに頼らず、且つレスポンシブなサイト作りを学ぶ「WordPressデザインブック HTML5&CSS3準拠」
スポンサーリンク
「WordPressデザインブック HTML5&CSS3準拠
WordPress3.xに対応していた2011年発売の同タイトル本（当時のレビュー）を、WordPress4.3に対応させた完全書き下ろし本。
すっかりWordPressのサイト制作に慣れてしまった私ですが、基礎を見直す意味で購入してみました。何しろ、安心・信頼のエビスコムブランド。毎回学ばせて頂いております。
この本はWordPress学習の2冊目以降に
旧版の「WordPressデザインブック3.x対応
WordPressをローカル環境で動かす方法や、テーマを構成するテンプレート（header.phpやsingle.phpなど）が、どのようにウェブサイトになっていくかなどの説明はありません。また、HTML5やCSSの基本についての説明も省かれています。
エビスコムさんのウェブサイトに、レベルに応じたエビスコム本のロードマップがありますので、参考になさってみて下さい。
ちなみに、上の図の右側3冊も持っています。ここに掲載されていない昔のエビスコム本も何冊もやってきた、私は彼らのロイヤルカスタマーであります・・・。
特にデバイス幅を考慮した表示に焦点
旧版が発売された2011年当時は、現在ほどスマホ・タブレットは普及しておらず、CSSもレスポンシブ対応になっていませんでした。
全編書き下ろしの本書では、設計段階からレスポンシブによる表示を考慮しての制作方法を紹介。また、GoogleChromeのディベロッパーモードとスマホ実機での見え方の違いを紹介するなど、細かい配慮が光ります。
なかなか全ての実機を揃えるのが難しい、私の様な小企業のペーペーウェブ担当には、大変有難い内容です。
Windows10やEdgeにも配慮
2015年夏にリリースされた、Windows10でのタイル表示や、IEの後継ブラウザEdgeでのファビコン表示なども検証済み。
内容は込み入ったものではないながらも、この「最新技術に対応しているッ！」という安心感。ええ、学ぶなら、今です。
プラグインに頼らずWordPressを運営しよう
何でも便利になるこの21世紀、WordPressのイロハがわからなくても、様々な無料プラグインがサイト運営を助けてくれています。
が、プラグインに頼りすぎるのは要注意。ウェブサイトが重くなります。
何故なら、プラグインは外から見えないところで、データベースを生成したり、スクリプトを吐き出したりと、複雑なプログラミングがされているためです。
また、プラグイン同士のコンフリクト（衝突）が起き、ウェブサイトにエラーが生じる場合もあります。Welcartでエラーが起きた時には「他のプラグインを全て止めて検証」するのはそのためです。
そこで、なるべくプラグインを使わないWordPress運営を目指すエビスコム・メソッド（勝手に命名）。
この本で学べる、プラグインなしで作れる機能
- パンくずリスト
- 人気記事の表示（ウィジェット）
- SNSのボタン
- 関連記事の表示
「人気記事の表示」以外は、いずれも当サイトでもプラグインを使わず実現しているものですが、もちろん方法は一つではありませんので、アイディアとして勉強になりました。
SNSのボタンは、公式ボタンなどを使うと読み込みが非常に遅くなります。読み込み速度が遅いことはSEOでもマイナスの要素とされています（当サイトでも、以前は公式ボタンを使っていました）。
WP Multibyte PatchやAkismet以外のプラグインを全くのゼロにするというのは現実の運用では難しいですが、それでもこれらの「サイトに最低限必要な機能」を自前で用意出来ることは、サイト表示高速化に非常に重要です。
この本では学ばない内容
既にWordPressサイト制作歴が6年以上の私としては、「ここは私ならこうする」な内容もありましたが、その辺は徐々に学習していけばいいと思います。
気になった点とか
-
フォントサイズがpx指定
IE8以下への対応も考慮したのだろうけれど、最近はIE8対応はもう止めて、フォントサイズ指定にはemとremを使うのが主流。※IE8は2016年1月にマイクロソフトによるサポートが終了。Bootstrap4もpxを止めてemとremになる予定。
-
スタイルの読み込みに、wp_enqueue_styleを使っていない（header.phpに直書きしてる）
そんなに難しくないので、wp_enqueue_styleを使っても良かったのでは。WordPress公式テーマ申請のガイドラインでは、スタイルはwp_enqueue_styleを使っての読み込みが必須である（直書き禁止）。
-
meta descriptionとmeta keywordsって必要？
本書では、メタタグとして上記の二つを書くことに1.5ページを割いている。でもぶっちゃけ、もうこれらが必要な時代は終わっているのでは。meta descriptionは書きたければ書けばいいけど、少なくともこの本の方法の［コンテンツの先頭100文字を自動抽出する］だけなら、要らない気がする。※関連エントリー：メタディスクリプションは不要？削除してもアクセスに影響なし
-
Rutina対応など、スマホ画面で高解像度に対応する画像の設定方法はあまり学べない
タイトルロゴだけは、スマホに合わせて高解像度のものやWebフォントを使いましょうな説明はある。もっと学習するなら「これからの「標準」を学ぶ マルチデバイス対応サイト構築
（レビュー）」へ（WordPress対応本ではないけど）。
-
margin-left margin-top margin-right margin-bottomはまとめないの？
本の序盤では、marginの設定が上下左右別々に書かれているものも。わかりやすくしたかったのかもしれないけど、HTMLとCSSの基本はわかっている人向けなら、まとめて
marginだけで書いてもよかったような。color:#ffffffとかも、#fffだけでいけるのに、とか思ってしまう。 -
モバイル優先なのかPC優先なのか、スタイル指定がバラバラで混乱しやすい
「ここは画面の幅が大きい時のスタイル」「ここは画面の幅が狭い時のスタイル」と次々に
@mediaを使ったスタイルを組んでいくため、後からメンテナンスがしにくいCSSになってしまっている。最近の流行に合わせて、モバイルファーストなCSSだったらより良かった。 -
フレームワークのような効率的・汎用的なCSSを作れるようになるのがベスト
上記に関連するが、本書では段階的に少しずつスタイルを書き足す形式で学習が進む。ただ、将来的にはフレームワークのような汎用的・メンテしやすいCSSが組めるようになるのが理想的なので、その辺の展望があると良かった。学習するなら「Web制作者のためのCSS設計の教科書
（レビュー）」へ。
-
というわけで、BootstrapやFoundationは別に勉強しよう
シンプルなだけのデザインならこの本だけで構わないけど、やっぱりフレームワークは勉強しておいて損はなし。フレームワークを学ぶなら「これからの「標準」を身につける HTML+CSSデザインレシピ
（レビュー）」へ。
まとめ
WordPressの基礎を終え、ステップアップの次の一歩としての位置付けの本。これを3周程やった後にロードマップに示されている発展本に進めば、よりWordPressやウェブ制作への理解が深まること間違いなし。なんだかんだ言っても、安定のエビスコムブランドです。
WordPressに常に触れている上級者の方には物足りないと思いますが、私の様な一人Web担当な方は、改めて最新バージョンに合わせたWordPressの作り方を学び直すのもいいですね。価格も3,000円弱ですので、セミナー代と思えばお安いものです。
WordPressデザインブック HTML5&CSS3準拠
- 出版社 ソシム
- 著者 エビスコム
- 価格 ￥ 2,808
- 発売日 2015/9/11
[…] プラグインに頼らず、且つレスポンシブなサイト作りを学ぶ「WordPressデザインブック HTML5&CSS3準拠」 […]