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

AFFINGER6 カスタマイズ【タイトルや画像を「ふわっと表示」フェードイン設定方法】

AFFINGER6 カスタマイズ【タイトルや画像を「ふわっと表示」フェードイン設定方法】

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

AFFINGER6のページ内でタイトルや画像をふわっと表示させるフェードインの設定方法をご紹介します。

AFFINGER6:AFFINGER管理『その他の設定』での作業になります。
AFFINGERの標準拡張機能なので初心者さんでも安心です。しかも!超簡単…^^/でCSS等の追記・編集は不要です。

サイトの各ページがリッチに表現できる簡単なAFFINGER専用の拡張機能です。

※ 当サイトでも採用しています。

こんな方におすすめ!

  • AFFINGER6の初心者「CSS?」は難しい
  • サイトの表示を少しリッチに見せたい。
  • フェードインの興味がある。
  • AFFINGER6を標準の拡張機能でカスタマイズしたい。

この記事でわかること!

  • フェードインとは?
  • フェードインの設定方法
    • フェードインの設定方法
    • 記事エリアの画像表示をスクロールでフェードインする
    • サイト全体の画像表示をスクロールでフェードインする
    • 画像の演出をリセットする
  • フェードインを採用するサイトの注意すべきところ
  • まとめ!

それではご覧ください!

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

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

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

フェードインとは?

フェードインとは、画像が表示されるときに徐々に現れる表現です。
ぼやけている状態から少しずつ現れることから「ふわっと現れる」等で表現されることが多いです。

AFFINGER6でフェードインをONにするとスクロール等で初めてページに表示されるときに「ふわっと」現れます。一度表示されると同じページを再読み込みしないかぎり フェードインしません。

タイトルや画像をフェードインする効果としては「着目率の向上」や「ページの重圧感UP」があります。

「閲覧時に目に留まる」っていう感じ!?

osaboo
osaboo

フェードインの設定方法

この章では、フェードインの設定方法をご紹介します。

AFFINGER管理『その他の設定』での作業になります。

設定できる項目は以下の通りです。

  • 記事タイトルをフェードインする
  • 記事エリアの画像表示をスクロールでフェードインする
  • サイト全体の画像表示をスクロールでフェードインする
  • 画像の演出をリセットする

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

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

ます、設定箇所を開きます。

『WordPress管理>ダッシュボード>AFFINGER管理>その他』をクリックします。

「その他の設定」画面が表示されます。

❶ ❷ ❸ の順番に処理します。→ 下側にスクロールしていきます。

AFFINGER管理:その他

【記事タイトル】の項目が表示されるところまで下側にスクロールします。

AFFINGER管理:その他の設定|フェードイン設定箇所

※ AFFINGER管理での設定が終了したら必ず!『Save』をクリックしましょう。

設定箇所にメニューは以下のように表示されます。

AFFINGER管理:その他の設定|フェードイン設定箇所|拡大|当サイトの設定

※ 当サイトの設定(20230908)

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

記事タイトルをフェードインする

AFFINGER管理:その他の設定|フェードイン設定箇所|拡大|記事タイトルをフェードイン

『記事タイトルをフェードインする』にチェックを入れるとh1のみがフェードインします。

注意. 「h2・h3」等下位の見出しタグはフェードインしません。

※ 固定ページ・記事(投稿)等サイト全体が対象になります。

記事エリアの画像表示をスクロールでフェードインする

AFFINGER管理:その他の設定|フェードイン設定箇所|拡大|記事エリア選択

『記事エリアの画像表示をスクロールでフェードインする』を選択すると記事(投稿)のみ画像がフェードインします。

画像全てが対象になるので「ブログカード・サムネイル・会話アイコン」等がフェードインします。

※ 記事エリア以外は対象外になります。(「サイドバー・フッター」エリア等)

サイト全体の画像表示をスクロールでフェードインする

AFFINGER管理:その他の設定|フェードイン設定箇所|拡大|サイト全体選択

『サイト全体の画像表示をスクロールでフェードインする』を選択すると サイト内全ての画像がフェードインします。

画像の演出をリセットする

AFFINGER管理:その他の設定|フェードイン設定箇所|拡大|画像演出リセット

初期状態に戻して画像表示のフェードインを無効にします。(デフォルトの状態です)

フェードインを採用するサイトの注意すべきところ

この章では、フェードインを採用するサイトの注意すべきところを当サイトをベースにご紹介します。参考

当サイトの特徴

  • 記事エリアに比較的画像が多い
  • 記事エリアに画像中心の広告が多々ある
  • サイドバーにはリスト型の記事一覧を表示している(サムネイル画像)
  • フッターにカード型の記事一覧をスライド式で表示している(サムネイル画像)

??画像だらけ…(笑)

  1. 当サイトは比較的画像が多いサイトです。サイト内ずべての画像をフェードインすると「目がチカチカしそう」
  2. サイト内にフェードインは惜しい(筆者の好み)

と、いう理由で…以下のように設定しています。

  • 記事タイトルをフェードインする:チェックON
  • サイト全体の画像表示をスクロールでフェードインする:選択
AFFINGER管理:その他の設定|フェードイン設定箇所|拡大|当サイトの設定

まとめ!AFFINGER6 カスタマイズ【タイトルや画像を「ふわっと表示」フェードイン設定方法】

AFFINGER6のカスタマイズでタイトルや画像をフェードインさせる設定方法をご紹介しました。AFFINGER6標準の拡張機能で安心して使える設定です。「設定自体は一瞬です(笑)」是非、サイトのカスタマイズにお役立てください。

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

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

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

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

-カスタマイズ_AFFINGER
-