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

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

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

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

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

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

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

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

こんな方におすすめ!

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

この記事でわかること!

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

それではご覧ください!

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

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

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

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

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

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

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

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

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

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

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

ヘッダーナビゲーション(PC)を固定する:イメージ

ページトップ位置

ヘッダーナビゲーション(PC)を固定する機能を追加-1
yajirusi-sita-80x40

下スクロール位置

ヘッダーナビゲーション(PC)を固定する機能を追加-2

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

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

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

yajirusi-sita-80x40

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

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

パソコン(P C)→

表示パターン

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

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

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

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

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

ヘッダーナビゲーション(PC)を固定する:イメージ

ページトップ位置

yajirusi-sita-80x40

下スクロール位置

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

ページトップ位置

yajirusi-sita-80x40

下スクロール位置

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

ページトップ位置

yajirusi-sita-80x40

下スクロール位置

設定手順:カスタマイザー(※EX版限定)

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

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

yajirusi-sita-80x40

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

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

パソコン(P C)→

表示パターン

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

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

ヘッダーナビゲーション(右※PCのみ)

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

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

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

ヘッダーメニュー(※EX版限定)

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

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

参考になる!
基本がわかる!

画像ブロックのポップアップ(popup)機能

画像ブロックがいい感じでポップアップできるようになりました。
プラグイン:Easy FancyBoxで表示するイメージに近いです。ただし背景は白色になります。

この記事で使用している画像ブロックは「AFFINGER6標準機能でポップアップしています」

yajirusi-sita-80x40

設定方法:エディター画面(画像ツールバー)

対象の画像ブロックをクリックして、ツールバーが表示されたら、以下の手順で設定します。

  • ツールバーの『リンク』をクリックします。
  • ドロップダウンメニューが表示されたら、『クリックで拡大』をクリックします。
yajirusi-sita-80x40

ツールバーが以下のように「リンク」部分が黒く塗り潰されれば OK です。(完了)

画像ブロックのスタイル設定:フィルター(デュオトーン)機能

オリジナル画像を変えることなく貼り付けた画像ごとに色を変える機能 ▶︎ ディオトーンの機能が強化され、画像への配色変更が簡単に!オシャレに!加工できるようになりました。

「h2見出し後に表示させるイメージ画像に使うといいかもです」

設定方法:エディター画面(画像:設定>スタイル)

対象の画像ブロックをクリックして、以下の手順で配色を選択します。

  • 設定アイコンをクリックして設定メニューのブロックタブを開きます。
  • スタイルタブをクリックしてスタイル詳細メニューを開きます。
  • ディオトーンをクリックしてポップアップメニューを開きます。
  • ポップアップメニューから 任意の『ツートンカラー』を選択します。

参考AFFINGER6の画像ブロックに関連する記事はこちらでご覧いただけます。

基本がわかる!

段落ブロックの「枠線の太さ・色・角丸」が自由自在

テキスト:段落ブロックごとのスタイル設定『枠線の太さ・色・角丸』の設定が自由にできるようになりました。

段落(P)タグの「枠線の太さ・色・角丸」:イメージ

設定方法:エディター画面(段落:設定>スタイル)

対象の段落ブロックをクリックして、以下の手順で配色を選択します。

  • 設定アイコンをクリックして設定メニューのブロックタブを開きます。
  • スタイルタブをクリックしてスタイル詳細メニューを開きます。
  • 枠線をクリックしてポップアップメニューを開きます。
  • ポップアップメニューから 『枠線』『角丸』を任意に選択します。
  • 『枠線』『角丸』の「色・太さ・大きさ」設定します。
エディタ画面:段落(P)|設定|ブロックタブ|スタイル|枠線+|イメージ

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

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

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

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

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

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

AFFINGER6のアップデートにより、追加されていた便利な拡張機能をご紹介しました。
「記事作成・サイトの利便性・デザイン向上」に役立つ拡張機能なので、是非チェックしてみてください。

この記事がお役に立てば嬉しいです。^^

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

WordPressテーマ

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

action-affinger6-ex-1a

AFFINGER

WordPressテーマ

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

SWELL

AFFINGER6_おすすめ記事!

【2023年版 Wordpressテーマ】AFFINGER6とSWELL徹底比較!両方使ってみた 1

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

【特典付き】AFFINGER6(ACTION)を使って2年目のレビュー!メリット・デメリットを完全解説 2

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

AFFINGER6 初心者がオススメする購入方法【特典付きを購入しよう!】 3

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

AFFINGER6▶︎AFFINGERタグ管理マネージャー4 ver.4.1.1 の使い方! 4

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

-Function AFFINGER
-