ブログのこと

【初めてのAFFINGER6】簡単!ヘッダーカードの設定方法

ブログを始めて3週間が経ちました。

始めた当初からトップページで一番作ってみたかったのが、ヘッダーカードです。

最初は名前も分からずどうやって調べたらいいのかも分からず苦戦して、やっとヘッダーカードという名前にたどり着きました。

そして早速設定をしてみたら意外と簡単にできたので忘備録として記録に残したいと思います。

WordPressテーマ 「ACTION(AFFINGER6)」

ヘッダーカードとは

下のような赤枠の中のようなデザインのものです。

ヘッダーカードがあるとやっぱりブログの印象も変わってきますよね。

ヘッダーカードの設定方法

AFFINGER管理へ

まずはWordPressの管理画面からAFFINGER管理を選択します

次にヘッダー下/おすすめを選びます

するとこんなふうにヘッダーカードの設定画面が出てきます

おすすめヘッダーカードの設定

アップロードを選択して、メディアからヘッダーカードにしたい画像を選びます

次にテキスト欄にヘッダーカードに表示させたい言葉を入力します

(記入しなくても大丈夫です)

そしてヘッダーカードをクリックした時に

移動させたい記事やカテゴリのURLを貼り付けます

(URLは自分で表示したいページへ行き、そこの上のURL欄をコピーすればOK)

最後に必ず下にあるsaveをクリックして下さい(忘れると消えてしまいます)

以上で終了です。

こんな感じで2つ入れれば2個のヘッダーカードが表示され、4つなら4個のヘッダーカードが表示されます。

ヘッダーカードのカスタマイズ方法

ヘッダーカードをサイト全体に表示する

ここにチェックを入れるとトップページだけでなく、記事のページでもヘッダーカードが表示されるようになります

デザイン設定

背景デザインの設定

テキストのある背景をぼかすを選ぶとこんな感じになります↓

テキストのある背景を暗くするを選ぶとこんな感じ↓

デフォルトはこんな感じです↓

自分のしたいデザインを選んでください

角丸にする

角丸にするにチェックを入れるとこんな感じになります↓

スマホ表示の際、倍の高さに設定

下の項目にチェックを入れるとスマートフォンで見た際にヘッダーカードが倍の大きさになります

チェックなしの場合↓

チェック有りの場合↓

こんな感じで

使いたい画像やリンクさせたいページが決まっていれば

とっても簡単にできますよね。

ぜひ設定してみて下さいね。

参考【初めてのAFFINGER6】簡単!Twitterカードを設定する方法

AFFINGER6はもちろん、AFFINGER5でもOK WordPressテーマ 「ACTION( ...

続きを見る

ブログランキング・にほんブログ村へにほんブログ村

-ブログのこと
-, , ,