【2024年】AFFINGER6に新規に追加されていた！？便利な拡張機能の使い方「まとめてみた！」

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

AFFINGER6のアップデートにより、便利な拡張機能が追加されていました！「知らない間に…（笑）」

「記事作成・サイトの利便性・デザイン向上」に役立つ追加された拡張機能をまとめてご紹介します。

AFFINGER6の標準機能では、ページ観覧時の下スクロールによるヘッダー部分の固定表示ができませんでした（CSSで対応可能）が、2024年のアップデート（詳細略）により、標準拡張機能で実装されました。
画像ブロックのポップアップ表示やデュオトーンの機能が強化されました。
段落ブロックの枠線（プリセット）の設定に加えて、「枠の太さ・色・角丸」をスタイルで指示できるようになりました。

この記事では、次上記3つの表示イメージと使い方をご紹介します。

こんな方におすすめ！

ヘッダーナビゲーションを常にページトップに固定したい
画像ブロックをオシャレに拡大表示したい
段落ブロックに「枠線・色・角丸」を付けたい
AFFINGER6の最新拡張機能を知りたい

この記事でわかること！

ヘッダーナビゲーション（PC）を固定する
「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する（※EX版限定）
画像ブロックのポップアップ（popup）機能
画像ブロックのスタイル設定：フィルター（デュオトーン）機能
段落ブロックの「枠線の太さ・色・角丸」が自由自在
まとめ！

それではご覧ください！

当サイトでは、以下の有料 WordPressテーマ『AFFINGER6』を使用しています。
初心者さんでも安心！稼ぐために必要な機能満載です。

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

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

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

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

ヘッダーナビゲーション（PC）を固定する

「ヘッダーナビゲーション（PC）を固定する」（2024/03/14）が、公開されています。

ヘッダーナビゲーション（PC）を固定する（公式サイト）

以前は、CSS等でしか処理できなかった機能ですが…標準装備されました！

分かりやすく表現すると…

「ページを下スクロールしてヘッダー部分が隠れると、上部にヘッダーナビゲーション（PC）が新たに表示され固定される」拡張機能です。「筆者はこの手のカスタマイズが大好きです。（笑）」

表示イメージはこんな感じです。

ヘッダーナビゲーション（PC）を固定する：イメージ

ページトップ位置

下スクロール位置

設定手順：カスタマイザー

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

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

表示パターンの設定を行います。

べッダーナビゲーション→

パソコン（P C）→

表示パターン

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する（※EX版限定）

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する（2024/03/14）が、公開されています。
（※EX版限定）

「PCヘッダーメニュー」「ヘッダーインフォメーション」を固定する（公式ページ）

AFFINGER6-STD と同様ですが、ヘッダーに固定できる項目が多くなっています。

AFFINGER6では「ヘッダーナビゲーション（PC）」のみに対して、「ヘッダーナビゲーション（PC）」「PCヘッダーメニュー」「ヘッダーインフォメーション」の3項目が選択できます。

❶ 表示イメージはこんな感じです。

❶ ヘッダーナビゲーション（PC）を固定する：イメージ

ページトップ位置

下スクロール位置

❷ 表示イメージはこんな感じです。

❷ PCヘッダーメニューを固定する：イメージ

ページトップ位置

下スクロール位置

❸ 表示イメージはこんな感じです。

❸ ヘッダーインフォメーションを固定する：イメージ

ページトップ位置

下スクロール位置

設定手順：カスタマイザー（※EX版限定）

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

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

表示パターンの設定を行います。

べッダーナビゲーション→

パソコン（P C）→

表示パターン

固定項目の設定箇所：補足

各セクションで、メニューやテキストなどを設定して準備します。

ヘッダーナビゲーション（右※PCのみ）

『WordPress管理＞ダッシュボード＞外観＞ウィジェット＞ヘッダーナビゲーション（右※PCのみ）』で設定します。

ヘッダーインフォメーション（※EX版限定）

『WordPress管理＞ダッシュボード＞外観＞ウィジェット＞ヘッダーインフォメーション』で設定します。

ヘッダーメニュー（※EX版限定）

『WordPress管理＞ダッシュボード＞外観＞メニュー』で設定します。

参考AFFINGER6のメーニューに関連する記事はこちらでご覧いただけます。

: AFFINGER6 カスタマイズ！メインカラーとデザイン＆メニュー編
AFFINGER6をインストールしたけど、どこからカスタマイズすれば良く解らないという方必見です。インストール直後の画面から「サイト全体のデザイン」や「メニュー」等、AFFINGER6標準のテンプレート機能を使って簡単デザイン！カスタマイズ手順をご紹介。