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

2020年7月7日

アフィンガー5 カスタム

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

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

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

 

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

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

ヘッダー下

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

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

 

関連
アフィンガー 最初にやる設定
【Word Press】AFFINGER5(アフィンガー5)の使い方・カスタマイズ方法!最初にやっておくべき設定を紹介!!

続きを見る

\おすすめWPテーマ/

アフィンガーの機能を見る

5,000円の有料プラグインが無料でついてる!

手順の解説

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

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

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

ヘッダー下

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

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

アキ
僕はSTINGER_HTMLを使っています!

\おすすめWPテーマ/

アフィンガーの機能を見る

5,000円の有料プラグインが無料でついてる!

HTMLの解説

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

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

ヘッダー下

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

タイトル

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

僕は設定でこの部分を表示させないようにしています。デフォルトの場合は不自然に表示されてしまう可能性もあります。

リンクURL

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

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

文言の指定

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

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

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

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

アイコンの指定

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

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

fontawesome4

 

カラーの変更の仕方

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

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

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

ヘッダー下

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

\おすすめWPテーマ/

アフィンガーの機能を見る

5,000円の有料プラグインが無料でついてる!

文字スクロールの設定

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

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

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

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

CSSの書き込み

[/] code
.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

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

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

CSS3は本当に優秀です!!

まとめ

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

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

 

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

アキ
設定が細かすぎるのがたまに傷ですw

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

以上っ!

スポンサーリンク
スポンサーリンク

-WordPress
-,

© 2020 日曜日のOneRoom