AFFINGER6

【AFFINGER6】サイト内の画像をフェードイン表示する設定(1か所の設定でできます)




サイト全体(もしくは記事内)の画像を表示する際に、画面上に画像をフェーズイン(ぼわっと)表示させる方法です。

通常は CSS で実現しますが、WordPress の優良テーマ AFFINGER6 では、設定1か所で実現することが可能です。




AFFINGER ご購入はこちら




CSS で実現する場合は以下の記事を参照してください。

【WordPress】画像をフェードイン(ぼわっと)表示する!簡単な CSS で実現します

画像をフワっと表示する!一気にページをかっこよく!ほんのちょっとの工夫をしたら、「画像」がすべてフェードイン。実現するのは簡単な、CSSだけ書きますと、画像がフワっと出てきます。記事内に「ぼわっと」のサンプル置きました。ぜひともご覧くださいね。

続きを見る



フェードイン(ぼわっと)で画像を表示させるとは



実際にフェードイン(ぼわっと)表示するサンプルです。ページ表示時に動きますので、下のボタンを押してページを再読み込みしてください。





ボタンを押すとページを再読み込みします。

ページ表示時に上の画像を「ぼわっ(フェードイン)」と表示しています。

(ブラウザによっては動作しない場合があります)


※ こちらは CSS で実現していますが、AFFINGER6 では設定で実現ができます。

※ 当サイトではフェードイン表示を設定していませんので、上記画像以外はフェードイン表示されません。



サイトの画像をフェードインで表示する設定



AFFINGER6 の管理にて設定します。



WordPress 管理画面から [AFFINGER 管理] → [その他] をクリックします。

フェードイン表示の有無を指定して保存します。


記事エリアの画像表示をスクロールでフェードインする
記事内の画像を対象に画像を画面上に表示するタイミングでフェードイン表示します。
サイト全体の画像表示をスクロールでフェードインする
サイト全体の画像を対象に画像を画面上に表示するタイミングでフェードイン表示します。
画像の演出をリセットする
フェードイン表示を行いません。


フェードイン表示のメリット・デメリット(AFFINGER6)



画像のフェードイン表示はオシャレな機能ですが、メリットとデメリットを把握したうえで利用有無を検討ください。


フェードイン表示のメリット


  • 見た目が綺麗である
  • アニメーション効果でサイトが栄える
  • (読み込みが遅いページの場合)ユーザを待たせる時間を感じさせない

フェードイン表示のデメリット


  • (読み込みが早いページの場合)ユーザにページ表示を遅く感じさせてしまう

特に AFFINGER6 は WordPress のテーマの中では比較的 動作スピードが速いテーマです。さらに以下の対策によりサイトスピードは速くなりますので、フェードイン表示のデメリットを感じる場合があります。留意してご利用をご検討ください。



【WordPress】重いページを(超)簡単に高速化、「たった2つ」の簡単な方法!

サイトの表示スピードが、たった2個の簡単な方法(プラグイン)で劇的に改善(高速化)します。待ち時間が少ないページはSEO効果も上がるため、必須でいれたいプラグインです。ぜひ、ご確認くださいませ。

続きを見る



まとめ



サイト全体(もしくは記事内)の画像を表示する際に、画面上に画像をフェーズイン(ぼわっと)表示させる方法です。WordPress の優良テーマ AFFINGER6 では、設定1か所で実現することが可能です。



  • WordPress 管理画面から [AFFINGER 管理] → [その他] で、画像表示の設定を行います。


Enjoy!ぼわぼわ表示するのはなかなかオシャレです(^^)/




WordPress のテーマ「AFFINGER6」の情報、テクニック一覧はこちらをクリック!









Presented By Irojiro Haraguro .Com

ブログランキング・にほんブログ村へ