Customize AFFINGER

AFFINGER6 カスタマイズ【ヘッダー画像設定▶︎AFFINGER管理から行うパターン】超基本形!

当ページのリンクには広告が含まれています。

AFFINGER6 カスタマイズ【ヘッダー画像設定▶️AFFINGER管理から行うパターン】

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6のカスタマイズでAFFINGER管理画面から行う「ヘッダー画像設定」を初心者さん向けにご紹介します。

AFFINGER6管理画面とカスタマイザーでの作業になります。

AFFINGER6に標準装備されている基本的な「ヘッダー画像設定」なので初心者さんでも安心ですよ。

ヘッダーに画像を表示させてカッコ良くしちゃいましょう。^^/

こんな方におすすめ!

  • ブログ初心者
  • WordPressテーマAFFINGER6を使っている。
  • トップページをカッコよくしたい!(笑)

この記事でわかること!

  • ヘッダー画像設定(AFFINGER管理画面)
    1. AFFINGER管理画面を表示
    2. ヘッダー画像設定
  • ヘッダー画像設定(カスタマイザー)
    1. カスタマイザー起動
    2. ヘッダー画像のベース画像を選択及び各種設定
    3. ヘッダー画像のベース画像を選択の手順
    4. ヘッダー画像用に切り抜き(AFFINGER管理のヘッダー画像設定|トリミングの設定値)
    5. カスタマイザーを公開
  • まとめ!

それではご覧ください!

こんな感じです。

ヘッダー画像(固定)1画像登録

ヘッダー画像(固定)イメージ

ヘッダー画像(スライドショー)2画像以上登録

ヘッダー画像(スライダー)イメージ

※ 「サイト名(サイトロゴ)・キャッチフレーズ等」サイト情報の下側に画像が設置できます。

AFFINGER6なら簡単にできちゃいます!

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

ヘッダー画像設定(AFFINGER管理画面)

AFFINGER管理画面でヘッダー画像設定をするのですが…その前に以下を確認してください。

※ 本記事の設定では『AFFINGER管理』のメニューを編集します。

ロリポップレンタルサーバーをお使いの方は、ドメインの『WAFの設定』を一時的に無効 にしてください。◀︎『403 Error』が出た場合。

AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!
AFFINGER6&ロリポップ!レンタルサーバー『403 Error』が出た時の対処方法!

ロリポップ!レンタルサーバーを使用してAFFINGER6(ACTION)のヘッダー等の表示系をカスタマイズするとセーブ時に『403 Error』が表示されセーブできない! こんな時はロリポップユーザー専用ページにログインしてWAFの設定を無効にするだけ!

AFFINGER管理画面を表示

AFFINGER管理画面を開いて詳細メニューへ進みます。

『WordPress管理>ダッシュボード>AFFINGER管理>ヘッダー>ヘッダー画像設定』をクリックします。

AFFINGER管理:ヘッダー
yajirusi-sita-80x40

下側に自動スクロールされ 以下の画面が表示されます。

AFFINGER6:ヘッダー|ヘッダー画像設定

※ この画面の項目を設定します。

ヘッダー画像設定

この章では、ヘッダー画像設定の各設定項目をご紹介します。

設定項目

  • トリミング(px)
  • ヘッダー画像のリンク先URL:
  • スライドショー設定

それでは順番に見ていきましょう。

トリミング(px)

『トリミング(px)』とは、ヘッダーに設定する元の画像を切り取る範囲のことです。
縦横比の異なる画像をこの設定で同じサイズに切り抜いて合わることができます。

画像が表示される大きさ

ここで設定したトリミング量が、カスタマイザーの『ヘッダー画像』設定時の切り抜き寸法になります。

  • 幅:2200(推進)
  • 高さ:500(推進)

※ カスタマイザー側で『ヘッダー画像の横幅を100%にする』設定ができるので画像の収まり方に問題なければここまで大きくなくても大丈夫です。
サンプルでは、元の画像に2200幅と1200幅を混用していますがトリミングすれは問題ありません。
(同じ大きさで表示されます!)

『トリミング(px)』の設定は以下の赤枠部分です。

AFFINGER6:ヘッダー|ヘッダー画像設定|トリミング(px)

トリミング(px)の設定値が適応される場所は、以下の『画像切り抜き』の部分です。

カスタマイザーでヘッダー画像に新規画像を追加すると以下のような画像切り抜き領域が表示されます。
(詳細手順は後述します。)

カスタマイザー:ヘッダー画像新規追加|切り抜き
カスタマイズ:ヘッダー画像|画像切り抜き

ヘッダー画像のリンク先URL:

『ヘッダー画像のリンク先URL:』とは、ヘッダー画像をクリックしたときに指定先のリンクに飛ぶ設定のことです。
(誘導・ガイドに使用します)

『ヘッダー画像のリンク先URL:』の設定は以下の赤枠部分です。

AFFINGER6:ヘッダー|ヘッダー画像設定|ヘッダー画像のリンク先URL:

スライドショー設定

『スライドショー設定』とは、複数のヘッダー画像を設定した場合に有効で、ヘッダー画像を特定の時間ごとに順次切り替えながら表示させる設定のことです。
(表示速度があまり速いと落ち着きません)笑/

『スライドショー設定』の設定は以下の赤枠部分です。

AFFINGER6:ヘッダー|ヘッダー画像設定|スライドショー設定
yajirusi-sita-80x40

すべての設定が完了したら『Save』をクリックします。

すべての設定が完了したら『Save』をクリック

表示に優先順位があります!

表示優先度:記事スライドショー設定 > ヘッダーコンテンツ設定 > ヘッダー画像エリアのウィジェット > ヘッダー画像(画像スライドショー)

※ヘッダー画像エリアにはヘッダー画像の他に、ヘッダーコンテンツ、ヘッダー画像エリアのウィジェット、記事スライドショーの何れかを挿入できます。複数設定された場合の優先度は上記のとおりです。

「ヘッダーコンテンツ設定・記事スライドショー設定」は、スライドショー設定より優先されます。「ヘッダーコンテンツ設定・記事スライドショー設定」を有効にしていると、スライドショー設定は無効になります。

以上で、AFFINGER管理画面での設定は完了しました。

続いて、カスタマイザーからヘッダー画像を設定します。

ヘッダー画像設定(カスタマイザー)

ヘッダー画像設定(カスタマイザー)では、AFFINGER管理で行った設定のベースとなる画像を選択・追加します。

手順は以下の通りです。

  1. カスタマイザー起動
  2. ヘッダー画像のベース画像を選択及び各種設定
  3. ヘッダー画像用に切り抜き(AFFINGER管理のヘッダー画像設定|トリミングの設定値)
  4. 複数枚の場合は「2・3」項を繰り返し
  5. カスタマイザーを公開

それでは順番に見ていきましょう。

カスタマイザー起動

まず、カスタマイザーを起動します。

『WordPress管理>ダッシュボード>外観>カスタマイズ>ヘッダー画像』をクリックします。

WordPress管理:外観|カスタマイズ

ヘッダー画像のベース画像を選択及び各種設定

ヘッダー画像詳細メニューが表示されます。

画像を選択する前に各種設定をして置くと良いです。おすすめ設定箇所は以下のようになります。

カスタマイズ:ヘッダー画像

ヘッダー画像

『新規画像を追加』手順はこちら

ヘッダー画像の横幅を100%にする:チェックON おすすめ!

※ 空白部分は任意で設定してください。筆者的にはデフォルトで良いと思います。画像に合わせた高さ調整は微調整が必要かと…

背景画像を繰り返さない:チェックOFF おすすめ!

背景画像を幅100%のレスポンシブにする:チェックON おすすめ!

『新規画像を追加』をクリックしてからの手順です。

ヘッダー画像のベース画像を選択の手順

『新規画像を追加』のボタンをクリックすると以下の画面に切り替わります。

  1. メディアライブラリーまたはファイルをダウンロードして『画像を選択』します。
  2. 『選択して切り抜く』をクリックします。
カスタマイズ:ヘッダー画像|画像を選択

補足

トリミングした画像は「cropped-」がファイル名の頭に付きメディアリブラリーに新規追加されます。

ヘッダー画像用に切り抜き(AFFINGER管理のヘッダー画像設定|トリミングの設定値)

選択された画像が表示されます。

画像の切り抜き範囲はドラッグ&ドロップで移動できます。また、輪郭をドラッグ&ドロップすると範囲の拡大縮小ができます。

画像の切り抜き範囲を決めたら『画像切り抜き』をクリックします。

カスタマイズ:ヘッダー画像|画像切り抜き

カスタマイザーを公開

カスタマイザーの画面に戻ります。

切り抜いた状態のヘッダー画像がプレビューで確認できます。

カスタマイズ:ヘッダー画像|画像切り抜き確認

ヘッダー画像を複数追加する(スライドショーで表示する)場合はここまでの手順を繰り返します。

ヘッダー画面の表示が確認できたらカスタマイザー上部の『公開』をクリックして完了です。

ヘッダー画像:カスタマイザー公開
yajirusi-sita-80x40

画像1枚を設定した場合の完成イメージです。

ヘッダー画像設定完了イメージ

以上で「ヘッダー画像設定▶︎AFFINGER管理から行うパターン」は完了です。

初心者でも安心 コスパ最強の洗練されたWordPressテーマ/

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

- 少しづつ増え続ける当サイトオリジナル特典付!-

購入方法で迷ったら…こちらで確認【特典付きを購入しよう!】

まとめ!AFFINGER6 カスタマイズ【ヘッダー画像設定▶︎AFFINGER管理から行うパターン】

AFFINGER6の標準拡張機能を使った最も基本的な「ヘッダー画像」の設定方法をご紹介しました。とても簡単なので…是非試してください。ビジュアルアップには良いと思います。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

WordPressテーマ

ACTION / AFFINGER6
コスパ最強のWordPressテーマ

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

シンプル美と機能性両立を両立させた、圧巻のWordPressテーマ

SWELL

AFFINGER6_おすすめ記事!

26239_affinger6-swell-comparison-4a 1

WordPressテーマ「AFFINGER6とSWELL」を徹底比較。現役で両方使っている筆者が「こんな人におすすめ」を解説。テーマ選びで重要視するポイントやブロックエディターとクラシックエディターに関する注意点等、中立の立ち位置でご紹介。

19298_affinger6-honest-review-2a 2

AFFINGER6とAFFINGER6EXの両方を使って3年目の本音レビューをご紹介。初心者が使った場合のメリットとデメリットを徹底解説。有料テーマをはじめて使う初心者の不安を解決!ブログ収益を加速させるオリジナル特典をご用意しました。

3969_affinger6-how-to-buy-2 3

WordPressテーマACTION(AFFINGER6)のおすすめ購入方法を初心者目線でご紹介。また購入後のダウンロードからインストールまでの手順を全画像付きで丁寧に解説。初心者が迷子にならない為の公式サイトの検索手順と注意事項もご紹介します。

15446_AFFINGER6-how-to-use-tag-ma-1 4

AFFINGERタグ管理マネージャー4 ver4.1.1が2022/9/21にアップデートされ大幅に使いやすくなりました!表示機能も強化されグッと見やすなったリンク計測の表示など、アップデートの手順から広告用タグの作り方まで一気にご紹介します。

-Customize AFFINGER
-