今回はおすすめヘッダーカードの設置方法を紹介します!
おすすめヘッダーカードとはこの赤い四角で囲んであるやつです。
AFFINGER5ではヘッダー部分に4つまでおすすめのカテゴリーや記事を並べることが出来ます!
このおすすめヘッダーカードには以下の3つを設定できます。
- 背景画像
- 文字
- リンク先URL
では、設定方法を紹介します!
他のカスタイマイズ方法はこちらの記事で紹介しています。
-
-
AFFINGER5(WING)のカスタマイズまとめ!スライドショーやヘッダーメニューの設置方法など紹介
続きを見る
もくじ
【AFFINGER5】おすすめヘッダーカードの設定方法
やることは主に3つです。
- 画像のURL
- テキスト
- リンク先URL
これらの設定をしていきます!
おすすめ記事一覧を開く
AFFINGER5管理→おすすめ記事一覧をクリックします!
テキストの入力
まず「テキスト」に表示させたい文字を入力します。
ここに入力した文字はこのように表示されます。
リンク先URLの設定
リンクさせたいURLを「リンク先URL」に入力します。
ここに入力するURLは基本的に
- カテゴリーの記事一覧のURL
- 記事のURL
のどちらかになると思うので間違えないように入力して行きましょう!
ここまで来たら他に他のヘッダーカードも同様に設定しましょう!
背景画像の設定
最後に背景画像を設定します。
まず、アップロードをクリックします。
過去に使ったことがある画像を使いたいのであればメディアライブラリをクリックします。
新しい画像を使いたいのであれば「ファイルをアップロード」→「ファイルを選択」の順にクリックして使いたい画像をアップロードします。
アップロードが終わったら表示させたい画像を選択して「投稿に挿入」をクリックします。
これで設置は終わりです。
最後に左下にあるsaveをクリックするとトップページに反映されます。
このようになっていれば成功です!
最後にトップページを開いてみてリンク先がしっかりとしているか確認しましょう!
【AFFINGER5】おすすめヘッダーカードのカスタマイズ
表示方法をいくつか選ぶことが出来ます。
- サイト全体に表示にする(デフォルトはTOPのみ)
- PCに表示しない(デフォルトは表示)
- スマホ・タブレットに表示しない(デフォルトは表示)
- テキストのある背景画像をぼかす
- テキストのある背景画像を暗くする
- スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に
これらについて選択することが出来ます。
これはそれぞれの好みがあると思うのでいろいろといじってみてください!
変更した後にsaveをクリックしないと反映されないので気をつけてください!
【AFFINGER5】おすすめヘッダーカードの設定方法を紹介のまとめ
今回はAFFINGER5のおすすめヘッダーカードの設定方法を紹介しました。
ヘッダー部分はブログを訪問した人は必ず見る場所なので設定しておいて損はしないと思います。
簡単に出来るカスタイマイズなのでぜひやってみてください!
では、また次の記事で会いましょう!!