ブログ

AFFINGER(アフィンガー)のタグ一覧!デザインの仕方を解説

AFFINGER デザイン

こんな悩みはありませんか?

  • 有料テーマAFFINGER5(アフィンガー5)をもっと活用したい
  • AFFINGER5(アフィンガー5)でおすすめの記事装飾を教えてほしい
  • マネブロみたいな記事デザインにするにはどうすればいいか教えてほしい
AFFINGER5(アフィンガー5)でブログをはじめたんだけど、記事が読みづらいんだよね。もっと読みやすいデザインにしたいから教えてよ。
もちろんいいよ!AFFINGER5は機能がたくさんあるから、初心者におすすめの本当に使える記事装飾・デザインだけ教えるね!
MONEBLO

読みやすいブログと読みにくいブログ、あなたならどちらを読みたいですか?

ほとんどの方は、読みやすいブログを求めていることでしょう。

ブログの読みやすさは「ユーザーファースト」を掲げるGoogleからの評価にも影響します。

つまり、読みやすいブログを心がけることがSEO対策上、非常に重要だということです。

 

そこで今回は、WordPressの有料テーマ「AFFINGER5(アフィンガー5)」を使ってブログを運営する際に、知っておきたい基本の記事装飾をご紹介します。

AFFINGER5は記事の装飾がしやすく、初心者でも簡単におしゃれにブログ運営ができるので、非常におすすめですよ!

当ブログ「マネブロ」もAFFINGER5を利用しているよ!
MONEBLO

記事装飾・デザインのやり方

AFFINGER5での記事装飾は、投稿メニューの「タグ」で基本的に行います。

AFFINGER5 タグ

投稿メニューの中にある「タグ」をクリックするとデザインできます

タグの中には、「テキストパーツ」や「ボックスデザイン」などがあり、様々なデザインを施すことができます。

マウスポインタ―(PC画面上の矢印)を重ねると、さらに細かいデザインを指定することができます。

AFFINGER5 デザイン

AFFINGER5でおすすめの記事装飾とその使い方

それでは、早速今回ご紹介する記事装飾・デザインの一覧をご紹介します。

おすすめの記事装飾一覧

こんな方におすすめ

会話ふきだし

ボックスデザイン

ボタン

ブログカード

ステップ

まるもじ

こんな方におすすめ

「こんな方におすすめ」とは、記事の冒頭部分で読者をひきつけるために用いるものです。

一番最初に読者の悩みに共感したり、ターゲットを提示したりすることで記事の第一印象を良くし、記事からの離脱を防ぐことができます。

これにより、ページ内の滞在時間も伸びるので、SEO上も非常に効果的と言えます。

こんな方におすすめボックス

「マネブロ」での活用例

「こんな方におすすめ」は、2種類あるので、それぞれの装飾方法について解説します。

ブログのイメージに合わせてどちらにするか決めましょう。

こんな方におすすめ(v)

各項目のチェックボックスが丸いバージョンで、実際のデザインは以下の通りです。

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「こんな方におすすめ(v)」

こんな方におすすめ[v]

各項目のチェックボックスが四角いバージョンで、実際のデザインは以下の通りです。

当ブログマネブロでは「こんな方におすすめ[v]」の文言を「こんな悩みはありませんか?」に変えて投稿しています。

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「こんな方におすすめ[v]」

会話ふきだし

「会話ふきだし」は、マンガのふきだしのような装飾です。

テンポよく説明ができたり、文章よりも読みやすくしたりする効果があります。

それだけでなく、読者目線の悩みや不安を代弁させることもできるので、読者の共感を誘うことも可能です。

AFFINGER 会話ふきだし

「マネブロ」での活用例

マネブロでは、読者目線(悩みを持つ人)の「ネコ」とブログ運営者目線(悩みに答える人)の「ブタ」でふきだしを使い分けています。

記事装飾の方法

投稿メニュー「タグ」>「会話ふきだし」>「会話1」や「会話2」など

ふきだしの向きを変えるにはどうしたらいいの?
ふきだしのコードの先頭にある「st-kaiwa1」の後に半角スペースを入れ、「r」を入力すると反対向きになるよ!
MONEBLO

投稿の編集画面では、以下のように見えます。

会話ふきだし AFFINGER5

編集画面での見え方

ボックスデザイン

「ボックスデザイン」とは、背景色やアイコンを用いたボックスのことを指します。

ボックスデザインを使うことで、記事の中で強調したり、視覚的に区切りをわかりやすくさせたりする効果が期待できます。

AFFINGER5の場合、ボックスデザインの種類は実に多いため、ボックスデザインの中でも特におすすめのものをご紹介します。

バナー風ボックス(基本)

バナー風ボックス(基本)

このように表示されます。

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「バナー風ボックス」>「基本」

メモ

メモ

このように表示されます。

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「マイボックス」>「メモ」

ポイント

ポイント

このように表示されます。

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「マイボックス」>「ポイント」

注意ポイント

注意ポイント

このように表示されます。

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「マイボックス」>「注意ポイント」

はてな

はてな

このように表示されます。

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「マイボックス」>「はてな」

見出し付きフリーボックス

見出し付きフリーボックス

このように表示されます。

記事装飾の方法

投稿メニュー「タグ」>「ボックスデザイン」>「見出し付きフリーボックス」>「基本」

ボタン

「ボタン」は、視覚的にわかりやすくリンク先に誘導する際などに用いるものです。

ボタン 実用例

「マネブロ」での活用例

ボックスデザイン同様、たくさん種類があるので、いくつか試してブログに合った色や形のものを選びましょう。

トップページはこちら

記事装飾の方法

投稿メニュー「タグ」>「カスタムボタン」>「ノーマル」>「基本」

編集画面でリンク先のURLやタイトル、色などを設定することができます。

ボタンの色や形を設定するのが面倒な方は、他のカスタムボタンの中から最適なものを選びましょう。

さらに詳しく!

  • 「url」…リンク先のURLを入力する
  • 「title」…ボタンに表示したいタイトルを入力する

他には背景色や線の色、フォントのサイズなどを変更することができます。

ボタン

編集画面の様子

ブログカード

「ブログカード」とは、関連記事や次に読んでほしい記事を紹介するためのものです。

記事に訪れた読者に対して、似たような記事をおすすめしたり、次に読むべき関連記事を明記したりすることで、読者がサイト内を循環してくれるようになります。

これは、SEO上重要な「セッション数」に影響するものなので、適切な場所に、適切な貼り方をする必要があります。

同一サイトの記事だけに限らず、別サイトの記事を貼ることも可能です。

さらに詳しく!

  • 「id」…記事IDを入力する(WordPressの投稿一覧で確認可能)
  • 「label」…ブログカードに記載したい文言を入力する
  • 「name」…記事のタイトルを入力する

ブログカード AFFINGER5

編集画面の様子

記事装飾の方法

投稿メニュー「カード」

ステップ

「ステップ」は、手順を示す際に使える、段階を表すものです。

視覚的にわかりやすく手順や順番を表記できるので、読者にとって親切な書き方になります。

step
1
投稿メニューの「タグ」をクリックする

ここにテキストを入れることもできます。

step
2
「テキストパーツ」をクリックする

ここにテキストを入れることもできます。

step
3
「ステップ」をクリックする

ここにテキストを入れることもできます。

step
4
各手順を入力する

ここにテキストを入れることもできます。

step
GOAL
完了!

ここにテキストを入れることもできます。

記事装飾の方法

投稿メニュー「タグ」>「テキストパーツ」>「ステップ」

まるもじ

「まるもじ」とは、丸いボックスの中に好きなテキストを入力できるものです。

少しだけ強調させたいものや色を付けたいものなどに使うと効果的です。

まるもじ

「マネブロ」での活用例

記事装飾の方法

投稿メニュー「タグ」>「テキストパーツ」>「まるもじ(小)」

まとめ この記事が30秒で理解できる

今回は、WordPressの有料テーマ「AFFINGER5(アフィンガー5)」でブログを開設した人に向けて、記事装飾やデザインについて解説しました。

AFFINGER5の記事装飾は多様かつわかりやすいので、ぜひ活用することをおすすめします。

まずは何度か装飾を試してみてから、ブログに合ったテイスト、デザインのものを選ぶと良いでしょう。

視覚的にわかりやすくしてくれる効果がありますが、使いすぎると見づらくなってしまうので注意です。

AFFINGER5は、実は後継の「AFFINGER6」が発売されていますので、こちらも併せてみてみることをおすすめします。

こちらの記事もよく読まれています

  • この記事を書いた人
  • 最新記事

Takumi

社会人1年目から副業を始め、現在2年目です。 毎月どのような副業結果が出ているかを中心に、情報を発信していきます。

-ブログ
-,

© 2021 マネブロ Powered by AFFINGER5