![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
ではヘッダー部分の最後ですね。
今回設定するのは以下の2箇所。
メインビジュアルと記事スライダーを設定していきましょう。
- キャッチコピー
- ロゴ
- SNSアイコン
- ナビゲーション
- メインビジュアル
- 記事スライダー
![ヘッダー構成図](https://shares-hp.com/wp-content/uploads/2022/09/11-4-1024x447.jpg)
![ヘッダー構成図](https://shares-hp.com/wp-content/uploads/2022/09/11-4-1024x447.jpg)
サイト上部ヘッダーの設定
⑤メインビジュアル
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
はい、ではメインビジュアルを見ていきましょう。
ここに力を入れましょう。訴求力のある画像や動画を埋め込んでホームページを訪れた方が他のサイトに行かないようにしっかり興味づけを行いましょう。
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
画像を探したいという方は以下を参考になさってください^^
![](https://shares-hp.com/wp-content/uploads/2022/09/4-13-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/4-13-300x158.jpg)
ではいつも通り
![](https://shares-hp.com/wp-content/uploads/2022/09/1-12-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/1-12-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-14-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-14-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-8-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-8-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/4-8-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/4-8-1.jpg)
メインビジュアルの表示内容
表示しない
メインビジュアルを表示させない場合はこちらを選択しましょう。
画像
メインビジュアルに画像を表示させたい場合はこちらを選択します。
メインビジュアルの高さ設定
![](https://shares-hp.com/wp-content/uploads/2022/09/3-9.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-9.jpg)
- 画像・動画サイズのまま
- コンテンツに応じる
- 数値で指定する
- ウィンドウサイズにフィットさせる
フィルター処理
![](https://shares-hp.com/wp-content/uploads/2022/09/5-8.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/5-8.jpg)
- なし
- ブラー
- グレースケール
- ドット
- ブラシ
オーバーレイカラー
![](https://shares-hp.com/wp-content/uploads/2022/09/6-4.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/6-4.jpg)
画像スライダー設定
![](https://shares-hp.com/wp-content/uploads/2022/09/6-5-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/6-5-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/slide.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/slide.jpg)
スライド[1]
「スライド画像」にPC用とSP用(スマートフォン)の画像を設定しましょう。
![](https://shares-hp.com/wp-content/uploads/2022/09/slide2-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/slide2-1.jpg)
メインテキスト[1]、サブテキスト[1]にキャッチコピーを入れましょう。
右のプレビュー画面を確認しながら入力してください。
![](https://shares-hp.com/wp-content/uploads/2022/09/slide3.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/slide3.jpg)
「リンク先URL」に移動させる「ボタン」を設置する事も可能です。
その他、キャッチコピーやテキストの色、ボタンカラーなどが設定可能です。
![](https://shares-hp.com/wp-content/uploads/2022/09/slide3-1.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/slide3-1.jpg)
動画
動画も画像と操作方法は同じですので、画像を参考になさってください。
⑥記事スライダー
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
では次は記事スライダーを見てみましょう。
記事スライダーは新着記事やピックアップ記事など、特にいち早く見てほしい投稿記事を見てもらえやすくする機能です。
![記事スライダー部分](https://shares-hp.com/wp-content/uploads/2022/09/11-5-1024x476.jpg)
![記事スライダー部分](https://shares-hp.com/wp-content/uploads/2022/09/11-5-1024x476.jpg)
![外観 → カスタマイズ](https://shares-hp.com/wp-content/uploads/2022/09/01-1024x677.jpg)
![外観 → カスタマイズ](https://shares-hp.com/wp-content/uploads/2022/09/01-1024x677.jpg)
![トップページをクリック。](https://shares-hp.com/wp-content/uploads/2022/09/02-1024x709.jpg)
![トップページをクリック。](https://shares-hp.com/wp-content/uploads/2022/09/02-1024x709.jpg)
![記事スライダーをクリック。](https://shares-hp.com/wp-content/uploads/2022/09/03-1024x656.jpg)
![記事スライダーをクリック。](https://shares-hp.com/wp-content/uploads/2022/09/03-1024x656.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/12-2.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/12-2.jpg)
![「ピックアップ対象」の所で「カテゴリー」と「タグ」を選択する事が可能です。
ここでは「カテゴリー」をクリックしてください。](https://shares-hp.com/wp-content/uploads/2022/09/12-3.jpg)
![「ピックアップ対象」の所で「カテゴリー」と「タグ」を選択する事が可能です。
ここでは「カテゴリー」をクリックしてください。](https://shares-hp.com/wp-content/uploads/2022/09/12-3.jpg)
ここでは「カテゴリー」をクリックしてください。
表示したいカテゴリーを「ピックアップ対象のカテゴリーID」の中に入れましょう。
全て表示する場合は空白で問題ありません。
![](https://shares-hp.com/wp-content/uploads/2022/09/14-3.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/14-3.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
カテゴリーの作成方法がわからない場合は以下を参考にしてください。
![](https://shares-hp.com/wp-content/uploads/2022/09/3-13-300x158.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-13-300x158.jpg)
ピックアップ対象のカテゴリーIDの確認方法
![左のメニューの「投稿」→「カテゴリー」から
作成したカテゴリー名の横に「ID」という数字があります。
これがカテゴリーIDですね。](https://shares-hp.com/wp-content/uploads/2022/09/13-2-1024x295.jpg)
![左のメニューの「投稿」→「カテゴリー」から
作成したカテゴリー名の横に「ID」という数字があります。
これがカテゴリーIDですね。](https://shares-hp.com/wp-content/uploads/2022/09/13-2-1024x295.jpg)
作成したカテゴリー名の横に「ID」という数字があります。
これがカテゴリーIDです。
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
記事スライダーに「お知らせ」を表示させたい場合は「1」を。
「ピックアップ」を表示させたい場合は「4」を。
複数表示させたい場合は「,」で区切ってください。
例)1,4 ←これで「お知らせ」と「ピックアップ」が表示されます。
並び順
記事スライダーの表示順序を指定できます。お好みで指定しましょう。
![記事スライダーの表示順序を指定できます。お好みで指定しましょう。](https://shares-hp.com/wp-content/uploads/2022/09/14-2.jpg)
![記事スライダーの表示順序を指定できます。お好みで指定しましょう。](https://shares-hp.com/wp-content/uploads/2022/09/14-2.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
記事の表示設定はプレビューを見ながら確認したり、実際公開後にもいろいろ変更しても問題ないので、お好みで設定してみてください。
タイトルや日付などの表示位置
![](https://shares-hp.com/wp-content/uploads/2022/09/2-16.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/2-16.jpg)
カテゴリー表示位置
![](https://shares-hp.com/wp-content/uploads/2022/09/3-11.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/3-11.jpg)
日付の表示設定
著者の表示設定
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
残りの「スライド設定」と「その他の表示設定」もお好みですね^^
記事スライダーで大切なのはどのカテゴリーに属する記事を表示させるかなので、いろいろ試してください。全ての記事を表示させるのか、それともピックアップ記事を表示させるのか。ですね。