AFFINGER6ヘッダーカード最適サイズの設定とカスタマイズ

ヘッダーカード

こんにちはおとちゃんです!
AFFINGER6のサイトでよく見るこの「ヘッダーメニュー」を作りたい!

 

これです。作っていきましょう。

 

この記事で紹介していること

  • AFFINGER6のヘッダーカードサイズ
  • ヘッダーカードの作り方
  • 設定とカスタマイズ

 

現役パソコンインストラクターです。AFFINGER5から使っていますが「ヘッダーメニュー」は使いやすいメニューが簡単に設定できるのでおすすめです。アクセス数アップにつながるかも!?

 

 

 

AFFINGER6のヘッダーカードサイズ

ヘッダーカード

おすすめの画像サイズは「240×64」です。または「1200×630」。

設定する前に素材を用意しましょう。

 

自分のサイトでは「PageSpeed Insights」で画像サイズを変更するようにおすすめされたので、「240×64」に修正しました。

 

 

最初に自分のサイトでも設定した後に変更してサイトスピードをチェックして修正してみてくださいね。

まずはどちらのサイズでも良いので作成していきましょう。

 

次にヘッダーカードの作成の手順を簡単に紹介していきます。

 

 

ヘッダーカードの作り方

作り方は色々ありますが、2パターン紹介します。

 

PowerPointで作成

1つ目、PowerPoint(私もこれ)

 

用紙サイズを決めて画像や文字など配置するだけでOK!

デザイン ⇒ スライドサイズ ⇒ ユーザー設定のスライドのサイズ

PP作成1

 

幅【240cm】 高さ【64㎝】

※pxで入力したい場合は【1200px】など単位も入力すれば自動でcm単位に調整してくれます。

 

PP作成2

 

 

サイズに合わせて調整

PP作成4

あとは用紙のサイズに合うように画像を配置・トリミングしましょう。

 

 

Canvaで作成

2つ目は、「Canva

ログイン ⇒ デザインを作成 ⇒ カスタマイズ

canva1

 

作成したいサイズを入力 ⇒ 新しいデザインを作成

canva2

 

あとは画像や文字など好きにデザインしてダウンロードで完成です。

次はいよいよヘッダーカードの設置方法とカスタマイズを紹介します。

 

 

設定とカスタマイズ

manual

ここではヘッダーカードの設置方法とカスタマイズの違いを紹介していきます。

まずは設定したいサイトにログインしましょう。

 

ヘッダーカードの設置

AFFINGER管理 ⇒ ヘッダー下/おすすめ ⇒ ヘッダーカード

ヘッダーカード設定1

 

アップロード設定したい画像をアップ
テキスト上がカードに表示するメインの文字。下がサブタイトルの文字。
リンク先URLカードをクリックした時のリンク先を設定。

 

ジャンプさせたい記事やカテゴリページなどのリンクをコピペしましょう。

 

カスタマイズ

納得した人

ここからはヘッダーカードで出来る設定について紹介します。

 

サイト全体に表示する(デフォルトはTOPのみ)

ヘッダーカードの設定

サイトのTOPにだけ表示させるか全てのページでも表示させるかを選択できます。おすすめはくどくならないようにTOPのみのが良いです。(チェックなし)

 

PCに表示しない・スマホ・タブレットに表示しない

ヘッダーカードの設定2

表示させたくない場合はチェックします。例えばPCでは表示させてスマホやタブレットは表示させないなど指定が出来ます。

 

デザイン

ヘッダーカード設定3

デフォルト

ヘッダーデフォルト

最初の状態。(私はこれを使用しています。)

 

 

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

ヘッダーぼかし

後ろの画像がばやけて文字が見えやすくなります。

 

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

ヘッダー暗く

画像が暗くなり文字が見えやすくなります。

 

 

角丸にする

角が丸くなりかわいい印象になります。

 

スマホ閲覧時(959px以下)のおすすめヘッダーカードの高さを倍に

設定OFF(チェックなし)

ヘッダーカードスマホ①

設定ON(チェックあり)

ヘッダーカードスマホ②

スマホで見た時のヘッダーカードが少し大きくなります。

 

ヘッダーカードの設定がいじられるのほ以上の内容です。

メニュー1番下にある「Save」で保存して変更をチェックしながら好みにあったヘッダーカードを作りましょう。

 

 

ヘッダーカードの設定まとめ

OKしている人いかがでしたか。色々な方のサイトを見て思いますが、AFFINGERを使っている方で「ヘッダーカード」の設定をやっている人は比較的多い印象があります。

私もそうですが、使いやすいし自分の好きなページを紹介もしやすいので、とてもおすすめな設定です。

 

AFFINGERやブログの事など他にもいろいろ記事を書いていますので、興味のある方は是非ご覧ください。

ボックスメニューの作り方と設定

BLOG

2022/3/28

【AFFINGER6】簡単なボックスメニューの使い方と設定方法

こんにちはおとちゃんです! よくサイトで見かける「ボックスメニュー」ってどうやって作るの?     これの作り方の解説をします。 画像のボックスメニュー WEBアイコンのボックスメニュー     この記事で紹介していること ボックスメニューの種類と設定 画像とWEBアイコンでのメニューの作り方 おすすめの素材とカラーコードサイト サイドバーの設定方法   現役パソコンインストラクターです。AFFINGER6でブログやっています。使いやすく見た目もおしゃれな ...

ReadMore

ヘッダーカードの設定とカスタマイズ

BLOG

2022/3/15

AFFINGER6ヘッダーカード最適サイズの設定とカスタマイズ

こんにちはおとちゃんです! AFFINGER6のサイトでよく見るこの「ヘッダーメニュー」を作りたい!   これです。作っていきましょう。   この記事で紹介していること AFFINGER6のヘッダーカードサイズ ヘッダーカードの作り方 設定とカスタマイズ   現役パソコンインストラクターです。AFFINGER5から使っていますが「ヘッダーメニュー」は使いやすいメニューが簡単に設定できるのでおすすめです。アクセス数アップにつながるかも!?     &nbsp ...

ReadMore

RankTrackerの導入と設定

BLOG

2022/2/17

RankTrackerの設定手順を画像付きで導入から使うまで解説!

  こんにちはおとちゃんです! ブロガーの強い味方「RankTracker」!まだ使っていない人は必見!!   こんな方におすすめ ブログを始めたい。 始めたけど全然アクセス数が増えない。 検索上位がなかなか取れない。   この記事ではSEO検索順位ツールのRankTrackerを導入と設定をして自分のサイトを上位にすることが出来るようになります!私自身も導入してからキーワードを見直して検索ランキング1位をたくさん取得できていますのでおすすめですよ!   &nbsp ...

ReadMore

ドメインパワーアップ・ペライチで被リンク設定

BLOG

2022/1/30

被リンクとは?調べ方と増やす方法とペライチでドメインパワー対策

  こんにちはおとちゃんです! ブログをやっているけど被リンクの意味もメリットもよくわからないし、どうやって増やしたら良いかわからない。   こんな悩みを解決していきます。   この記事で紹介していること 被リンクの意味と効果 被リンクとドメインパワーの調べ方 ペライチの登録とリンク設定   現役パソコンインストラクターです。今回はSEO対策としてよく使われる被リンクについてです。わかりやすくその意味からペライチを使用して被リンクの設定を図解で説明していきます。一緒 ...

ReadMore

グーグルキーワードプランナー使い方

BLOG

2022/2/9

【2021年最新】Googleキーワードプランナーの無料登録と実際の使い方

こんにちはおとちゃんです! キーワードプランナーってどんなツールなの?登録の方法と使い方を知りたい!   こんな悩みを解決します。     この記事で紹介していること キーワードプランナーとは? キーワードプランナーの登録方法 実際の使い方とキーワード選定   仕事でパソコンを教えている現役講師です。わかりやすく為になる内容をモットーに記事を作成しています。 参考になればうれしいです。   Googleキーワードプランナーは無料でキーワード選定に使える超便 ...

ReadMore

アナリティクス・サーチコンソールの解説

BLOG Wordpress

2022/1/30

【2021年最新】無料アクセス解析|アナリティクスとサーチコンソールの設定と連携

  こんにちはおとちゃんです! ブログを開設したらGoogleの分析ツールを設定した方が良いと言われたけど、その方法を知りたい   そんな悩みを解決します。   この記事で紹介していること アナリティクスとサーチコンソールの違い アナリティクス・サーチコンソールの設定 すべての連携   WordPressでサイトを開設したらすぐにでもやっておきたい設定になります。 すべて無料でできる内容です   仕事でパソコン講師をしています。WordPressのブログ開 ...

ReadMore

おすすめの副業・ブログの始め方の解説

BLOG

2022/1/30

初心者向け|ブログでアフィリエイトのおすすめな始め方

こんにちはおとちゃんです! ブログやアフィリエイトを始めたいけどよくわからない。初めてでも失敗しないように内容や手順をわかりやすく解説していきます。     この記事で紹介していること ブログサービスの種類 アフィリエイトの仕組み ブログの始め方 ブログ開設後にやること ブログを収益化するためのステップ   現役パソコンインストラクターです。ブログ運営のお手伝いをしています。知識がなくても出来るような分かりやすい説明を心掛けていますので、参考になればうれしいです。 &nbsp ...

ReadMore

 

 

 

スポンサーリンク

  • この記事を書いた人

おとちゃん

現役のパソコンインストラクターです。 ブログと家族を愛する1児のパパで、趣味はパソコン・DIY・YOUTUBE鑑賞などです。 役立つ情報を発信していますのでゆっくりしていってください。