AFFINGERを使ってるんだけどヘッダーカードの使い方を教えてほしい
こんな悩みに答えます。
本記事の内容
- AFFINGERのヘッダーカードの機能の説明
- ヘッダーカードの設定方法
この記事ではヘッダーカードの種類と設定方法を解説していきます。
この記事を書いている人
ヘッダーカードとは、ブログのトップページでよく見かけるカード型の画像リンク機能です。
画像のようにヘッダーカードは目立つので読んで欲しい記事やカテゴリーなど好きなURLを設定して誘導するのにとても便利な機能です。
実はAFFINGERでもヘッダーカードを、編集したサムネイル風の画像を設定できることがあまり知られてないみたいです。
この記事を読めばその設定方法も解説しています。
トップページの見た目もオシャレになるのでぜひ使ってみてください。
それではAFFINGERのヘッダーカードの機能と設定方法を解説していきます。
おすすめ
【当サイト使用Word Pressテーマ】
AFFINGER6
「稼ぐ」に特化した本格Word Pressテーマ
【AFFINGER6はここからでOK！】
【期間限定】すごいもくじ（ライト）がもらえる！
関連記事
AFFINGERのヘッダーカードの機能の説明
AFFINGERのヘッダーカードには、主に次のような表示機能があります。
- 最大で4枚のカードが設置可能
- 4種類の表示パターンでテキスト入力ができる。
- 記事ページやスマホ・タブレットへの表示設定ができる。
完成するとこのようになります。
これらの設定はすべて１箇所で設定できて簡単なのでぜひ使ってみましょう。
それでは設定の仕方を解説していきます。
ヘッダーカードの設定方法
ヘッダーカードの設定①設定前に準備しておきたいもの
それではこれから設定していきますが、その前に次のものを準備しておいたほうが設定がスムーズなので準備しておきましょう。
準備しておくもといいもの
- ヘッダーカードに使う画像
- リンク先のURL
これら2つを先に決めておくと設定がスムーズに進むので用意しておくといいでしょう。
ヘッダーカードに使う画像は1200✕630がいいみたいですが、サムネイル画像でよく使われている1:1.91のサイズで少しサイズが小さくてもいいので画像のサイズは揃えておきましょう。
ヘッダーカードに使う画像は無料でダウンロードできるフリー素材サイトで探すと便利です。
【無料７選】タダで使えるおすすめフリー素材・画像2021年版
ヘッダーカードを画像だけにする場合はCanvaなどの無料画像編集ソフトを使いましょう。
ヘッダーカード設定方法②AFFINGER管理でヘッダーカードを設定
まずは設定画面に移りましょう。
Word Pressの管理画面から「AFFINGER管理」の「ヘッダー下/おすすめ」に進めば、「ヘッダーカード」の設定項目があります。
AFFINGER5の場合は「AFFINGER管理」 → 「おすすめ記事一覧」 → 「ヘッダーカード」になります。
画像のURL
画像のURLを直接入力するか「アップロード」から画像を選択します。
※アップロードから画像を選択した時点では画像は表示されませんが１度「保存」をクリックすると表示されます。
テキスト
表示させたいテキストを入力します。
※文字数はなるべく少ないほうがいいです。
リンク先URL
読んで欲しい記事やサイトなど好きなリンク先のURLをクリックします。
PCまたはスマホ・タブレットに表示させたくなければチェックをいれます。
※ヘッダーカードを記事ページなど全体に表示させたい場合は「サイト全体に表示する」にチェックを入れましょう。
上記の設定ができればデザインの設定をしていきましょう。
ヘッダーカード設定方法③ヘッダーカードのデザイン設定
表示させたい画像のデザイン項目にチェックをいれます。
「テキストのある背景画像をぼかす」にチェックを入れた場合。
「テキストのある背景画像を暗くする」にチェックを入れた場合。
「デフォルト」にチェックを入れた場合。
ヘッダーカード設定でテキスト入力欄を空白にした場合。
「角丸にする」にチェックを入れた場合。
最後のスマホ閲覧時の高さを倍にするにチェックはお好みでいいですが、個人的にはスマホで画像を大きくしてしまうと目立ちすぎるのでおすすめはしません。
これで設定は以上です。
