blog ブログ運営 アフィリエイト AFFINGER
ブログ運営
アフィリエイト
AFFINGER
okinawa 沖縄移住 転職
沖縄移住
travel マルタ
マルタ
HOME >
blog >
AFFINGER >
2021年1月21日
Share
Hatena
LINE
コピーする
こんにちは。ricoです。
今回はワードプレステーマ「 AFFINGER5（アフィンガー5）WING 」のヘッダーカードの作り方を紹介していきます。
ヘッダーカードは下記の画像の部分です。
当ブログで行っているヘッダーカードカスタマイズ方法についても説明していきます。
初心者の方でも簡単にできる設定なので安心して下さいね。
contents
AFFINGER5ヘッダーカードの作り方 ヘッダーカード：画像のURL ヘッダーカード：テキスト ヘッダーカード：リンク先URL ヘッダーカード：PC・モバイルの表示 ヘッダーカード：枚数の設定
ヘッダーカード：画像のURL
ヘッダーカード：テキスト
ヘッダーカード：リンク先URL
ヘッダーカード：PC・モバイルの表示
ヘッダーカード：枚数の設定
AFFINGER5ヘッダーカードのカスタマイズ方法 ヘッダーカードをサイト全体に表示 ヘッダーカードの画像表示デザイン スマホ閲覧時ヘッダーカードの画像表示の高さ
ヘッダーカードをサイト全体に表示
ヘッダーカードの画像表示デザイン
スマホ閲覧時ヘッダーカードの画像表示の高さ
AFFINGER5ヘッダーカードの当サイトのカスタマイズ 当サイトのヘッダーカード 画像編集ソフトで画像を作成
当サイトのヘッダーカード
画像編集ソフトで画像を作成
AFFINGER5ヘッダーカードで差別化しよう
まずAFFINGER5のヘッダーカードの基本的な作り方を説明していきます。
まずWordPress管理画面を開きます。
「AFFINGER5 管理」→「おすすめ記事一覧」をクリックします。
「おすすめヘッダーカード」が表示されます。
「ヘッダーカード１」～「ヘッダーカード４」まで表示されるので、「ヘッダーカード１」から設定していきます。
設定する項目は４つです。
まずヘッダーカードに表示させたい画像を挿入します。
「アップロード」をクリックしてメディアから画像を選択して下さい。
画僧を選択すると自動的にURLが入力されます。
次にヘッダーカードに表示させたいテキストを入力します。
写真のみでテキストがいらなければ空白でもOKです。
ヘッダーカードのリンク先となるURLを入力します。
カテゴリページか個別記事のURLを入力する方が多いです。
「PCに表示しない」「スマホ・タブレッドに表示しない」は表示させたくなければチェックを入れて下さい。
PC、スマホ・タブレッドどちらも表示させる場合は空白のままでOKです。
ヘッダーカードは１～４枚まで設置することができます。
表示させたい枚数分の「ヘッダーカード１」～「ヘッダーカード４」を同じように設定していきましょう。
最後に画面下部の「save」をクリックして保存すれば完成です。
次にAFFINGER5ヘッダーカードのカスタマイズ方法を説明していきます。
・ヘッダーカードをサイト全体に表示
・ヘッダーカードの画像表示デザイン
・スマホ閲覧時ヘッダーカードの画像表示の高さ
１つずつ説明していきます。
ヘッダーカードはデフォルトの設定では、TOPページしか表示されません。
TOPページだけでなく、カテゴリーページや個別記事にもヘッダーカードを表示させたい場合はチェックを入れましょう。
参考までに、当サイトはチェックは入れてません。
デザインの項目で、ヘッダーカードの画像表示を３つから選択することができます。
・デフォルト
・テキストのある背景画像をぼかす
・テキストのある背景画像を暗くする
３つの中からお好きなデザインを選択して下さい。
デフォルトよりも、「テキストのある背景画像をぼかす」か「テキストのある背景画像を暗くする」を選択すると文字が見やすくなります。
デザインの項目で、スマホ閲覧時にヘッダーカードの画像表示の高さを倍に設定することができます。
・チェックなし（デフォルトの高さ）
・チェック有り（２倍の高さ）
お好みの方を選択して下さい。
参考までに、当サイトはチェックなしのデフォルトの高さです。
最後に当サイトのヘッダーカードのカスタマイズ方法を紹介していきます。
ヘッダーカードに枠をつけたり、文字のフォントや色を変えたかったのでカスタマイズしました。
HTMLやCSSがわからなくても大丈夫です。
下記の画像が当サイトのヘッダーカードになります。
設定は下記の画像の通りです。
当サイトでは「 Photo editor 」で画像を作成しています。
Photo editorは無料で使用できる画像編集ソフトです。
今回デザインした内容です。
・画像サイズ：1200✕400
・テキスト入力
・背景色つける
・枠をつける
・初心者マークのイラストを挿入
・保存形式：JPEG
Photo editorで作成した画像を、AFFINGER5のヘッダーカードの画像に挿入しただけです。
画像サイズを「1200✕400」で作成しているため、スマホ閲覧時にヘッダーカードの画像表示の高さを倍に設定にできないので注意して下さい。
Photo editor以外の画像編集ソフトでも大丈夫です。
画像編集ソフトでお好みのヘッダーカードを作成してみて下さい。
今回はAFFINGER5のヘッダーカードの作り方を紹介しました。
画像編集ソフトで作成してから、ヘッダーカードに挿入すると他のサイトと差別化することができます。
HTMLやCSSがわからなくても簡単にデザインができるので作成してみて下さいね。
>> AFFINGER5の公式ページはこちら
続きを見る
- AFFINGER
author
WordPressテーマをCocoonか、AFFINGER5で迷っています。 CocoonとAFFINGER5の機能の違いを教えて欲しい。 こんなお悩みを解決していきます。 ...
アフィンガーでカエレバ・ヨメレバをオシャレに表示させたいけど、どうやってカスタマイズするの？ CSSのコピペで簡単にできる方法が知りたい。 こんなお悩みを解決してきます。 ...
WordPressテーマをCocoonからAFFINGER5に変更したいけど、何を設定したら良いの？ こんなお悩みを解決していきます。 当サイトもWordpr ...
AFFINGER ブログ運営
WordPressでブログを始めたんだけど、有料テーマってどれが良いの？ AFFINGRE5のレビューや、初心者でも使えるかが知りたい。 こんなお悩みを解決していきます。 ...
rico
ricoblog運営者。ブログ運営・沖縄移住・旅行について情報発信しています。 【経歴】埼玉県出身→理学療法士→沖縄移住4年目→フリーランス→ricoblog開設
blog (55) AFFINGER (5) アフィリエイト (16) ブログ運営 (40)
AFFINGER (5)
アフィリエイト (16)
ブログ運営 (40)
okinawa (13) 沖縄移住 (9) 転職 (4)
沖縄移住 (9)
転職 (4)
travel (5) マルタ (5)
マルタ (5)
AFFINGERレビュー記事はコチラ
お問い合わせはコチラ
よく読まれている記事
ホーム
プライバシーポリシー
サイトマップ
Copyright© ricoblog , 2023 All Rights Reserved Powered by AFFINGER5 .