AMPでもこれだけできる! WordPress AMP対応モダンWeb制作レッスンブック

私が好きなエビスコムから待望の新刊が登場しました!
WordPress AMP対応 モダンWeb制作 レッスンブック」という本です。

AMPプラグインはデフォルトの状態だとナビゲーションやシェアボタンもなく、殺風景でちょっと寂しいですよね…
でも、この本ではWordPressのAMPプラグインでAMPページ用のテンプレートを作って、ナビゲーションやシェアボタンなどを実装し、オリジナルのAMPページを作成していくことができます。

エビスコムのWordPress本について

エビスコムにはすでに「WordPressレッスンブック」や「WordPressデザインブック」という本が出ているのですが、この2冊はWordPressのオリジナルテーマを作ることが主な目的となっています。

一方、この「AMP対応レッスンブック」はAMP対応という名の通り、AMPページを作成することに内容が絞られているのでご注意を。
これはあくまで、AMPのレッスンブックであって、WordPressのレッスンブックではないということをお忘れなく。

この本を読んでできること

この本を読んでできることをいくつか挙げてみます。

  • ナビゲーション
  • カルーセル
  • シェアボタン
  • ライトボックス
  • オフキャンバスメニュー
  • アナリティクス、広告の設定など

Webサイトに必要であったり、基本的な機能を実装することができます。
この本を読むとできるというよりは、これらのAMPにあらかじめ備わっている機能を用いて、カスタマイズをしていくと言った方が近いかもしれません。

私はもともとAMPにこういう機能が備わっているとは知らなかったため、驚きでした。
カスタマイズする労力は必要ですが、この本を読むことでAMPページでも通常のページと遜色ないページを作ることができるようになるのではないでしょうか。

AMPページをオリジナルでつくってカスタマイズしていくため、既存のテーマを使っている方はデザインを合わせたりするのが大変かも…

このAMP対応レッスンブックで使っているベースとなっているテーマは、WordPressデザインブックのモノとほぼ一緒なので、ベースのテーマのことについて知りたい、興味があるという方は「WordPressデザインブック HTML5&CSS3準拠」も読んでみることをおすすめします。

この本の役割

この本は、AMPでも「ここまでやることができるんだ!」ということを理解し学べる本になっています。
この本で学んだことを活かして、他のサイトにも応用していきたいですね。

いろいろと仕様や制約があって難しいですが、新しい機能を体験できるのは気持ちいいですし、サイトの表示スピードもあがると嬉しくもなります。

WordPress AMP対応 モダンWeb制作 レッスンブックを予約しました

エビスコムから新しく出る本「WordPress AMP対応 モダンWeb制作 レッスンブック」をネットで予約しちゃいました。

AMPとは、スマホでサイトを見るときにAMP対応しているページであると、高速で表示することができる仕組みのようなモノのこと。
私も以前、WordPressのAMPプラグインを使ってAMP対応をしたことがあったのですが、デフォルトのテンプレートだとナビゲーションが表示されてなかったり、広告を表示するのにも手間が掛かったりするなどして、結局は元に戻してしまっていました。

そんな私のかゆいところに手が届かなかったところを分かっていたかのように、私の好きなエビスコムからAMP対応のやり方を解説した本が出るではありませんか!
こりゃ~、予約するしかないでしょ。発売前から技術書を予約するなんて、昔の私からしたら信じられないでしょうなぁ。
本来は本の中身を見てから購入を決めたいのですが、私の住んでいる地域だと入荷するのが2日ぐらい遅れてしまうのでね…
どうしても発売日に欲しい本はネットで予約してしまいます。
それくらいエビスコムの本は楽しみでワクワクしているんですよねぇ。
本もCDやゲームみたいに発売日に入荷してくれればいいのに…

新しく本が出るということなので、このサイトもリニューアルしたばかりではありますが、また手を加えるかもしれません。
エビスコム本の新刊が出るタイミングでリニューアルする、というやり方が一番いいのかもしれないですねぇ~。

WordPressデザインブックの人気記事メニューをプラグインでより便利にする

この記事は、WordPressでつくっているサイトをWordPressデザインブックに載っているテーマでつくっている人向けの内容になっております。

私のこのサイトで使っているテーマは、WordPressデザインブックに書かれているソースコードがベースになっています。
そのWordPressデザインブックにはプラグインを使わずに人気記事メニューを作成するやり方が載っており、私のサイトにある人気記事一覧もそのコードを利用していました。

手軽に人気記事メニューを実装できるので便利なのですが、ちょっと不満なところもありました。

WordPressデザインブック人気記事メニューの不満なところ

WordPressデザインブックに載っている、人気記事メニューの不満なところを2つ挙げます。

  • 記事一覧からアクセス数を確認できない
  • 自分がサイトに訪れた数もカウントされる

記事一覧からアクセス数を確認できない

個々の投稿の編集画面ではもちろんアクセス数を確認することはできるのですが、記事全体のアクセス数や順位を確認することはできません。
カスタムフィールドを使っているので調べれば、投稿一覧のページに表示させるやり方もあるかもしれませんが、手間がかかるので避けたいところ。

自分がサイトに訪れた数もカウントされる

これは人によって不満かどうか差はあるかもしれませんが、自分がサイトに訪れた回数もカウントに含まれてしまうので、正確なアクセス数を確認することができません。
できれば、自分が訪れた回数もカウントするかどうか、設定で変更できるといいですよね。

WP-PostViewsプラグインで不満を解消

人気記事メニューをプラグインを使って実装しようかなぁと思って調べていたら、WP-PostViewsというプラグインを使えば、上記の不満を解消できるということがわかりました。

WP-PostViewsは人気記事メニューを作られるというよりは、投稿、固定ページが閲覧された回数を表示できることに特化しており、WordPressデザインブックの人気記事メニューと同じようにカスタムフィールドを用いて行っています。

そこで、アクセス数を記録する部分をプラグインに任せてしまうことで、より便利に扱うことができるようになる!ということなんです。

では、WP-PostViewsプラグインを使って人気記事メニューをつくるやり方について書いていきます。

ソースコードの変更箇所

ソースコードの変更する部分はたったの1箇所。

sidebar.php
<?php
$myposts = get_posts( array(
	'post_type' => 'post',
	'posts_per_page' => '6',
	'meta_key' => 'views',
	'orderby' => 'meta_value_num'
) ); 

WP-PostViewsのアクセス数はカスタムフィールドのviewsに保存されるので、get_posts()のmeta_keyのパラメータをpostviewsからviewsに変更するだけです。
そのほかの部分やCSSは何も変更する必要はありません。
これだけで同じように人気記事メニューを表示させることができます。


これで投稿一覧のページからでもアクセス数を確認することができるようになります。
また、表示数の列の見出しをクリックするごとに降順、昇順と変更することができるので、アクセス数の順位も楽に知ることができます。

WP-PostViewsの設定

WP-PostViewsプラグインの設定についても簡単に説明しておきます。

カウントする閲覧元:をゲストにすることで、自分がサイトにアクセスした回数はカウントに含まれなくなります。

BOTによるアクセスをカウントさせないようにすることもできますし、表示設定ではthe_views()をテーマ内のソースコードに含めることで、サイトページ内にもアクセス数を表示させることができます。

これで説明は以上となりますが、プラグインでより便利にサイトを運営、管理することができるので、WordPressデザインブックを使ってサイトをつくっている方は参考にしてみてください。

これからWeb制作を学ぶならエビスコム本を選ぶべし[HTML/CSS | WordPress]

今回は、Webサイトの制作(HTMLやCSS・WordPress)の勉強をしたいけど、どんな本を選べばいいか分からないという人(初心者)に向けて書いていきたいと思います。

私はこれまで、主に独学でHTMLやCSSなどのWeb制作について勉強し、いろんな本を読んでみましたが、一番読みやすく理解しやすかったのはエビスコムの本でした。

そこで今回、私が伝えたいのはエビスコムの本を選んでおけば間違いないっ!ということです。

エビスコム本をオススメしたい訳

なぜ、私がエビスコム本をおすすめしたいかという訳をここで書いておきます。

  • ステップバイステップで理解しやすい
  • つくる楽しさを教えてくれた

ステップバイステップで理解しやすい

エビスコム本の特徴として、ステップバイステップ式で分かりやすく、理解しやすいというところがあります。

図とコード、説明がセットで細かく解説してくれているため、読みやすくてスラスラ~と進めていくことができます。

つくる面白さを教えてくれた

私はこのエビスコム本のおかげで、Webサイトをつくる面白さを教えてもらいました。
私が最初に勉強したときはエビスコムの本ではなかったのですが、もっとHTML・CSSについて勉強をしたいなぁと思っていたときに本屋さんで選んだのがエビスコムの本でした。

面白そうだなぁと思って手にとった本はHTML5&CSS3デザインブックだったのですが、この本に出会ってからWebサイトをつくる楽しさを感じられるようになったんですよね。

最初はただ本の通り、コードをそのまま写して打っていただけなのですが、サイトができていく過程を見るだけでもワクワク感があり、Webサイトの制作ってこんなに面白いものだったんだぁと思い、もっと早く勉強しておけばよかったと後悔すら感じましたね…

おすすめのエビスコム本ロードマップ

ここからは学ぶ際におすすめしたいエビスコム本を紹介していきたいのですが、パッとみて分かりやすいようにまず表にして書いてみます。

せっかくなので、エビスコムのサイトにあるロードマップ風にしてみました(笑)

最初の一冊次の一冊発展
HTML+CSSHTML5&CSS3
レッスンブック
HTML5&CSS3
デザインブック
6ステップでマスターする
HTML+CSSデザイン
HTML+CSS
デザインレシピ
WordPressWordPress
レッスンブック
WordPress
デザインブック
WordPressステップアップブック

HTML5&CSS3レッスンブック

エビスコム本のことについて書いておきながら、この本のみ私が紹介している中で持っていない一冊となっています。
私が最初にHTMLの勉強をはじめたときは、別の本でやってたんですよね…

ですので、あまり詳しく説明することはできないのですが、本屋で立ち読みしたときは、当時私が分かりにくかったarticleについてなどもしっかりと説明が書かれていたので面白いなぁと思って見ていました。

HTMLとCSSを学ぶ初心者のはじめの一冊には、この本を私はおすすめします。

HTML5&CSS3デザインブック

このデザインブックが、私がはじめて読んだエビスコム本でした。
HTML勉強の2冊目として購入した本なのですが、floatをつかったレスポンシブデザインについて詳しく書かれています。

これまでレスポンシブデザインについて知らなかった私は、衝撃を受けるくらい感動しましたよ。
サンプルでつくったサイトを、ブラウザで表示の大きさを変えて遊んでいました(笑)

HTML5&CSS3レッスンブックを読んだ後の、次の一冊としておすすめかと思います。

6ステップでマスターする「最新標準」HTML+CSSデザイン

[発展]として載せていますが、こちらはFlexboxをを使ったレイアウトでレスポンシブデザインを学ぶことができます。
他にも知らなかったCSSの技術なども載ってあり、とても参考になりました。
HTML5&CSS3デザインブックを読んだあとに見てみると、違いが分かってイイかもしれません。

このサイトも、さっそくこの本で学んだ知識を活かしてFlexboxを使ってつくってみました。
(今はオリジナルになってますけど、Flexboxでレイアウトしています)

これからの「標準」を身につける HTML+CSSデザインレシピ

タイトルにデザインレシピとあるように、各パーツ(ボタンやヘッダーなど)のデザイン一覧のレシピや、効率よくサイトを制作できるCSSフレームワーク(Bootstrap/Foundation)の活用の仕方について学ぶことができます。

WordPressレッスンブック

WordPressについて勉強したい(WordPressの使い方というよりは、イチからWordPress(テーマ)をつくりたい)という方におすすめの一冊。
このレッスンブックには、WordPressデザインブックにはないコメント欄の作成や、WordPressのインストール・ローカル環境の準備などが載っています。

WordPressデザインブック

HTML5&CSS3デザインブックのデザインレイアウトを元にWordPressでつくってみようというのがコンセプトになっています。
パンくずリストやページネーション、関連記事・人気記事といった機能をプラグインを使わずに実装する方法も載っています。

WordPressステップアップブック

発売されてから少し期間が経っているのでサンプルサイトの見た目など古くなっている感はありますが、WordPressの中身のデータベースを眺めて理解を深めるという、独自のコンセプトが特徴の本です。
カスタムフィールドや、カスタムタクソノミーについて知りたいという方にもおすすめだと思います。

読み進めていく本の順番

初心者・はじめての方が読み進めていく本の順番としては、まず最初に「HTML5&CSS3レッスンブック」を選んで読んでみて、その後はもっと勉強してみたいことに合わせて、本を選ぶことをおすすめします。

レスポンシブデザインを学びたいなら

最新のCSSテクニックを学びたいなら

CSSフレームワーク(Bootstrap3・Foundation5)を学びたいなら

WordPress(テーマづくり)を学びたいなら

エビスコム本は私のバイブル

エビスコム本のおかげで、私はサイトをつくるのが好きになりました。
私はこれまでもC言語などのプログラミングを勉強する機会があり、そのときはやっていても全然面白くなかったのですが、HTMLは書いたコードが即座にブラウザに反映されるのが面白くて、プログラミングに対する意識も以前よりはちょっと変わった気がします。
(厳密にHTMLはプログラミング言語ではないんでしょうが…)

そういうのに興味がなくても、おしゃれやデザイン・絵を描いたりするのが好きな人が、CSSをイジってみたりすると意外とハマる人は多いんじゃないかなぁと思うんですけどね。

まだ何も分からないという初心者の皆さんでも、読みやすくて分かりやすいエビスコム本で勉強してみてWebサイトをつくる魅力に触れてみてはいかがでしょうか。
私もさらにWeb制作のことを勉強したいと思っていますし、今後はJavaScript・PHPにもチャレンジしてみようかなと考えています。
(問題は、JavaScript・PHPのエビスコム本はないということなんだよなぁ…)

おすすめのエビスコムHTML/CSS本ロードマップ(追記:2019年4月)

上記の内容は2016年10月に書かれている記事です。この記事にて私がおすすめしていた本は内容的にちょっと古臭くなっているモノもあり、書き換えようかとも思いましたが、記録という意味でそのまま残しておきます。

2019年4月現在では、HTML/CSSレッスンブックは刷新されて新しくなっています。
ここでは2019年4月時点のおすすめのエビスコム本を軽くではありますが紹介したいと思います。

最初の一冊発展
HTML+CSS

CSSグリッドで作るHTML5&CSS3レッスンブック

フレキシブルボックスで作るHTML5&CSS3レッスンブック

CSSグリッドレイアウト デザインブック

HTML5&CSS3デザイン 現場の新標準ガイド

はじめは二冊のHTML5&CSS3レッスンブック

最初の一冊として「CSSグリッドで作るHTML5&CSS3レッスンブック」、「フレキシブルボックスで作るHTML5&CSS3レッスンブック」を紹介していますが、二冊セットで読むのがおすすめです。

現在の主流であるCSSグリッドレイアウト、フレキシブルボックスレイアウトでのページの作り方を学ぶことができます。
レイアウトの手法が違うだけで基本は同じなので、内容がカブっている部分もあるかと思いますが、それでも役立つはずです。
とりあえずはこの二冊を読むだけで十分かと思います。

次に読むとしたら

基本はレッスンブックだけで十分かと思いますが、よりCSSグリッドの作法やテクニックを学びたいのなら「CSSグリッドレイアウト デザインブック」がおすすめです。

CSSグリッドをつかっておしゃれなページを手軽に作ることができます。

HTML/CSSのリファレンス本、辞典的な役割として「HTML5&CSS3デザイン 現場の新標準ガイド」を手元に置いておくのも良いかもしれません。
HTML/CSSの理解をもっと深めたいというときにもおすすめです。

WordPress本はおすすめできない

WordPress本については、正直どれもおすすめできません。というのも2016年10月時点から刷新されておらず、WordPressのバージョンが5.0になって新たに登場したエディタ「Gutenberg(グーテンベルグ)」に対応していないためです。

いずれGutenbergに対応した書籍が登場すると予測しているので、それまで待っておくのが良いでしょう。

6ステップでマスターする 「最新標準」HTML+CSSデザインを使って、サイトをリニューアルしてみました

この前の記事にも書いていたのですが、「6ステップでマスターする 「最新標準」HTML+CSSデザイン」を基にしてこのサイトに反映させようということで、何とかやっと形になったので変えてみました。
flexを使ったレイアウトを学ぶならこの本!6ステップでマスターする 「最新標準」HTML+CSSデザイン

本のサンプルサイトのデザインのままだとちょっと寂しいかなぁと思って、いろいろと装飾を付け足していったのでごちゃごちゃしてしまった感もありますが、とりあえずはこれをベースにしていこうかと思います。
ブログサイトなので若干レイアウトを変更している部分もあるのですが、基本はサンプルと同じような形となっています。
クラス名なども変えるのが面倒くさくて、本に書いてあるままの状態です…
修正しやすくするように変えなきゃなとは思っているんですけどね。

これからも思いつく度にいじっていくかもしれませんが、いずれはもうちょっと削っていってシンプルな形にしたいと考えています。
もし、表示などに不具合などがありましたら、こちらに報告していただけるとありがたいです。
主にFlexboxを使ってレイアウトしているのですが、時々レイアウトが崩れてしまっているときがあるので…
これからは一旦サイトのデザインには目を伏せておいて、ブログを書くことに集中しようかと思います。(できるかな…?)