いよいよ実践編です。今回は①サイト確認(デモサイト)②実際にホームページ制作の二部構成となっています。①サイト確認(デモサイト)でイメージを掴みながら、どういった感じで作っていけばいいのかを①②を見返しながらホームページを作っていってください。
- デモサイトを確認してどういったブロックを使用するのかイメージを掴む
- いざホームページを作るとなってもイメージが湧かないので何種類かのデモサイトを見てイメージを掴む
- ホームページ制作のだいたいの構成を掴む
造形全般、看板制作会社
URL:https://www.t-and-t.co.jp/
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/screencapture-t-and-t-co-jp-2022-10-22-00_04_10.jpg)
上記トップページは「ヘッダー」「グローバルメニュー」「トップ画面」「フルワイド×7」「ヘッダー」でホームページが制作されています。
順番にどういったブロックを使用しているのか説明していきます。
トップページ(ヘッダー・グローバルメニュー・トップ画面)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-28-1024x576.jpg)
①ヘッダー:
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-64-1024x516.jpg)
左側のテキスト表示
管理画面>ダッシュボード「外観」>ダッシュボード「カスタマイズ」>「Wordpress設定」>「サイト基本情報」>「キャッチフレーズ」に入力したテキストが表示されますヘッダー(左)
表示はオフになっているので、管理画面>ダッシュボード「外観」>ダッシュボード「カスタマイズ」>「ヘッダー」>■キャッチフレーズ設定>キャッチフレーズの表示位置からヘッダーバーに表示を選択します。
ヘッダーバーの背景色の設定はキャッチフレーズ設定の上部にあります。
右側のアイコン表示
管理画面>ダッシュボード「外観」>ダッシュボード「カスタマイズ」>ヘッダー>■ヘッダーバー設定「表示設定」のSNSアイコンリストを表示するに✔を入れる。
検索窓の表示は下部■検索ボタンの設定から「ヘッダーバー内のアイコンリストに表示」を選択
※アイコンのURL設定は一つ戻り>SNS情報>SNSリンク設定でURLを設定します
②グローバルメニュー
グローバルメニューが日本語表記・英語表記の2行表示する方法を説明します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-64-1024x502.png)
管理画面>ダッシュボード「外観」>ダッシュボード「メニュー」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-29-1024x576.jpg)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-30-1024x576.jpg)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-31-1024x576.jpg)
「説明」の項目が追加されるので、全部のメニューに英語を入力し「メニューを保存」をクリックします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-65-1024x215.jpg)
日本語表記の下部に英語表記があれば完了です。
③トップ画面
トップ画面は全画面ではなく下部のテキスト見えています。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-65-1-1024x509.jpg)
管理画面>ダッシュボード「外観」>ダッシュボード「カスタマイズ」>トップページ>メインビジュアル>■表示設定>メインビジュアルの高さ設定から「数値で指定する」を選択します。
メインビジュアルの高さはデフォルトで64vhになっていますので調整できます。
トップページ(下層部)①
トップ画面から下は「フルワイド×7」を組み合わせて作成されています。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-63-1024x163.png)
「フルワイドブロック」
![](https://membership.micotoweb.com/wp-content/uploads/2022/11/名称未設定のデザイン-2022-11-01T004939.701-1024x576.jpg)
トップページ(下層部)②
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/2-6-1024x576.jpg)
「フルワイドブロック」>「背景画像」>「リッチカラム」>「カバー」>「ボタン」>「SWELLボタン」
![](https://membership.micotoweb.com/wp-content/uploads/2022/11/名称未設定のデザイン-2022-11-01T005146.026-1024x576.jpg)
トップページ(下層部)③
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/3-6-1024x576.jpg)
「フルワイドブロック」>「背景画像」>「メディアとテキスト」
![](https://membership.micotoweb.com/wp-content/uploads/2022/11/名称未設定のデザイン-2022-11-01T005323.561-1024x576.jpg)
トップページ(下層部)④
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/4-7-1024x576.jpg)
「フルワイドブロック」>「テキスト」>「投稿リスト」>「SWELLボタン」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-32-1024x576.jpg)
トップページ(下層部)⑤
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/5-5-1024x576.jpg)
「フルワイドブロック」>「テキスト」>「投稿リスト」>「SWELLボタン」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-33-1024x576.jpg)
トップページ(下層部)⑥
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/6-4-1024x576.jpg)
1.「フルワイドブロック」>「背景画像」>「テキスト」>「SWELLボタン」>「テキスト」
![](https://membership.micotoweb.com/wp-content/uploads/2022/11/名称未設定のデザイン-2022-11-01T005453.590-1024x576.jpg)
2.ヘッダー:管理画面>ダッシュボード「外観」>ダッシュボード「メニュー」>メニュー設定「フッターに✔」>メニューを保存
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-34-1024x576.jpg)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-65-2-1024x504.jpg)
メニュー項目の階層化
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-35-1024x576.jpg)
グローバルメニューの「制作実績」にカーソルを合わすと階層ページが表示されます。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/名称未設定のデザイン-65-1024x576.jpg)
管理画面>ダッシュボード「外観」>ダッシュボード「メニュー」
例えば「事業紹介」に階層ページ「会社概要」を作る場合は「会社概要」をクリックしたまま右側に少しズラすと「会社概要」の横に「副項目」と表示されます。
これだけで「事業紹介」に階層ページができます。
「メニューを保存」をクリックしトップページを確認します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/名称未設定のデザイン-66-1024x576.jpg)
「事業紹介」の階層ページに「会社概要」が追加されました。
下層ページ(会社概要)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/screencapture-t-and-t-co-jp-company-2022-10-23-23_41_14-707x1024.jpg)
会社概要は4部の「フルワイドブロック」が使用されています。
「事業内容」「経営理念」「お問い合わせ」のブロックにつきましてはトップページを同じような形で「フルワイドブロック」を挿入し進めていきます。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/名称未設定のデザイン-64-1024x576.jpg)
「フルワイドブロック」>「テーブル」
会社名 | 株式会社〇〇〇 |
創業 | 昭和〇〇年〇月〇日 |
代表取締役 | 〇〇 〇〇 |
郵便番号 | 〒100-1234 |
所在地 | 東京都〇〇区〇〇 |
下層ページ(ご注文の流れ)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/screencapture-t-and-t-co-jp-ordermade-flow-2022-10-24-00_32_37-619x1024.jpg)
「フルワイドブロック」>「背景カラー」>「テキスト」>「ステップブロック」
〇〇の流れなどについては「ステップブロック」を使うのが有効的です。
お問い合わせ後に返信メールを送ります。
弊社からヒヤリングシートをお渡ししますのでご質問にお答えください。
居酒屋(飲食店)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/screencapture-104kikuya-2022-10-24-02_22_53.jpg)
上記トップページは「ヘッダー」「グローバルメニュー」「トップ画面」「フルワイド×6」「ヘッダー」でホームページが制作されています。
順番にどういったブロックを使用しているのか説明していきます。
トップページ(ヘッダー・グローバルメニュー・トップ画面)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-1024x576.jpg)
①ヘッダー:先ほどのコーポレートサイトと同様の手順で進めます。
②グローバルメニュー:先ほどのコーポレートサイトと同様の手順で進めます。
③トップ画面(テキスト・サブテキスト):
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-65-3-1024x509.jpg)
管理画面>ダッシュボード「外観」>ダッシュボード「カスタマイズ」>「トップページ」>「メインビジュアル」>■各スライドの設定のメインテキスト・サブテキストに文章を入力します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-1-1024x576.jpg)
メインテキスト・サブテキスト共に改行して表示する場合は「<br>」をテキストとテキストの間に入力します。
トップページ(下層部)①
トップ画面から下は「フルワイド×6」を組み合わせて作成されています。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-1-1-1024x576.jpg)
「フルワイドブロック」>「背景カラー」>「画像」>「テキスト」>「上下の境界線の形状設定」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-65-1024x472.png)
「フルワイドブロック」>「背景カラー」を変更後、見出しの下に画像を挿入しています。「画像サイズ62×60」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-66-1024x477.png)
画像の下部にテキストを入力します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-2-1024x576.jpg)
魚とお箸マーク画像を挿入した上部の「見出し」を消去します。
右側上部が「固定ページ」になっていれば「ブロック」に変更し、スクロールすると「上下の境界線の形状設定」がありますので、「下部の境界線の形状」を「斜線」「円」「波」「ジグザグ」から選択し、下部の境界線の高さレベル設定で調整します。
トップページ(下層部)②
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-67-1024x439.jpg)
「フルワイドブロック」>「背景画像」>「テキスト」>「2カラム」>「ボタン」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-4-1024x576.jpg)
「テキスト」のカラーは上記画像、左の赤枠で大きさは右の赤枠より変更ができます。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-5-1024x576.jpg)
今回のフルワイドブロックではテキストは真ん中ではなく、左側に表示されていますので「ボタン」はカラムを使用します。
「2カラム」を使用し、右側のカラムは無視します。
左側のカラムに「ボタン」ブロックを挿入します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-6-1024x576.jpg)
上記画像の赤枠をクリック>「中央揃え」にします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-7-1024x576.jpg)
右側のブロックを設定しカスタマイズしていきます。
スタイル「輪郭」>色「ゴールド」>サイズ「0.9em」>枠線「角丸12px」に調整するとデモサイトと同じようなボタンが完成します。
トップページ(下層部)③
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-67-1-1024x460.jpg)
「フルワイドブロック」>「区切り」>「背景画像」>「2カラム」>左「リスト」>「テキスト」>右「テキスト」>「ショートコード」>「ボタン」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-8-1024x576.jpg)
「フルワイドブロック」挿入後、見出しに文章を入力します。
Enterを押すと段落するので右側の「+」をクリックし検索窓に「区切り」を入力しクリックします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-9-1024x576.jpg)
「カラムブロック」>2カラムで左側に「+」をクリックして「リスト」を挿入、テキストを入力します。
右側には「ご予約/お問合せ」を入力し文字を大きくします、下部には「+」で「ショートコード」をクリックします。
「」をショートコードに入れ隣に電話番号を入れると「アイコン+電話番号」が表示されます。
下部には「テキスト」を入力し、最後に先ほどと同じように「ボタン」を挿入してカスタマイズします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-11-1024x576.jpg)
トップページ(下層部)④
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-12-1024x576.jpg)
「フルワイドブロック」>「背景カラー」>「3カラム」>左「画像」「投稿リスト」>真ん中「画像」「投稿リスト」>右「画像」「テキスト」>上下「上下の境界線の形状」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-13-1024x576.jpg)
3カラムを選択し各カラムをカスタマイズしていきます。
左カラム:
画像(580×363)を挿入し、下部には「投稿リスト」ブロックを入れています。投稿ブロックは管理画面>ダッシュボード「投稿」からカテゴリーを選び選択する事ができます。
詳しい方法については「ホームページ制作」で説明しています。
真ん中カラム:
上記と同様に「画像」と「投稿リスト」です
右カラム:
画像+テキストを入力します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-14-1024x576.jpg)
上下「上下の境界線の形状」を調整します。上下ともに「形状」と「高さレベル」を調整します。
トップページ(下層部)⑤
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-67-2-1024x465.jpg)
「フルワイドブロック」>「2カラム」>左「投稿リスト」>右「インスタグラム投稿」プラグインのインストール
左カラム:
「投稿リスト」ブロックを挿入します。
右カラム:
「インスタグラム投稿」プラグインのインストール『Smash Balloon Social Photo Feed』
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/1-5-1024x576.jpg)
「Smash Balloon Social Photo Feed」>「今すぐインストール」>「有効化」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/2-7-1024x576.jpg)
管理画面>ダッシュボード「Smash Balloon Social Photo Feed」>「設定」
「ソース管理」>「+ソース追加」をクリックしインスタグラムアカウントに接続します。
接続が完了すると、「+ソース追加」の右横にインスタグラムのアカウント名が表示されます。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/3-7-1024x576.jpg)
ダッシュボード「Smash Balloon Social Photo Feed」>「すべてのフィード」
「+新規追加」をクリックします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/4-8-1024x576.jpg)
自身のインスタグラムアカウントが表示されているか確認後「次へ」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/5-6-1024x576.jpg)
インスタグラムが表示されますので「カスタマイズ」「設定」で表示数やアイコンなどを調整します。
埋め込みフィードのコードをコピーして、固定ページに戻ります。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/6-5-1024x576.jpg)
「+」から「Instagram Feed」ブロックをクリックすると、インスタグラムのページが表示されます。
トップページ(下層部)⑥
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-67-1024x410.png)
「フルワイドブロック」>「背景カラー」>「2カラム70:30」>「ボタン」>「2カラムボタン」>「カスタムHTML(地図)」>「フッター」
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-68-1024x455.png)
「フルワイドブロック」>「背景カラー」でカラーを調整してから「2カラム70:30」で左側にテキスト、右側に画像を導入します。
下部には今までと同じように「ボタン」を設置し、下部の「ボタン」に関しては「2カラム」をもう一度作成し右のカラムは無視し、左カラムに「ボタン」を追加します。
「カスタムHTML」ブロックを下部に挿入し、GoogleMAPの地図をコピーします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-15-1024x576.jpg)
「大阪城天守閣」のタイトル下部「ルート・乗換」「保存」「付近を検索」「モバイルデバイスに送信」「共有」の「共有」をクリックします。
続いて「地図を埋め込む」をクリックします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-16-1024x576.jpg)
「地図を埋め込む」の右ナナメの「HTMLをコピー」をクリックします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/③-17-1024x576.jpg)
先ほどの「カスタムHTML」のコード内にコピーして「プレビュー」をクリックすると地図が表示されます。
ヘッダー:管理画面>ダッシュボード「外観」>ダッシュボード「メニュー」>メニュー設定「フッターに✔」>メニューを保存
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/ダッシュボードMW-WP-Form」-34-1024x576.jpg)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/image-65-2-1024x504.jpg)
下層ページ(メニュー)
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/名称未設定のデザイン-67-1024x576.jpg)
「投稿リストブロック」>「サイドバー」
コースメニュー・セットメニュー・プラスメニュー・お飲み物/お子様メニューはダッシュボード「投稿」でカテゴリーをつけて「投稿リストブロック」から表示しています。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/1-6-1024x576.jpg)
ダッシュボード「投稿」>ダッシュボード「カテゴリー」から上部赤枠の「名前」「スラッグ」を入力し、新規カテゴリー追加をクリックします。
カテゴリーを細分化することにより、「投稿リスト」ブロックでカテゴリーごとの表示ができます。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/2-8-1024x576.jpg)
新規カテゴリー追加をクリックすると、右側に追加されます。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/3-8-1024x576.jpg)
ダッシュボード「投稿」>「新規追加」で投稿ページを作成していきます。
タイトルとテキストを入力後、右側のカテゴリー欄のカテゴリーに✔を入れ「公開」をクリックします。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/4-9-1024x576.jpg)
管理画面>投稿のカテゴリー欄にカテゴリーが選択されているのを確認します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/5-7-1024x576.jpg)
「管理画面」>「固定ページ」>「新規追加」でカテゴリー別のページを作成します。
「+」から「投稿リストブロック」を選択すると投稿にあるページがすべて表示されますので、右側の「表示投稿数」「レイアウト」などを調整します。
![](https://membership.micotoweb.com/wp-content/uploads/2022/10/6-6-1024x576.jpg)
右側の「Settings」から「Pickup」にタブを変更するとカテゴリー別に表示できますので「コースメニュー」を選択します。