AFFINGER5カスタマイズ

AFFINGER6「ヘッダー画像エリア上のウィジェット」の流れるお知らせの表示方法

AFFINGER6「ヘッダー画像エリア上のウィジェット」の流れるお知らせの表示方法
悩む人
AFFINGER5やAFFINGER6を使っているサイトでたまにみるヘッダーに流れてくるお知らせてってどうやって作っているの?コードとかコピペするだけで表示できるように1から解説してほしい。

下のような流れるお知らせを表示したいあなた。

AFFINGER6のウィジェット『ヘッダー画像エリア上』に流れるお知らせを表示する方法
管理人ハチ
公式のマニュアルでわかりやすくまとめられているので一旦そちらを確認しましょう。

公式「ヘッダー画像エリア上のウィジェット」でお知らせを表示する

ここでは公式のマニュアルにプラスして覚えておくと便利なカスタマイズも合わせて説明していきます。

公式に解説されていますが、AFFINGER6の「ヘッダー画像エリア上のウィジェット」に流れるお知らせを表示する手順は下の通りです。

  • 『WordPressダッシュボード』→『外観』→『ウィジェット』を選びます
  • ウィジェットから『00_STINGERカスタムHTML』から『ヘッダー画像エリア上のウィジェット』を選び『ウィジェットを追加』をクリックします
  • 任意のテキストを『流れる文字タグ』で入力する
  • 保存して完了

管理人ハチ
流れる文字以外にも揺れる文字なども表示できるので紹介していきますね。

\月3万円稼ぐブログ運営の教科書特典付き/

WordPressテーマ 「WING(AFFINGER5)」

/2021年版のブログ運営でライバルに差をつけよう\

AFFINGER6「ヘッダー画像エリア上のウィジェット」の流れるお知らせの表示方法

AFFINGER6のヘッダー画像の上にある『ヘッダー画像エリア上のウィジェット』に流れるお知らせを表示する方法は下の手順です。

  • 『WordPressダッシュボード』→『外観』→『ウィジェット』を選びます
  • ウィジェットから『00_STINGERカスタムHTML』から『ヘッダー画像エリア上のウィジェット』を選び『ウィジェットを追加』をクリックします
  • 任意のテキストを『流れる文字タグ』で入力する
  • 保存して完了

順番に解説します。

『WordPressダッシュボード』→『外観』→『ウィジェット』を選ぶ

まずは『WordPressダッシュボード』→『外観』→『ウィジェット』を選びましょう

AFFINGER6のヘッダー画像エリア上のウィジェットに流れるお知らせを表示させるためにウィジェットを開く

『00_STINGERカスタムHTML』で『ヘッダー画像エリア上のウィジェット』を選び『ウィジェットを追加』する

『00_STINGERカスタムHTML』で『ヘッダー画像エリア上のウィジェット』を選び『ウィジェットを追加』しましょう。

任意のテキストを『流れる文字タグ』で入力する

『最後にヘッダー画像エリア上のウィジェット』の欄に『00_STINGERカスタムHTML』が追加されて、テキストが入力できるので下のコードをコピペしてあなたが流したいテキストを入力してみましょう。

管理人ハチ
上記のテキストの『#』を任意のURLに変えれば好きなページにリンクできます。

ちなみに私のデモサイトならこのページにリンクできるように下のコードを埋め込んでいます。

管理人ハチ
ちなみに『target="_blank"』の部分は新しいタブで開くというタグです。

【おまけ】その他のテキスト効果

流れてくるテキスト以外には下のようなアニメーションも表示できます。

  • 横揺れするテキスト
  • バーストするテキスト
  • 回転するテキスト

順番に解説します。

横揺れするテキスト

バーストするテキスト

回転するテキスト

管理人ハチ
上記以外にも下のようなアニメーションがAFFINGER6には豊富にありますので気になるあなたはクリックエディタブロックでタグを確認してみましょう。
  • 45°揺れ
  • ベル揺れ
  • 横揺れ
  • 縦揺れ
  • 点滅
  • バウンド
  • 回転
  • ふわふわ
  • 大小
  • シェイク
  • シェイク(強)
  • 拡大(ゆれ)
  • 過ぎる
  • 戻る
  • バースト
  • 落ちる

ショートコードの確認方法は下の動画を参考にしてください。

管理人ハチ
ちなみに下の『ここにアニメーションタグを入力してください』をショートコードに張り替えればすぐに実装できますよ。
  • この記事を書いた人

hachi

-AFFINGER5カスタマイズ