【サイト上部ヘッダー】の設定③

くにみつ

ではヘッダー部分の最後ですね。
今回設定するのは以下の2箇所。
メインビジュアルと記事スライダーを設定していきましょう。

今回設定する2箇所
  1. キャッチコピー
  2. ロゴ
  3. SNSアイコン
  4. ナビゲーション
  5. メインビジュアル
  6. 記事スライダー
ヘッダー構成図
メインビジュアルと記事スライダーを設定していきましょう。
目次

サイト上部ヘッダーの設定

⑤メインビジュアル

くにみつ

はい、ではメインビジュアルを見ていきましょう。
ここに力を入れましょう。訴求力のある画像や動画を埋め込んでホームページを訪れた方が他のサイトに行かないようにしっかり興味づけを行いましょう。

がんばりますさん

画像を探したいという方は以下を参考になさってください^^

あわせて読みたい
【2022年度版】画像素材サイト10選(デザイナー厳選) デザインする時にやはり悩むのが画像。もちろん撮影するのが一番いいでしょうが予算がない、素材がない、時間がない、といろんな理由があって用意されている画像を使い...

ではいつも通り

「外観」 →「カスタマイズ」

「外観」 →「カスタマイズ」

「トップページ」

「トップページ」

「メインビジュアル」

「メインビジュアル」

ここで「メインビジュアル」の細かい設定を行います。

ここで「メインビジュアル」の細かい設定を行います。

メインビジュアルの表示内容

表示しない

メインビジュアルを表示させない場合はこちらを選択しましょう。

画像

メインビジュアルに画像を表示させたい場合はこちらを選択します。

表示設定

メインビジュアルの高さ設定

  • 画像・動画サイズのまま
  • コンテンツに応じる
  • 数値で指定する
  • ウィンドウサイズにフィットさせる

上記の4つがあるので、各自選択して、どのように表示されるか試してみてください。
一番お気に入りの表示方法を選びましょう。

フィルター処理

  • なし
  • ブラー
  • グレースケール
  • ドット
  • ブラシ

こちらはメインビジュアルに効果を付ける事ができます。
こちらもお好みで5種類から選びましょう。

オーバーレイカラー

こちらはメインビジュアルの上に色(カラー)を乗せる事ができます。
すぐ下にある「オーバレイカラーの不透明度(CSSの opacity プロパティの値)」と合わせて使用してみましょう。
※元の状態に戻すには「デフォルト」をクリックしてください。

画像スライダー設定

画像スライダー設定

こちらはその下の「各スライドの設定」から画像を2枚以上設定すると細かい設定が表示されます。

◯スライダーを2枚登録した状態
スライダーの切り替わり速度などスライダーに関する調整が可能となります。

各スライドの設定

スライド[1]

「スライド画像」にPC用とSP用(スマートフォン)の画像を設定しましょう。

PC用は横長。SP用は縦長の画像を用意すると綺麗に表示されます。
※PCの画像のままでも問題はありませんが、スマホでは小さくて見えにくくなる可能性があります。

※スライドは最大5枚まで設定可能です。

メインテキスト[1]、サブテキスト[1]にキャッチコピーを入れましょう。

右のプレビュー画面を確認しながら入力してください。

メインテキストは文字が大きく表示され、サブテキストは文字が小さく表示されます。
※必ずしもテキストを入力しないといけない訳ではありません。

「リンク先URL」に移動させる「ボタン」を設置する事も可能です。

「リンク先URL」や「ボタンテキスト」に内容を入力するとボタンが表示されます。

その他、キャッチコピーやテキストの色、ボタンカラーなどが設定可能です。

動画

動画も画像と操作方法は同じですので、画像を参考になさってください。

⑥記事スライダー

くにみつ

では次は記事スライダーを見てみましょう。
記事スライダーは新着記事やピックアップ記事など、特にいち早く見てほしい投稿記事を見てもらえやすくする機能です。

記事スライダー部分
記事スライダー部分

外観 → カスタマイズ

外観 → カスタマイズ
外観 → カスタマイズ

トップページをクリック。

トップページをクリック。
トップページをクリック。

記事スライダーをクリック。

記事スライダーをクリック。
記事スライダーをクリック。

こちらで記事スライダーの設定が可能です。

こちらで記事スライダーの設定が可能です。

「ピックアップ対象」の所で「カテゴリー」と「タグ」を選択する事が可能です。
ここでは「カテゴリー」をクリックしてください。

「ピックアップ対象」の所で「カテゴリー」と「タグ」を選択する事が可能です。
ここでは「カテゴリー」をクリックしてください。
「ピックアップ対象」の所で「カテゴリー」と「タグ」を選択する事が可能です。
ここでは「カテゴリー」をクリックしてください。
記事のピックアップ方法

ここではどのカテゴリーを記事スライダーに表示するかの設定が可能です。

表示したいカテゴリーを「ピックアップ対象のカテゴリーID」の中に入れましょう。
全て表示する場合は空白で問題ありません。

表示したいカテゴリーを「ピックアップ対象のカテゴリーID」の中に入れましょう。
がんばりますさん

カテゴリーの作成方法がわからない場合は以下を参考にしてください。

あわせて読みたい
カテゴリー作成方法 今回はカテゴリーの作成方法です。カテゴリーを作っておくと日々投稿するブログ記事などがグルーピング可能となります。 例えば料理ブログをされている方が料理の作り方...

ピックアップ対象のカテゴリーIDの確認方法

左のメニューの「投稿」→「カテゴリー」から
作成したカテゴリー名の横に「ID」という数字があります。
これがカテゴリーIDです。

左のメニューの「投稿」→「カテゴリー」から
作成したカテゴリー名の横に「ID」という数字があります。
これがカテゴリーIDですね。
左のメニューの「投稿」→「カテゴリー」から
作成したカテゴリー名の横に「ID」という数字があります。
これがカテゴリーIDです。
くにみつ

記事スライダーに「お知らせ」を表示させたい場合は「1」を。
「ピックアップ」を表示させたい場合は「4」を。
複数表示させたい場合は「,」で区切ってください。
例)1,4 ←これで「お知らせ」と「ピックアップ」が表示されます。

並び順

記事スライダーの表示順序を指定できます。お好みで指定しましょう。

記事スライダーの表示順序を指定できます。お好みで指定しましょう。
記事スライダーの表示順序を指定できます。お好みで指定しましょう。
記事の表示設定
くにみつ

記事の表示設定はプレビューを見ながら確認したり、実際公開後にもいろいろ変更しても問題ないので、お好みで設定してみてください。

タイトルや日付などの表示位置

カテゴリー表示位置

日付の表示設定

著者の表示設定

くにみつ

残りの「スライド設定」と「その他の表示設定」もお好みですね^^

記事スライダーで大切なのはどのカテゴリーに属する記事を表示させるかなので、いろいろ試してください。全ての記事を表示させるのか、それともピックアップ記事を表示させるのか。ですね。

よかったらシェアしてね!
  • URLをコピーしました!
目次