AFFINGER5　TOP画面スクロールバーの作り方

悩む人

ブログのTOP画面に宣伝みたいなのが流れてるのかっこいいな

クーヤン

AFFINGER5なら簡単に作ることができますよ

この記事では、AFFINGER5ユーザーさん向けに、お得情報を流せるTOP画面スクロールバーの作り方を紹介します。

AFFINGER5　TOP画面のスクロールバーとは

TOP画面のヘッダー部分に、上の画面のようなスクロールバーを見たことはないでしょうか？

こんな感じです。

アフィリエイトをしている人は、提携先のお得なキャンペーン情報がメールで届きますよね。

しかし、ブログTOP画面でお得情報をすぐに気づいてもらうのって意外と難しかったりします。

TOP画面のヘッダーカードアイキャッチ画像を大きくするには、有料の子テーマJET（4,980円）を購入する必要があります。

Canvaなどでアイキャッチ画像を作りこんでいくのも結構消耗します。SEO的には、挿入画像はそこまで効果はないと言われています。

費用や時間をかけず、シンプル、且つ、簡単に新しいキャンペーン内容を読者に伝えるのにうってつけなのが、このTOP画面のスクロールバーです。

クーヤン

それでは、スクロールバーの作り方に進みましょう！

TOP画面スクロールバーの作り方

TOP画面のスクロールバーの作り方は以下の通りです。

step
1WordPressダッシュボードの左メニュー「外観」から「カスタマイズ」に進みます

step
2「ウィジット」から「ヘッダー画像上のウィジット」へ進みます。

step
3「00_STINGERカスタムHTML」⇒「内容」に下記のコードをコピペ⇒「完了」⇒「公開」の順で進みます。

「fa fa-check-circle」の部分を変えれば、アイコンを好きなものできます。

スクロールバーの色の変え方

先ほどと同じ操作で、WordPressダッシュボード左メニューから「外観」「カスタマイズ」に進みます。

step
1まず、「基本エリア設定」をクリック。

step
2「ヘッダー画像エリア上／下ウィジット」をクリックします。

step
3ヘッダーエリア上の色で背景色と文字の色を調整します。当ブログのスクロールバーは下記設定にしています。

まとめ

スクロールバーは、ちょっと原始的な感もありますが、シンプルに内容が伝わります。

そして、作り方も簡単です。

ブログを開いて、パッとブログ一押しの記事に飛んでいただくには1番じゃないかなと思います。

クーヤン

是非おためしあれ～

WordPressテーマ「AFFINGER5」については、こちらの記事で紹介しています。