レスポンシブでテーマ作りならこの本! WordPressデザインブック HTML5&CSS3準拠


私がいつもお世話になっているエビスコムから待望の新刊「WordPressデザインブック」が登場したので、さっそく購入し愛読しております。
つい最近、このサイトをリニューアルしたのですが、初めてWordPressでサイトを作ったときに活用したのもエビスコムの「WordPressレッスンブック」でした。

今回も、このWordPressデザインブックを読んでサイトをリニューアルしたので、この本に載っている情報を利用しながら紹介していきたいと思います。
ですので、この本が気になっている方は、このサイトをサンプルページみたいな感覚でチェックしてみてもいいかもしれません。
(現在のサイトデザインは本のサンプルとは違っていますが、使用しているコードはこのWordPressデザインブックを参考に作成しています。)

HTML5&CSS3デザインブックと瓜二つ!?

このWordPressデザインブックは、同じエビスコムから出た「HTML5&CSS3デザインブック」と非常によく似ております。

2つのデザインブック

同じデザインブックなので、デザインが似ているのは当たり前かもしれませんが、よく知らない人が見たら間違ってしまいそうです。
ですので、WordPressデザインブックをもし誰かに買ってきてもらうときには、よく本のタイトルを伝えておきましょう(笑)

誰かに買ってきてもらうときは、間違えて別の本を買ってこないように注意して頼もう。

HTML5&CSS3デザインブックのWordPress版

似ているのは表紙だけでなく、中身もHTML5&CSS3デザインブックとよく似ております。
使用しているサンプルのデザインも似ているので、HTML5&CSS3デザインブックを読んで、WordPressに置きかえることができる方には、もしかしたら必要ないのかもしれません。
ですが、為になる目からウロコな情報がたくさん載っているので、それだけでも買う価値はあるかと思います。

「WordPressデザインブック HTML5&CSS3準拠」を一言で紹介するなら、「HTML5&CSS3デザインブック」のWordPress版。
レスポンシブWebデザインを用いて、WordPressでブログやビジネス系サイトを作りたい方におすすめです。

この緑のPOINTのマークアップや上記の注意書きの部分はWordPressデザインブックに記載されているものをそのまま利用しています。

ちなみに、この注釈の部分も利用しています(笑)

WordPressデザインブック おすすめポイント

私がWordPressデザインブックを読んで感じたおすすめな点を紹介します。

  • 最新のWordPress 4.3に対応(2017年10月現在は4.8が最新ですが、本を読む上で特に問題ありません)
  • プラグインを使わずに、パンくずリストやページネーションができる
  • メタデータの設定

 

最新のWordPress 4.3に対応

WordPressのバージョン4.3で追加されたサイトアイコンの設定の仕方がいち早く載っています。

以前までは、ファビコンの設定はプラグインを使って行っていたのですが、手軽に行えるようになって便利になりましたね。

私はこの本を読むまではあまりWordPressを触っておらず、この新機能のことを知らなかったので、まさに目から鱗の情報でした。

ファビコンを設定できます

プラグインを使わずに、パンくずリストやページネーションができる

他のWordPress本では、パンくずリストやページネーションなどといった機能はプラグインを用いて設定していることが多いのですが、この本ではプラグインを使わずにコードを記述するだけで作成することができます。

プラグインは便利なものが多いですが、カスタマイズや管理の面でいろいろと大変だったりすることもあるので、プラグインなしでつくることができるのは便利でありがたいですね。

メタデータの設定

ツイッターやフェイスブックなどのSNSで、共有されたときに表示される画像や概要を設定することができる、メタデータの記述の情報も記載されています。

私はこれまで、OGPのことについてあまり詳しくなく、プラグインで設定するときもこれでいいのだろうかと疑心暗鬼な状態で行っていたのですが、この本を読んだおかげでうまく設定することができたのではと思います。

これを機にSEOについても、もっと勉強したいなと思うようになりました。

楽しくレスポンシブなサイト作りを学べる

サンプルを真似しながらサイトを作っていくだけでも、レスポンシブデザインの面白さを体感することができ、楽しみながらサイトを作成の面白さを味わうことができるので、今までホームページを作ったことがない人にも、おすすめできる一冊だと思います。

このデザインブックでは、ローカル環境の設定やコメント投稿フォームの設定など書かれていない部分もあるので、はじめての方はWordPressレッスンブックから入るのもいいかもしれません。

エビスコムの本はどれも読みやすくてわかりやすく、そして何より面白いです。
ぜひエビスコムにはWeb製作の本だけでなく、私が苦手としているSEO対策についてや、PHPなどのプログラミングに特化した本なども作って欲しいです。

サイトリニューアルしました!

WordPressを始めてからまだ間もないのですが、この度サイトをリニューアルしてYochiYochi(よちよち)として新たに始めることにしました。

主なリニューアル内容

リニューアル前

  • サイト名: Yochi’s Story
  • ドメイン名: http://yochisstory.com/

リニューアル後

  • サイト名: YochiYochi
  • ドメイン名: https://yochix2.com/

サイト名、ドメインの変更に加え、サイトのデザインも一新し、完全リニューアルとなりました。

リニューアル前のトップページ

リニューアルした理由(わけ)

今回、リニューアルしようと思った一番の理由は、サイト名を変えたかったからです。
以前のサイト名は、「Yochi’s Story」でした。このサイト名は私、管理人のニックネームである「Yochi」と、あの本家の「ヨッ○ーストーリー」からモジって決めたんです。

今でも、この名前には愛着があって好きなのですが、検索したときに問題があることに気づきました。

本家はやっぱり強かった

Yochi’s Storyで検索してみると…

次の検索結果を表示していますの文字が…

このせいで、私のサイトにアクセスしようと思って検索すると、勝手に書き換えられて検索されてしまうんです。ただでさえ、ブログを始めたばかりでアクセス数も少ないのに、これだと全然アクセスしてもらえないじゃないか。

このことに気づいてから、だんだんとサイト名を変えたいという気持ちが強くなっていきました。

私のご贔屓エビスコムから新刊発売

私が、WordPressやHTMLの勉強のときに、愛読していたエビスコムから新刊がでたことも、リニューアルの大きなきっかけとなりました。
それがこの「WordPressデザインブック」です。

前に出た、デザインブックやレッスンブックがでた発行年月からみて、今年ぐらいにでるんじゃないかなと思って待ちわびていたんですよね。
本の紹介は、また別の機会にでも紹介したいと思いますが、このサイトのデザインテーマはこの本がベースになっております。

サイト名の由来

このサイト名「YochiYochi」の由来は、私のニックネームであるYochiからきています。
また、年齢的にはもう立派な大人ですが、まだまだ心も体も未成熟である私が、人生をよちよち歩きしながら、一歩ずつ進んでいけたらという思いを込めてつけました。

英語で、baby stepとは赤ちゃんのよちよち歩きみたいな意味らしいのですが、最初の一歩を踏み出すということで、ビジネスシーンなどでも使われているそうです。ちなみに、マンガにもありますよね。こっちのほうを思い出す人が多いかも…

まだまだ最初の一歩を踏み出した程度ですが、できるだけブログを更新できるように頑張ろうと思っておりますので、よろしくお願いいたします。
サイトをリニューアルしたばかりなので、もし、不具合などがありましたら教えていただけると幸いです。

トップページの写真です。ちなみにこれは私の足が写っています。

※追記(2016年9月):YochiYochiになってから1周年となりました!この1年、ブログを書くことよりサイトのデザインばかりに力を入れていて、デザインが変わるごとに見てくださっている方には、迷惑をかけているかもしれませんが、これからもこのブログをよろしくお願いいたします。

WordPress作成時に参考にした本:WordPressレッスンブック

私がWordPressでこのサイトを作る際に、参考にした本を紹介したいと思います。

WordPressでサイトを作るために、最初に選んだ1冊が
エビスコムの「WordPressレッスンブック HTML5&CSS準拠」でした。

本屋でいろんなWordPressの本を立ち読みしたのですが、この本が一番読みやすかったです。
選んだもう一つの理由は、オリジナルテーマを自分でイチから作れるという所でした。
元あるテーマをいじるスタイルの本が多かったので、自分だけのテーマが作れる点も魅力でしたね。
スマホ用サイトなどのレスポンシブデザインにも対応していて、ブラウザのサイズを変えるとそれに合わせてサイトも自動調整されます。
初めてレスポンシブデザインを体験したときは、ちょっと感動を覚えました。

この本で解説しているWordPressのバージョンは3.9となっています。
3と4でバージョン違ってても大丈夫なの?ってなるかもしれませんが、3から4への移行はマイナーチェンジらしいので、あまり気にしなくていいと思います。
私は最新のバージョン対応じゃないと駄目なんじゃないかと、本屋で立ち読みしながらめっちゃ気になってたんですけどね(笑)

WordPressをはじめる前の私のレベル

  • HTML5&CSS ― 基本的なことなら理解できる
  • PHP ― 連想配列くらいまでなら分かる
  • JavaScript ― さっぱり

この本を読む前に、ある程度のHTMLとCSSの知識はあったほうがいいかもしれません。
知識があったほうが、サイトのデザインをいじったりするときに分かりやすいですからね。
HTMLとか全然分からないという方は、同じエビスコム著の「HTML5&CSS3レッスンブック」を先に読むと理解も早まると思います。(この本も読みやすくておすすめです。これは本屋で立ち読みした感想ですけど…)

WordPressレッスンブックを読んで困ったこと

このレッスンブックは非常に分かりやすくておすすめなのですが、WordPress初心者の私がこの本を読んで、あれ?と疑問に思ったことがありました。
もしかしたら、私と同じように疑問に思った方がいるかもしれないので、ここに載せておこうと思います。

While文・if文

私が最初に戸惑ったのは、while文とif文です。
endwhile;とかendif;ってなんぞやと思ったんですよね。
途中にある:(コロン)もよく分からないし…
それで調べてみたら、私が知っていた{ }(波括弧)の他にも基本構文があるということを知りました。

while文

PHP
while ( 条件 ) {
    // 処理内容
} 
PHP
while ( 条件 ) :
    // 処理内容
endwhile;

if文

PHP
if ( 条件 ) {
    // 条件がtrueのときの処理内容
} else {
    // 条件がfalseのときの処理内容
}
PHP
if ( 条件 ) :
    // 条件がtrueのときの処理内容
else :
    // 条件がfalseのときの処理内容
endif;

利点として、こう書いたほうが構造が見やすくなる場合があるので、覚えておいたほうがいいと思います。

スペルミスに注意

私がもうひとつ困ったことは、ソースの入力ミスによる画面真っ白問題です。
ちゃんと本の通りに打っていると思っていても、どこかしら打ち間違えていてエラーになってしまうときがあるんですよね。
人間誰しもミスするものですから…
たった1文字だけ間違えただけでも、おかしくなって真っ白になってしまうときがあるので困ったものです。
テーマ編集画面も、何も色分けとかしてくれないメモ帳状態なのでとても打ちにくい…
時によっては、管理画面すら入れなくなったりする場合もあるので要注意です。
(テキストエディタで作成するのがおすすめです。Bracketsなど…)

この症状に遭遇したとき、壊れちゃったのではないかと思う方もいるかもしれませんが、
ちゃんと入力ミスを直せば大丈夫です。
私はローカル環境で作っていたので、こうなったときは
直接コンピューターの中のフォルダから書き換えていました。
でも、どこを入力間違いしてるか見つけるのが大変なんですよね…(汗)

エビスコムの本は読んでいて面白い

WordPressレッスンブックを見て作ったサンプルのスクリーンショット

これで、私の所持している3冊目のエビスコム著の本となりました。
エビスコムの本は表紙のデザインや紙の質感だったり、記事のレイアウトが自分好みでとても読みやすいと感じます。
ソースとともに、実行結果もひとつひとつ載ってて分かりやすく、ただ本の通りに順番に打ってるだけなのに、だんだんとサイトが出来上がっていく過程がとても楽しいです。
他の技術本とかだと面倒くさくて、すぐソースをコピペとかしちゃうのですが、何故かこの本だと自分で打ち込みたいってなるんですよね。
つくる面白さ・楽しさを感じられる本ってなかなかありませんから、この本は貴重だと思います。

こうしてみると、学ぶために何を利用するのかが大事なんだと感じることができました。
まだまだWordPressの知識は未熟ですから、もっと勉強していきたいですね。