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

記事内に商品プロモーションを含む場合があります。

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

今人気なものだとJINSANGOやブロックエディタのSWEELが人気です!!

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

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

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

ヘッダー下

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

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

\ アフィリエイトに最適テーマ /

目次

手順の解説

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

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

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

ヘッダー下

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

カスタムHTMLSTINGERカスタム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から選択してください!!

カラーの変更の仕方

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

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

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

ヘッダー下

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

\ アフィリエイトに最適テーマ /

文字スクロールの設定

https://twitter.com/Aki4108gl/status/1282319740887658496?ref_src=twsrc%5Etfw

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

その昔は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です!!

\ アフィリエイトに最適テーマ /

まとめ

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

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

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

アキ

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

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

以上っ!

\ アフィリエイトに最適テーマ /

\EX版とセットのお得パック /

この記事をシェアする

コメント

コメント一覧 (1件)

  • アフィンガーの通知欄の追加の仕方を検索してもなかやか見つからなかったので、本当に助かりました。
    ありがとうございました。

ティ へ返信する コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次