AFFINGER

【完全版】AFFINGER5のトップページにお知らせを表示する方法

【完全版】AFFINGER5のトップページにお知らせを表示する方法
ごー

こんにちは、ごー(@goo2929)です!

AFFINGER5でお知らせを表示する方法は?

ユーザーの目に留まるような表示をトップページにさせたい!

困っている人

このような悩みを解決します。

結論から言うと、本記事を読めば以下のような「お知らせ」をトップページに表示できるようになります。

電光掲示板(流れる文字)のお知らせ

電光掲示板(流れる文字)

>>このお知らせの表示方法までジャンプ

新着記事のお知らせ

新着記事

>>このお知らせの表示方法までジャンプ

早速見ていきましょう。

参考記事>>【おすすめ特典あり】AFFINGER5の徹底レビュー&購入方法!

電光掲示板(流れる文字)でお知らせを表示する方法

電光掲示板(流れる文字)

人は無意識に動くものを目で追う習性があるため、電光掲示板(流れる文字)によるお知らせは読者に特定の情報を伝えるときに効果的です。

なのでぜひこのお知らせを使って、思わず読者がクリックしたくなる表示をさせてくださいね

ちなみに実際には以下のような文字が流れています。

それでは、お知らせを"表示する"、"色を変える"の2ステップでやり方を見ていきましょう。

【電光掲示板①】お知らせを"表示する"方法

まずWordpress管理画面から「外観」→「ウィジェット」と移動します。

そして以下の画像のように「カスタムHTML」を「ヘッダー画像エリア上のウィジェット」にドラッグ&ドロップしてください。

ウィジェットに移動する

あとはHTMLコード(下記参照)を貼り付けて「完了」をクリックすれば設置完了です。

コードを貼り付ける

ちなみにここで貼り付けるコードは以下をコピペすればOKです。

<div class="st-marquee">
<p><i class="fa fa-hand-o-right"></i> <a href="URL">表示したい文字</a></p>
</div>
ごー

赤字の「URL」にリンク先を、「表示させたい文字」にあなたが流れてほしい文字を入力しましょう。

ちなみに「fa fa-hand-o-right」を入れ替えると、別のアイコンを表示させることもできますよ。

アイコンはfontawesomeにたくさんあるので、あなたに合ったものを探してみてください。

ごー

簡単ですね!次に電光掲示板の色を変えてみましょう。

【電光掲示板②】お知らせの"色を変える"方法

こちらも簡単なのでパパっとやっていきましょう。

まずWordpress管理画面の「外観」→「カスタマイズ」をクリックします。

外観→カスタマイズをクリック

次に「基本エリア設定」→「ヘッダー画像エリア上/下ウィジェット」をクリック

基本エリア設定をクリック
ヘッダー画像エリア上/下ウィジェットをクリック

あとはお好みのカラーを設定すればOKです。

電光掲示板(流れる文字)完成
ごー

以上が電光掲示板(流れる文字)を表示する方法です。

お疲れ様でした!

次に新着記事のお知らせを表示する方法を見ていきましょう。

新着記事のお知らせを表示する方法

新着記事

新着記事のお知らせ表示をすることで、ページを開いた読者にたくさんの情報を伝えることが可能となります。

ここではこのお知らせを表示させる方法を紹介します。カテゴリーの表示も可能なので、合わせて解説しますね。

それでは再び”表示する”、”色を変える”の2ステップで見ていきましょう。

【新着記事①】お知らせを”表示する”方法

最初にWordpress管理画面から「AFFINGER管理」→「トップページ」に移動します。

AFFINGER管理→トップページ

少し下にスクロールすると「NEWS(お知らせ)の表示」の項目があるので、まずは「お知らせをTOPページの一番上に表示する」にチェックしましょう。

お知らせを表示させる

ここでは3つの項目が設定できます。

  • タイトル
  • カテゴリーID
  • 表示件数

カテゴリーIDを指定すればそのカテゴリーの、空欄にすれば全体の新着記事から順に表示されるため、お好みで設定してみてくださいね。

ごー

これで設置は完了です!

次に色を変えていきましょう。

【新着記事②】お知らせの”色を変える”方法

まずはWordpress管理画面から「外観」→「カスタマイズ」をクリックします。

外観→カスタマイズをクリック

カスタマイズ画面に移動したら「オプション(その他)」→「お知らせ」の順でクリック。

オプション(その他)をクリック
お知らせをクリック

あとはお好みで色を調整すればOKです。

色が変わった!

以上が新着記事お知らせの色を変える方法です。

電光掲示板もそうですが、簡単なのに劇的に見た目を変えられるので活用してみてくださいね。

その他ブログデザインを変える方法を2つ紹介します

その他ブログデザインを変える方法を2つ紹介します

おそらく本記事を読んでいるあなたはブログデザインを変えたいと考えていると思うので、ここでは代表的な方法を2つご紹介します。

  • スライドショーを設置する
  • ブログカードをカスタマイズする

簡単かつ効果的なのでぜひ試してください。

①スライドショーを設置する

スライドショーとは下記のような表示です。

2021/6/4

【6ヶ月目】初心者ブロガーの運営報告|収益、PV数、や...

圧倒的に集客できるSEOキーワード選定は5ステップ【選び方のコツ】

2021/7/5

圧倒的に集客するSEOキーワード選定のやり方5ステップ...

ブログは資産になる?資産化できるブログの作り方を5ステップで解説

2021/5/27

ブログは資産になる?資産化できるブログの作り方を5ステ...

副業ブログに向いていない人の特徴13個【まずは行動力だけあればOK】

2021/7/10

副業ブログに向いていない人の特徴13個【まずは行動力だ...

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した筆者が解説】

2021/5/19

ブログ50記事で月1万円稼ぐ方法は?【4ヶ月で達成した...

見た目がおしゃれな上に読者の立場から見ても使いやすいので、ぜひ導入して欲しいカスタマイズです。

設置方法は『【簡単】AFFINGER5のスライドショーを設置・カスタマイズする方法』で詳しく解説しているので、参考にどうぞ。

②ブログカードをカスタマイズする

ブログカードとは下記のような表示です。

AFFINGER5の口コミ・評判は?|20人の利用者の声を紹介!
AFFINGER5の口コミ・評判は?|20人の利用者の声を紹介!

続きを見る

正直テキストリンクだけでは味気ないので、カード式で表示してくれるこの機能には僕もよく助けられています。

細かいカスタマイズもできるので、やり方は『AFFINGER6のブログカードを完全攻略|設置やカスタマイズ方法を解説!』で詳しく解説しています。

以上、2つのカスタマイズは王道ですが重要です。

どちらも自由に扱えるようになるとAFFINGERがさらに楽しくなりますよ。

そもそもどんなデザインにすればよいのか分からないという方は、以下に現役ユーザーのブログサイトをまとめた記事を貼っておくので参考にどうぞ。

AFFINGER5を使ったブログサイト7選!【デザイン重視のあなたへ】
AFFINGER5を使ったブログサイト7選!【デザイン重視のあなたへ】

続きを見る

AFFINGER5のトップページにお知らせを表示する方法|まとめ

AFFINGER5のトップページにお知らせを表示する方法|まとめ

本記事では2つのお知らせ表示方法をご紹介しました。

  • 電光掲示板(流れる文字)
  • 新着記事(カテゴリー)

特にSNS運用と合わせてブログを書いている方はトップページを見られる機会がかなり多いです。

なので色々な記事を見てもらえるよう常に工夫していきましょう!

今回は以上です。

-AFFINGER
-,