全画面トップ画像とインパクトの強いHPを作りたい！
できればワードプレスを利用して、写真が印象に残るようなカスタマイズにしたいと思ったことはありませんか？
そこで、今回は簡単に出来る全画面トップ画像HPのカスタマイズについてご紹介します。
全画面トップ画像HPの完成イメージ
まず、今回の編集手順で作れるサイトの完成イメージについてご紹介していきます。
トップ画面のイメージ
トップ画像が画面いっぱいに表示されるデザインなので、お店の外観やHPの印象がわかる画像を設定することができます。
画像下に数行程度の文章を入れておくと、どんなサイトなのか分かりやすくなりますね。
また、画像をクリックすると、こちらの画像のようにポップアップ表示でピックアップ記事を表示することができます。
そのため、ファーストビューからおすすめの記事に誘導することも可能なデザインです。
ピックアップ記事は、呼び出したい記事にタグを入力するだけなので編集も簡単に行えます。
各項目への誘導イメージ
各項目の誘導は、背景画像と文字画像を組み合わせて表示されます。
そのため、定期的なカスタマイズで画像を差し替える時も簡単に編集が行えます。
カテゴリーページなどへの誘導として活用することもできるので、用途にあった項目を作成しましょう。
紹介や説明などのイメージ
例えば、プロジェクトごとの紹介や担当者の詳細情報など、細かな紹介をする時に利用できるパーツです。
見出しと入力部分を3カラムに分割することで、スッキリとまとめることができます。
おすすめ記事のイメージ
おすすめ記事は、トップ画像をクリックした時に表示されるポップアップと同じです。
画像をクリックされなかった場合も確認ができるように配置しています。
最近の投稿のイメージ
投稿した記事の一覧を確認できるパーツとして配置しています。
表示する投稿数はカスタマイズすることができるので、好みに合わせて調節しましょう。
カテゴリー紹介イメージ
カテゴリーの紹介は、画像がメインとなっています。
使用する画像にカテゴリー名を入れると、インパクトもより強くなります。
リンクは画像に配置されており、画像下部の文字は削除することも可能です。
お知らせのイメージ
お知らせの部分は、上記で紹介している「最近の投稿」と表示形式は同じです。
カテゴリー別に表示することができるので、日記やキャンペーンの紹介などを特集として表示することもできます。
よくあるご質問のイメージ
よくあるご質問について紹介する部分は、Q&A形式で表示することができます。
表示する項目数はカスタマイズすることができるので、長くなる時はリンクで別ページに誘導することがオススメです。
イベント紹介などのイメージ
背景画像に色を付けることで、インパクトのある紹介が出来るパーツです。
画像に重ねる色は好きな配色や濃度が選べるので、HPの印象に合わせたカスタマイズが可能です。
シンプルな最近の投稿のイメージ
大きな画像が多いHPカスタマイズなので、サイト下部にシンプルな表示を入れるパターンです。
一通りサイトを見た後に、最近の投稿を見たい方向けに用意されている部分です。
フッター付近に入れておくと、アクセスの誘導に繋がりますね。
シンプルなカテゴリーのイメージ
フッター上に、カテゴリーもシンプルな表示を用意しています。
こちらもシンプルな最近の投稿と並べることで、アクセスの誘導に繋がりますね。
必要に応じて設定し、利便性を高めましょう。
今回ご紹介するカスタマイズは、このようなインパクトのあるHPにカスタマイズする方法となります。
では、実際に作成手順について見ていきましょう。
作成手順
ワードプレスを全画面トップ画像のインパクトあるHPにカスタマイズする手順は、こちらになります。
このような手順でHPをカスタマイズします。
では、詳しく見ていきましょう。
固定ページを作成する
今回のカスタマイズで表示されるフロントページは、固定ページで作られています。
そのため、まずは固定ページを新規作成し、デザインの編集を行うこととなります。
固定ページを新規作成する時のタイトルは「フロントページ」にし、見分けが付きやすくしましょう。
また、今回作成時に配置したブロックは、こちらの並び順です。
|
では、実際に作りましょう。
トップ画像を作る
トップ画像は、「画像」のブロックを使用して作成します。
そして、詳しい作成手順はこちらになります。
このように、リンク先は「#sm-overlay-widget-area」を指定しましょう。
「#sm-overlay-widget-area」はポップアップ表示のエリアを開くリンクとなります。
ポップアップを作る
先ほど作成した画像をクリックすると開くポップアップ部分は、ウィジェットで作成します。
固定ページの下書き保存をしてから、ウィジェットの編集画面に移動しましょう。
では、詳しい作成方法について解説していきます。
保存が完了すると、「#sm-overlay-widget-area」のリンクを開くとポップアップ式で表示されます。
「pickup」というタグを付けた記事が表示され、タグ付けがない場合は画面上部に白枠のみが表示されます。
|
ポップアップ表示させたい記事の編集画面に行き、タグ「pickup」を入力しましょう。入力後はenterキーを押して、下記の画像のような表示になっていることを確認してくださいね。
|
画像下の紹介文を作る
固定ページの編集に戻り、トップ画像の下に紹介文となるテキストを入力しましょう。
テキスト部分は、ブロックの「クラシック」を使用するとカスタマイズが行いやすいのでオススメです。
このように、画像下に掲載したいテキストを入力しましょう。
どんなサイトなのかがわかるような説明を書いておくと、初めて見た方もわかりやすいですね。
項目紹介を作る
項目紹介は、「ABOUT」・「BLOG」・「contact」などのメニューに表示したいリンクを張りましょう。
今回使用したブロックは、「セクション(背景画像あり)」です。
では、作成の手順を見ていきましょう。
このように、透過画像を重ねることで、背景画像の差し替えが簡単に行えます。
表示する文字画像のサイズは、背景画像とのバランスを見て調節しましょう。
また、画像の下にリンク先の説明文を表示しておくと、内容位がわかりやすくなります。
ちなみにですが、テキストは先ほど作成した「紹介文の作成する」と同様です。
簡単に作成できるので、必要に応じて説明文を入れましょう。
リンクを付ける
画像だけではリンクだと気づかない場合もあるかもしれません。
紹介文の下にリンクボタンを配置しておくと、わかりやすいですよね。
では、リンクボタンの作成方法について見ていきましょう。
このような手順で、簡単にリンクボタンを作成することができます。
リンクボタンは、様々な部分に使えるものなので活用しましょう。
3カラム紹介部分を作る
フルサイズの画像ばかりでは、細かな情報が表示しにくいですよね。
3カラムにすることで、箇条書きの説明なども見やすくなります。
では、3カラムを作成する方法について見ていきましょう。
このように、見出しとリストを作成しましょう。
おすすめ記事部分を作る
ポップアップ表示と同じおすすめ記事を表示する部分は、「ピックアップスライダー」のブロックを使用します。
専用ブロックを追加するだけなので、サクッと作成できます。
このような手順で操作し、「ピックアップスライダー」のブロックが追加できれば完成です。
ピックアップ記事の設定は「ポップアップを作る」で行っているため、特別な操作はありません。
最近の投稿を作る
最近の投稿は、タイトルと記事を呼び出す部分、リンクの3ブロックを作成します。
では、詳しく見ていきましょう。
見出しの作り方
このような手順で、「最近の投稿」などの見出しを作りましょう。
次に、新着記事を呼び出すブロックを作成します。
新着記事を呼び出すブロックの作り方
このような手順で、新着記事の一覧を呼び出しましょう。
ただ、このままでは表示されている新着記事しか確認することができません。
そこで、記事の一覧に飛べるリンクボタンを作ることがオススメです。
リンクボタンについて
最後に「リンクの作り方」と同様の方法で、リンクボタン「全ての記事を読む」を作りましょう。
ただ、記事の一覧を表示するためには、カテゴリーの設定に1つの注意があります。
それは、親カテゴリーを1つにまとめることです。
1つの親カテゴリーから複数の子カテゴリーに分けることで、親カテゴリーのページに全記事が表示されます。
そのため、以下のようなイメージで分岐を作りましょう。
| 親カテゴリー | 子カテゴリー |
| 全ての記事 | お知らせ |
| ブログ | |
| キャンペーン |
ちなみにですが、カテゴリーページはこちらの画像のような表示になります。
この場合、親カテゴリーの「BLOG」に全ての記事が表示されます。
そのため、「最近の投稿」のリンクボタンには親カテゴリーのURLを貼りましょう。
カテゴリーを作る
カテゴリーは、見出しと2カラムのブロックで作成します。
まずは、「見出しの作り方」を参考にし、「カテゴリー」などの見出しを作りましょう。
そして、次の手順でカテゴリーの個別リンクを作成します。
このように設定することで、画像を押すとリンク先に移動することができます。
テキストで記載しているカテゴリ名は、空欄にすると非表示にできますよ。
そのため、カテゴリ名が書かれた画像を使用すると、画像のみでリンクを並べることができます。
お知らせを作る
お知らせは指定カテゴリーの新着記事が表示できるので、目的別に表示させることが可能です。
まずは、「見出しの作り方」の手順で、「お知らせ」などの見出しを作成しましょう。
次に、下記の手順で指定カテゴリーの新着記事を呼び込みましょう。
このように設定することで、指定したカテゴリーの記事を新着順に表示できます。
お知らせだけでなく、表示したいカテゴリーごとに分けて表示させても良いですね。
よくあるご質問を作る
Q&A形式のよくあるご質問は、「見出し」「クラシック」「FAQ」「ボタン」のブロックで作ります。
まずは、「見出しの作り方」の手順で「よくあるご質問」の見出しを作成しましょう。
そして、「紹介文の作り方」を参考に、「●●に寄せらせたよくあるご質問はこちらです。」の部分を作ります。
次に、Q&Aの部分を以下の手順で作成しましょう。
このように表示したい項目を作成すると、リスト状に表示することができます。
FAQがたくさんある時は数件を入力し、別ページに一覧を作成することがおすすめです。
「リンクの作り方」で「他のFAQを見る」などのリンクボタンを作り、一覧ページへリンクしましょう。
ウィジェットを設置する
固定ページでは作成できないパーツは、フロントページにウィジェットで設置します。
ウィジェットは、「外観」の「ウィジェット」から編集できます。
そして、今回のカスタマイズで設置したウィジェットは、こちらの3つになります。
|
では、この3つのウィジェットについて解説していきます。
インパクトある紹介部分を作る
インパクトのある紹介部分は、ウィジェット「WPAW:ショーケース」で作成します。
「ホームページ下部」のエリアに追加し、作成しましょう。
このような手順で、カラフルに作成しましょう。
フォーマットは1と2で、テキストと画像の位置を反転させることができます。
複数設置する場合は、1・2・1・2のように交互に設定しましょう。
シンプルな最近の投稿を作る
シンプルな最近の投稿は、ウィジェット「WPAW:最近の投稿」で作成できます。
では、以下の手順で設置しましょう。
以上で、見出しとシンプルな新着記事が表示されます。
サムネイルを無くすと更にシンプルな仕上がりになりますね。
シンプルなカテゴリーを作る
シンプルなカテゴリーは、ウィジェットの「カテゴリー」を使用します。
詳しい作成手順は、こちらの流れになります。
以上で、シンプルなカテゴリーの一覧が表示されます。
ウィジェットを設定する時は、保存する「完了」を押し忘れないように注意しましょう。
テンプレートと設定
テンプレートと設定は、「ワードプレスでショップ公式サイト風なHPを作る手順を解説！」で解説している内容とほとんど同じです。
ただ、外観のカスタマイズは、この2つの設定が異なります。
|
では、「ワードプレスでショップ公式サイト風なHPを作る手順を解説！」と異なる設定について解説していきます。
ホームページ設定
ホームページ設定の下部にあるチェックボックスは、余白の変更を行っています。
具体的には、「ホームページのコンテンツエリアに上下余白を追加する」のチェックを外しています。
このようにすることで、画面上部の空白が無くなります。
レイアウト
レイアウトのヘッダーは、以下の設定になります。
| ヘッダーレイアウト | 1行 |
| ヘッダー位置 | 固定 |
このようにすることで、ブログ名とメニューの表示をコンパクトにできます。
また、メニュー部分は、カーソルを合わせると子メニューが表示されるプルダウン形式にすることも可能です。
プルダウンにするときはメニューの編集画面で、以下のように子メニュー位置にブロックを移動させましょう。
このように、一段右にずらした部分が子メニューとして表示されます。
まとめ
今回は、全画面トップ画像HPのカスタマイズの手順について、詳しく解説させていただきました。
主な手順は、以下の4つになります。
|
固定ページでほとんどの形が作れますが、一部はウィジェットの設置が必要となります。
ただ、定期的な画像の変更も行いやすいカスタマイズとなっています。
サイトの印象に合った画像を使用して、素敵なHPを完成させましょう。