AFFINGER5

【AFFINGER5】おすすめヘッダーカードの設定とカスタイマイズ方法を紹介!

【AFFINGER5】おすすめヘッダーカードの設定とカスタイマイズ方法を紹介!

今回はおすすめヘッダーカードの設置方法を紹介します!

 

おすすめヘッダーカードとはこの赤い四角で囲んであるやつです。

 

AFFINGER5ではヘッダー部分に4つまでおすすめのカテゴリーや記事を並べることが出来ます!

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!9

 

このおすすめヘッダーカードには以下の3つを設定できます。

  • 背景画像
  • 文字
  • リンク先URL

 

では、設定方法を紹介します!

 

他のカスタイマイズ方法はこちらの記事で紹介しています。

AFFINGER5(WING)のカスタマイズの方法を紹介!
AFFINGER5(WING)のカスタマイズまとめ!スライドショーやヘッダーメニューの設置方法など紹介

続きを見る

【AFFINGER5】おすすめヘッダーカードの設定方法

やることは主に3つです。

  • 画像のURL
  • テキスト
  • リンク先URL

これらの設定をしていきます!

 

おすすめ記事一覧を開く

AFFINGER5管理→おすすめ記事一覧をクリックします!

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!

 

テキストの入力

まず「テキスト」に表示させたい文字を入力します。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!2

 

ここに入力した文字はこのように表示されます。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!12

 

リンク先URLの設定

リンクさせたいURLを「リンク先URL」に入力します。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!3

 

ここに入力するURLは基本的に

  • カテゴリーの記事一覧のURL
  • 記事のURL

のどちらかになると思うので間違えないように入力して行きましょう!

 

ここまで来たら他に他のヘッダーカードも同様に設定しましょう!

 

背景画像の設定

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!11

最後に背景画像を設定します。

 

まず、アップロードをクリックします。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!5jpg

 

過去に使ったことがある画像を使いたいのであればメディアライブラリをクリックします。

 

新しい画像を使いたいのであれば「ファイルをアップロード」→「ファイルを選択」の順にクリックして使いたい画像をアップロードします。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!7

 

アップロードが終わったら表示させたい画像を選択して「投稿に挿入」をクリックします。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!6

 

これで設置は終わりです。

 

最後に左下にあるsaveをクリックするとトップページに反映されます。

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!8

 

 

このようになっていれば成功です!

 




【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!9

【AFFINGER5】おすすめヘッダーカードの設置方法を紹介!13


 

 

最後にトップページを開いてみてリンク先がしっかりとしているか確認しましょう!

 

【AFFINGER5】おすすめヘッダーカードのカスタマイズ

表示方法をいくつか選ぶことが出来ます。

  • サイト全体に表示にする(デフォルトはTOPのみ)
  • PCに表示しない(デフォルトは表示)
  • スマホ・タブレットに表示しない(デフォルトは表示)
  •  テキストのある背景画像をぼかす
  • テキストのある背景画像を暗くする
  •  スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に

これらについて選択することが出来ます。

 

これはそれぞれの好みがあると思うのでいろいろといじってみてください!

 

変更した後にsaveをクリックしないと反映されないので気をつけてください!

 

【AFFINGER5】おすすめヘッダーカードの設定方法を紹介のまとめ

今回はAFFINGER5のおすすめヘッダーカードの設定方法を紹介しました。

 

ヘッダー部分はブログを訪問した人は必ず見る場所なので設定しておいて損はしないと思います。

 

簡単に出来るカスタイマイズなのでぜひやってみてください!

 

では、また次の記事で会いましょう!!

-AFFINGER5

Copyright© kane blog , 2020 All Rights Reserved.