AFFINGER（アフィンガー）でヘッダー下にお知らせ欄を追加する方法！文字スクロール設定の仕方も一緒に紹介！！

Word Pressには色んなテーマがありますよね！！

今人気なものだと「JIN」や「SANGO」やブロックエディタの「SWEEL」が人気です！！

色んなテーマを使ってみるのも面白いかもしれません！！

そんな中で僕は「AFFINGER」を使っていますが、よく色んな方のサイトでみる「ヘッダー下のお知らせ欄」ですが「SANGO」や「JIN」には専用に入力する欄があるみたいですが、アフィンガーにはないんですよね！！

実は自由度の高いアフィンガーではお知らせ以外にも「広告」や「画像」など、なんでも挿入することができます！！

今回はこの部分の設定の仕方を解説していきたいと思います！！

2020年7月12日にcssによる文字スクロールカスタマイズを追記しました。

あわせて読みたい

【初心者】AFFINGER6（アフィンガー）の使い方・カスタマイズ方法一覧！購入後に最初にやっておくべき設… テーマを変更した時は色々する事があって大変ですよね！ この記事では当ブログでも使用していたAFFINGER6について紹介しています。 有料テーマAFFINGER6にはカスタマイ…

手順の解説

設定方法は実はかなり簡単です。

WordPressメニューから「外観」→「ウィジェット」→「ヘッダー画像エリア上のウィジェット」に「カスタムHTML」をドロップするだけでOKです！！

この時「カスタムHTML」ではなく「画像」などでも表示することができます！

カスタムHTMLは2種類あります。

「カスタムHTML」と「STINGERカスタムHTML」の2種類ですがどちらでも大丈夫です！！

アキ

僕はSTINGER_HTMLを使っています！

HTMLの解説

次にこのボックスに「HTML」を書き込んでいきます！

僕のブログでは現在はこのように書き込んでいます。

<p><a href="ここにURLを入力" class="huto">表示させる文言を入力</a> <i class="アイコンを入力"></i></p>

タイトル

タイトル部分は記入しなくても大丈夫です！！

僕は設定でこの部分を表示させないようにしています。

デフォルトの場合は不自然に表示されてしまう可能性もあります。

リンクURL

この部分に「URL」を記入しておくとそこのリンクへ飛ぶように設定することができます！！

自分が見て欲しい記事のURLや商品のURLなど自分のオススメするリンクを貼ってみてください！！！

文言の指定

「amazonタイムセールをチェック」ここの文言を変更すれば表示される言葉が変更できます！！

またカラーの変更を「カスタマイズ」からできますが、カラーをデフォルトに設定していると文言にアンダーラインが入ります。

HTMLで指定してアンダーラインを入れる事もできるので、カラーの設定はしておきましょう！！

設定の仕方は後述します。

アイコンの指定

「fa fa-paper-plane-o」を変更する事によってアイコンを変更することができます！

アイコンはアフィンガー対応のfontawesome4から選択してください！！

カラーの変更の仕方

カラーの変更も簡単です！！

「外観」→「カスタマイズ」→「基本エリア設定」→「ヘッダー画像上・下ウィジェット」から設定できます！

こちらで好みの色に「文字色」と「背景色」を変更して下さい！！

自分のブログに合う色がいいですよ！！

文字スクロールの設定

このような文字スクロールを実装しているブログは多かったのですが、紹介している記事自体はあまりなかったので、今回紹介しようと思います！！

その昔は「marquee」というHTMLがあり、このタグで簡単に実装する事ができましたがこのタグは「Internet Explorer」の独自で現在では非推奨のタグです。

今回は「CSS」で実装してみました！

実装の仕方を解説していきます！！

CSSの書き込み

scroll {
margin : auto;
 width     : 96%;
 font-size : 100%;
line-height: 1.5em;
text-align : center;
overflow : hidden;
}
.scroll span{
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation : scrollAnime 14s linear infinite;
}
@keyframes scrollAnime{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

上記コードを「外観」→「カスタマイズ」→「追加CSS」からコピペで貼り付けてください。

この時コードの「animation : scrollAnime 14s linear infinite;」の部分の数字を変更する事で速度を好みのスピードに変更する事ができます！！

スクロール用HTML

<div class="scroll">
<span> <a href="ここにURLを入力" class="huto">表示させる文言を入力</a> <i class="アイコンを入力"></i></span>
</div>

上記コードをウィジェットにコピペして、対象の部分を入力すればOKです！！

まとめ

正直クリック率はそんなに高くはないと思います。

ですが、この部分はサイトの訪問者の目に常に入る部分ではありますので、お知らせ以外にもお問い合わせなどを入れてもいいかもしれません！！

なんにせよ他のテーマにできてアフィンガーにできない事は基本的にないので満足です！！

アキ

設定が細かすぎるのがたまに傷です。

是非設定してみてください！！

以上っ！