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

• はじめに
• サンプル
• 制作ステップ
• もくじ

はじめに

本書は、WordPressの基本を習得された方がより効率よくWebサイトを構築し、近年のWebサイトに求められる要件をプラグインなしで組み込めるようになることを目的としています。

たとえば、

• レスポンシブWebデザインで、スマートフォンやタブレットといった多様なデバイスに合わせてコンテンツを表示すること。
• 各種メニューにサムネイル画像を付けて閲覧者の目を引くデザインにすること。
• SNSで効果的にシェアされるためにメタデータの設定を行うこと。

などなど、Webサイトに求められる要件は年々増えており、WordPressで構築するサイトも例外ではありません。

そこで、本書ではWordPressでサイトを構築する際に必要となる基本的なパーツとテンプレートを用意し、これらを組み合わせることで簡単に基本的なページを形にできるようにしました。

さらに、基本的なページを元に、レスポンシブWebデザインの設定、各種パーツの追加やアレンジ、メタデータの設定などを行い、ステップ・バイ・ステップでサイトを仕上げていく方法を解説しています。

WordPressをさらに活用していくために、本書が一助となれば幸いです。

本書で構築するサイト

ブログ・ニュース系サイト

ビジネス系サイト

制作ステップ

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

WordPressでサイトを構築するのに必要なオリジナルのテーマと、ページを構成する基本パーツを準備します。パーツはWordPressのテンプレートタグを組み込む形で作成し、テンプレートに記述すればすぐに使用できるようにしています。

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

Chapter 1で用意したパーツを組み合わせ、ブログ・ニュース系サイトの基本的なページを形にします。Chapter 3～６ではここに画像やメニューなどのパーツを追加し、デザインをアレンジしてページを仕上げていきます。

Chapter 3 画像のアレンジ

画像を使って記事の個別ページのデザインをアレンジしていきます。閲覧者の目を引くように、フリーの画像素材の活用、アイキャッチ画像の設定、外部コンテンツの貼り込み、サイトアイコンの設定などを行います。

Chapter 4 記事のアレンジ

記事をより読みやすく、わかりやすくするため、本文中の見出しや注意書きなどのデザインを指定します。また、メタデータやシェアボタンを用意し、SNSで効果的に記事を共有してもらえるようにします。

Chapter 5 記事一覧のアレンジ

トップページやカテゴリー／タグページの記事一覧にサムネイル画像などを追加し、デザインをアレンジしていきます。また、トップページでは１件目の記事のみを大きく表示するように設定しています。

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

各種メニューや検索フォーム、広告などを追加してサイトを仕上げます。ここでは人気記事、おすすめ記事、関連記事メニューを追加し、ヘッダー部分には小さい画面でトグル型に切り替わるナビゲーションメニューを追加しています。

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

Chapter 6までに作成したサイトをベースに、ビジネス系サイトを構築します。ここではビジネス風の新しいトップページと４つのコンテンツページでサイトを構成しています。

もくじ

[mokuji]

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 外部コンテンツを貼り込む
コンテンツの最大幅を指定する
YouTubeのビデオの縦横比を維持してレスポンシブWebデザインに対応させる
- 外部コンテンツのキャッシュをクリアする
- WordPressにビデオをアップロードして貼り込む
3-5 アイキャッチ画像をページ上部に大きく表示する
- Pixabayの画像を検索して アイキャッチ画像に指定する
- Flickrの画像を検索して アイキャッチ画像に指定する
- アイキャッチ画像にキャプションを付ける
3-6 サイト名を画像にしてマルチデバイスで表示を揃える
- 高解像度版の画像
- サイト名をGoogle Fontsで表示する
3-7 サイトアイコンを指定する

Chapter 4　記事のアレンジ

4-1 記事の投稿日と更新日を表示する
4-2 タグをラベルの形で表示する
4-3 カテゴリーをパンくずリストの形で表示する
4-4 記事に関するメタデータを記述する
メタデータをOGPで記述する
Twiiterカード用のメタデータを追加する
古くからの記述形式でメタデータを追加する
- WordPressが標準で出力するメタデータ
4-5 SNSのシェアボタンを用意する
4-6 小見出しを付けてデザインを指定する
編集画面から「見出し１」の選択肢を削除する
- 番号なしリストのアイコンをカスタマイズする
- 引用したコンテンツをダブルクォテーションで囲んだデザインにする
4-7 編集画面に独自マークアップの選択肢を追加する
補足情報のデザインを指定する
注意書きのデザインを指定する
- <span>による独自マークアップの選択肢を追加する
- 複数の段落のマークアップ
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 新着記事メニューをアレンジして人気記事メニューを作成する
記事の個別ページへのアクセス数を記録する
アクセス数が多い順に記事を出力する
- Firefoxの先読みによるアクセスを記録しない場合
- クローラーやログイン中のユーザーによるアクセスを記録しない場合
- 不要になったカスタムフィールドをまとめて削除する
6-4 おすすめ記事メニューを作成する
ロケーションを追加する
6-5 関連記事メニューを作成する
同じカテゴリーに属する記事を出力する
- 同じタグに属する記事を出力する場合
6-6 ウィジェットを利用する
6-7 ウィジェットの機能で広告を表示する
レスポンシブWebデザインの設定を変更して広告の表示に対応する

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

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

Appendix

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

[/mokuji]