AFFINGER

【AFFINGER5】ヘッダーカードの作り方とお洒落なカスタマイズ方法

【AFFINGER5】ヘッダーカードの作り方とお洒落なカスタマイズ方法

 

こんにちは。ricoです。

 

今回はワードプレステーマ「AFFINGER5(アフィンガー5)WING」のヘッダーカードの作り方を紹介していきます。

 

ヘッダーカードは下記の画像の部分です。

 

 

当ブログで行っているヘッダーカードカスタマイズ方法についても説明していきます。

 

初心者の方でも簡単にできる設定なので安心して下さいね。

 

\購入はこちらから/

AFFINGER5公式ページ

 

AFFINGER5ヘッダーカードの作り方

AFFINGER5ヘッダーカードの作り方

 

まずAFFINGER5のヘッダーカードの基本的な作り方を説明していきます。

 

まずWordPress管理画面を開きます。

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

「おすすめヘッダーカード」が表示されます。

 

「ヘッダーカード1」~「ヘッダーカード4」まで表示されるので、「ヘッダーカード1」から設定していきます。

 

 

設定する項目は4つです。

 

ヘッダーカード:画像のURL

まずヘッダーカードに表示させたい画像を挿入します。

「アップロード」をクリックしてメディアから画像を選択して下さい。

画僧を選択すると自動的にURLが入力されます。

 

ヘッダーカード:テキスト

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

写真のみでテキストがいらなければ空白でもOKです。

 

ヘッダーカード:リンク先URL

ヘッダーカードのリンク先となるURLを入力します。

カテゴリページか個別記事のURLを入力する方が多いです。

 

ヘッダーカード:PC・モバイルの表示

「PCに表示しない」「スマホ・タブレッドに表示しない」は表示させたくなければチェックを入れて下さい。

PC、スマホ・タブレッドどちらも表示させる場合は空白のままでOKです。

 

ヘッダーカード:枚数の設定

ヘッダーカードは1~4枚まで設置することができます。

表示させたい枚数分の「ヘッダーカード1」~「ヘッダーカード4」を同じように設定していきましょう。

 

最後に画面下部の「save」をクリックして保存すれば完成です。

 

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

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

 

次にAFFINGER5ヘッダーカードのカスタマイズ方法を説明していきます。

 

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

・ヘッダーカードの画像表示デザイン

・スマホ閲覧時ヘッダーカードの画像表示の高さ

 

1つずつ説明していきます。

 

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

ヘッダーカードはデフォルトの設定では、TOPページしか表示されません。

 

 

TOPページだけでなく、カテゴリーページや個別記事にもヘッダーカードを表示させたい場合はチェックを入れましょう。

 

参考までに、当サイトはチェックは入れてません。

 

ヘッダーカードの画像表示デザイン

デザインの項目で、ヘッダーカードの画像表示を3つから選択することができます。

 

 

・デフォルト

 

・テキストのある背景画像をぼかす

 

・テキストのある背景画像を暗くする

 

3つの中からお好きなデザインを選択して下さい。

デフォルトよりも、「テキストのある背景画像をぼかす」か「テキストのある背景画像を暗くする」を選択すると文字が見やすくなります。

 

スマホ閲覧時ヘッダーカードの画像表示の高さ

デザインの項目で、スマホ閲覧時にヘッダーカードの画像表示の高さを倍に設定することができます。

 

 

・チェックなし(デフォルトの高さ)

 

・チェック有り(2倍の高さ)

 

お好みの方を選択して下さい。

参考までに、当サイトはチェックなしのデフォルトの高さです。

 

AFFINGER5ヘッダーカードの当サイトのカスタマイズ

AFFINGER5ヘッダーカードの当サイトのカスタマイズ

 

最後に当サイトのヘッダーカードのカスタマイズ方法を紹介していきます。

 

ヘッダーカードに枠をつけたり、文字のフォントや色を変えたかったのでカスタマイズしました。

HTMLやCSSがわからなくても大丈夫です。

 

当サイトのヘッダーカード

下記の画像が当サイトのヘッダーカードになります。

 

設定は下記の画像の通りです。

 

画像編集ソフトで画像を作成

当サイトでは「Photo editor」で画像を作成しています。

Photo editorは無料で使用できる画像編集ソフトです。

 

 

今回デザインした内容です。

 

・画像サイズ:1200✕400

・テキスト入力

・背景色つける

・枠をつける

・初心者マークのイラストを挿入

・保存形式:JPEG

 

Photo editorで作成した画像を、AFFINGER5のヘッダーカードの画像に挿入しただけです。

 

画像サイズを「1200✕400」で作成しているため、スマホ閲覧時にヘッダーカードの画像表示の高さを倍に設定にできないので注意して下さい。

 

Photo editor以外の画像編集ソフトでも大丈夫です。

画像編集ソフトでお好みのヘッダーカードを作成してみて下さい。

 

AFFINGER5ヘッダーカードで差別化しよう

AFFINGER5ヘッダーカードで差別化しよう

 

今回はAFFINGER5のヘッダーカードの作り方を紹介しました。

 

画像編集ソフトで作成してから、ヘッダーカードに挿入すると他のサイトと差別化することができます。

HTMLやCSSがわからなくても簡単にデザインができるので作成してみて下さいね。

 

>>AFFINGER5の公式ページはこちら

 

関連記事
【初心者こそアフィンガー5】実際に使ったレビューとデメリットを公開

続きを見る

 

関連記事
【完全版】ブログ初心者が月1万円稼ぐ方法【5ステップで解説】
【完全版】ブログ初心者が月1万円稼ぐ方法【5ステップで解説】

続きを見る

 

-AFFINGER

Copyright© ricoblog , 2020 All Rights Reserved Powered by AFFINGER5.