WordPressデザインブック HTML5&CSS3準拠

本書では、「レスポンシブWebデザイン」に対応したWebサイトをWordPressで1から構築していきます。そのためには、PCサイトを作ってから、スマートフォンなどに対応するのではなく、最初からどのデバイスにも対応できるデザインやレイアウトを考えることが重要です。

本書ではそういったスキルがレッスン形式のステップバイステップで身につくように構成しました。

●基礎
「レスポンシブWebデザイン」でレイアウトを操るためのボックスレイアウト手法を身につけます。
●実践
「ブログ・ニュース系サイト」をステップを踏みながら構築し、テンプレート、ウィジェット、プラグインの使い方を理解します。
●応用
「スマートフォンなど多様なデバイス」に柔軟に対応できるWordPressのデザイン、設計テクニックを学びます。

Chapter 1　WordPressでサイトを構築する準備

　1-1 パーツの準備
　1-2 テーマの準備

Chapter 2　ブログ・ニュース系サイトの構築

　2-1 サイト構築の準備
　2-2 記事を投稿する
　2-3 レイアウトの基本構造を作る
　2-4 ボックスの中にパーツを入れる
　2-5 レイアウトの調整を行う
　2-6 レスポンシブWebデザインの調整を行う

Chapter 3　画像のアレンジ

　3-1 フリーの画像素材をプラグインで手軽に利用する
　3-2 指定した配置で画像をレイアウトする
　3-3 画像のレイアウトをレスポンシブWebデザインに対応させる
　3-4 外部コンテンツを貼り込む
　3-5 アイキャッチ画像をページ上部に大きく表示する
　3-6 サイト名を画像にしてマルチデバイスで表示を揃える
　3-7 サイトアイコンを指定する

Chapter 4　記事のアレンジ

　4-1 記事の投稿日と更新日を表示する
　4-2 タグをラベルの形で表示する
　4-3 カテゴリーをパンくずリストの形で表示する
　4-4 記事に関するメタデータを記述する
　4-5 SNSのシェアボタンを用意する
　4-6 小見出しを付けてデザインを指定する
　4-7 編集画面に独自マークアップの選択肢を追加する
　4-8 記事の編集画面を生成ページと同じデザインで表示する
　4-9 1つの記事を複数のページに分割する
　4-10 「サイトについて」ページを作成する

Chapter 5　記事一覧のアレンジ

　5-1 記事の一覧にサムネイル画像を追加する
　5-2 記事の一覧にページネーションを追加する
　5-3 1件目の記事の概要を大きく表示する
　5-4 カテゴリー／タグページの表示を調整する
　5-5 トップ／カテゴリー／タグページに関するメタデータを記述する

Chapter 6　ナビゲーションのアレンジ

　6-1 トグル型のナビゲーションメニューを作成する
　6-2 新着記事メニューにサムネイル画像を追加する
　6-3 新着記事メニューをアレンジして人気記事メニューを作成する
　6-4 おすすめ記事メニューを作成する
　6-5 関連記事メニューを作成する
　6-6 ウィジェットを利用する
　6-7 ウィジェットの機能で広告を表示する

Chapter 7　ビジネス系サイトの構築

　7-1 ビジネスサイト風のコンテンツを用意する
　7-2 ビジネスサイト風のトップページを作成する
　7-3 ヘッダー画像を表示する

Appendix

　メインループとサブループ
　テーマエディタの拡張
　デバッグモードの利用
　デバイスの種類の判別