WordPressで「レスポンシブWebデザイン」のサイト構築を行うための最新手法が身につく!
本書では、「レスポンシブWebデザイン」に対応したWebサイトをWordPressで1から構築していきます。そのためには、PCサイトを作ってから、スマートフォンなどに対応するのではなく、最初からどのデバイスにも対応できるデザインやレイアウトを考えることが重要です。
本書ではそういったスキルがレッスン形式のステップバイステップで身につくように構成しました。
●基礎
「レスポンシブWebデザイン」でレイアウトを操るためのボックスレイアウト手法を身につけます。
●実践
「ブログ・ニュース系サイト」をステップを踏みながら構築し、テンプレート、ウィジェット、プラグインの使い方を理解します。
●応用
「スマートフォンなど多様なデバイス」に柔軟に対応できるWordPressのデザイン、設計テクニックを学びます。
1-1 パーツの準備
1-2 テーマの準備
2-1 サイト構築の準備
2-2 記事を投稿する
2-3 レイアウトの基本構造を作る
2-4 ボックスの中にパーツを入れる
2-5 レイアウトの調整を行う
2-6 レスポンシブWebデザインの調整を行う
3-1 フリーの画像素材をプラグインで手軽に利用する
3-2 指定した配置で画像をレイアウトする
3-3 画像のレイアウトをレスポンシブWebデザインに対応させる
3-4 外部コンテンツを貼り込む
3-5 アイキャッチ画像をページ上部に大きく表示する
3-6 サイト名を画像にしてマルチデバイスで表示を揃える
3-7 サイトアイコンを指定する
4-1 記事の投稿日と更新日を表示する
4-2 タグをラベルの形で表示する
4-3 カテゴリーをパンくずリストの形で表示する
4-4 記事に関するメタデータを記述する
4-5 SNSのシェアボタンを用意する
4-6 小見出しを付けてデザインを指定する
4-7 編集画面に独自マークアップの選択肢を追加する
4-8 記事の編集画面を生成ページと同じデザインで表示する
4-9 1つの記事を複数のページに分割する
4-10 「サイトについて」ページを作成する