AFFINGER6にある「お知らせ機能」。お知らせ機能と言っても２つの表示設定方法があります。
- お知らせ機能ってなに？
- ヘッダーにスライドするお知らせ機能って、どうやって表示するの？
- 他にもお知らせ機能ってあるの？
このような悩みを解決できます。
そこで、AFFINGER6の「お知らせ機能」の使い方や設定方法・詳細機能について詳しく解説していきます。
AFFINGER6のお知らせ機能ってなあに？
解説
お知らせ機能とは・・・
AFFINGER6には、自分の見てほしい記事や更新した記事をTOPページや記事上部分に表示する「お知らせ」機能があります。
他のWordpressテーマにはあまりない機能なので、利用すると、ユーザーを引き付ける効果やおすすめした記事をユーザーの目に行き届きやすくする効果があります。
AFFINGER6の「お知らせ」２つの機能
お知らせ機能には大きく分けて２つの機能があります。
＜２つのお知らせ機能＞
- 特定記事をヘッダー部分にスライド表示するお知らせ機能
- 更新した記事を表示できるお知らせ機能
但し、同じお知らせ機能であっても、２つのお知らせ機能は全くの別物。機能も異なれば、設定箇所も全く異なりますので、間違えないようにしましょう。
特定記事をヘッダー部分にスライド表示するお知らせ機能
下記のような動きのある「お知らせ」をヘッダー部分に表示する機能です。
自分がアピールしたいリンクをアニメーション動作を加えながら表示することができます。
更新した記事を表示できるお知らせ機能
AFFINGERにはTOPページの上部に簡易的な更新履歴を表示できる「お知らせ機能」が付いています。
下記のような画面イメージで表示できます。
新着記事を目立たせたい場合に便利です。日付とタイトルが更新順で表示されます。これは、AFFINGER6の機能にしかない機能です。設定もAFFINGER6管理画面dンからの設定になりますので覚えておきましょう。
ヘッダースライドのお知らせ機能について
それでは、下記赤枠部分のヘッダースライドショーの部分の表示の仕方について解説していきます。
お知らせヘッダースライダーの設定方法
お知らせのヘッダースライダーの設定手順は下記にならって設定を進めていきましょう。
ポイント
＜ヘッダーお知らせスライダーの設定手順＞
- 「ダッシュボード」➡「外観」➡「ウィジェット」を選択
- 「ウィジェット」➡「STINGERカスタムHTML」➡「ヘッダー画像エリア上のウィジェット」を選択➡「ウィジェットを追加」
- テキスト部分に『流れるスライダーのショートコード』で入力する
- 保存して完了
お知らせスライダーのソースコード
1 2 3 4 5 | <div class="st-marquee"> <p><i class="fa fa-hand-o-right"></i> <a href="https://tarmiyan.net/affinger6-tokuten"> 【13大特典】収益化しやすいWordpressテーマ「AFFINGER6」オリジナル購入者特典全て無料で配布中！</a></p> </div> |
その他のスライドアニメーション効果について
スライドアニメーション効果には、パワーポイントと同じで様々なアニメーション効果がありますので、いくつかご紹介していきます。
流れてくるテキスト以外には下のようなアニメーションも表示できます。
ポイント
- ベル揺れ
- 横揺れ
- 点滅
- シェイク
- 大小
「ベル揺れ」ソースコード
そのままコピーすれば、「ベル揺れ」アニメーションが利用可能です。
1 2 3 | <div class="fa faa-ring animated st-animate"> <a href="#">ベル揺れ</a> </div> |
「横揺れ」ソースコード
そのままコピーすれば、「横揺れ」アニメーションが利用可能です。
1 2 3 | <div class="st-horizontal animated"> <p><a href="#">横揺れ</a></p> </div> |
「点滅する」ソースコード
そのままコピーすれば、「点滅する」アニメーションが利用可能です。
1 2 3 | <div class="fa faa-flash animated st-animate"> <a href="#">点滅する</a> </div> |
「シェイク」ソースコード
そのままコピーすれば、「シェイク」アニメーションが利用可能です。
1 2 3 | <div class="fa faa-shake animated st-animate"> <a href="#">シェイク</a> </div> |
「大小」ソースコード
そのままコピーすれば、「大小」アニメーションが利用可能です。
1 2 3 | <div class="fa faa-pulse animated st-animate"> <a href="#">大小</a> </div> |
アニメーション効果の確認方法について
上記以外にも下のようなアニメーションが複数用意されています。アニメーション効果の確認方法は、下記画面から確認しましょう。
「スタイル」➡「アニメーション」
から様々なアニメーションを選択できます。
入力文字を選択した後で、赤枠のアニメーション効果を選択すると、ショートコードが生成されますので、そこから確認することができます。
更新記事を表示するお知らせ機能の設定手順
またお知らせ機能にはもう一つあります。
それが２つ目の画面ヘッダー部分に記事更新した投稿記事を表示できる「お知らせ機能」です。
設定手順について確認しておきましょう。
ポイント
<更新記事のお知らせ設定手順>
- AFFINGER管理から設定
- お知らせ表示の変更
１．AFFINGER6の管理➡トップページ➡「NEWS（お知らせ）の表示」
２．NEWS（お知らせ）の表示設定
一番上のチェックを入れると、TOPページの一番上に表示されます。また一番下でお知らせに表示する件数を指定できます。
「真ん中のお知らせに表示するカテゴリ」は、何も選択せず、空白のままにすれば、全ての更新記事に適用されますので、デフォルトのままでOKです。
ヘッダースライダーと更新履歴のお知らせ機能の注意点
ヘッダーお知らせスライダーの機能を入れると、動的なデザインのため表示速度に微々たる影響が生まれます。
そのため、SEO検索エンジンへの影響がありますので、上位表示されているものに影響がある場合には戻すことをおすすめします。ここに関しては検証を行いながら、設定を追加していきましょう。
まとめ
このように、AFFINGER6には「２つのお知らせ機能」があります。
どちらも非常にユーザーの利便性などを考慮すると非常にユーザーフレンドリーなサイトになることは間違えありませんが、サイトの表示速度の影響に関しては影響を与える可能性がありますので、SEOへの影響を考慮し、注意しながら導入することをおすすめします。
