ワードプレス

AFFINGER5の使い方「ブログ記事に役立つ装飾のやり方」を解説!【カスタマイズ入門編】

ブログのWordPressテーマをAFFINGER5にしたんだけど、使い方がいまいちわからない!ブログ記事に役立つ装飾の仕方を教えて欲しい…
なまお

 

YURU
それじゃ、AFFINGER5の使い方について簡単に解説していくよ!

 

こんな悩みをもつあなたに

  • AFFINGER5の使い方で記事執筆に役立つ使い方を知りたい
  • AFFINGER5をカスタマイズする方法を知りたい
  • AFFINGER5でプロフィールを作る方法を知りたい

 

そんな悩みにお答えしていきます。

 

本記事の内容

  • AFFINGER5で使える記事装飾の使い方
  • AFFINGER5をカスタマイズする方法
  • AFFINGER5のプロフィールの作り方

 

YURU
こんにちは、副業ブロガーのYURUです。複数のブログ運営をしており、月平均で6桁、最高29万円の収益を出しています。

 

本記事では、AFFINGER5の使い方を詳しく解説!

 

この記事を読めば、記事作成に役立つ機能がわかり、きれいな読みやすい記事をに仕上げることが可能です。

 

装飾を使い記事を読みやすくすれば、離脱される確率も減り滞在時間も長くなります。

 

それにより、SEOに強くなり上位表示を狙うことも可能。

 

上位表示できれば読者も増え、稼げる確率もグンっとアップしますよ。

 

AFFINGER5の記事装飾・カスタマイズに手こずっている人は、ぜひ読み進めてみて下さい!

 

 

\当サイト使用WordPressテーマ/ AFFINGER(アフィンガー)豪華7大特典付きレビュー当サイト限定特典+7500円相当プラグイン付

関連記事【当サイト限定!豪華10大特典】AFFINGER5(アフィンガー)徹底レビュー!

 

 

AFFINGER5の記事執筆に役立つ装飾の使い方

AFFINGER5の使い方「ブログ記事に役立つ装飾のやり方」を解説!【カスタマイズ入門編】

 

AFFINGER5はどんな装飾があるの?
なまお

 

YURU
じゃあ、まずはブログ記事に役立つ装飾の仕方を解説していくよ!

 

まずは、AFFINGER5の記事執筆に役立つ装飾の使い方を解説します。

 

紹介する装飾は、以下の8種類です。

 

  • ボックス
  • 吹き出し
  • マーカー
  • 箇条書き(リスト)
  • ボタン
  • 口コミ・お客様の声
  • 画像枠
  • 表(テーブル)

 

上記8つが使えれば、きれいな記事に仕上がるので、まずはこの装飾をマスターしていきましょう!

 

この記事で説明しているエディターは、クラシックエディターです。

 

「見やすいブログの書き方」についても以下の記事で解説しているので、よかったら読んでみてください。

 

関連記事
見やすいブログの書き方!改行・行間・装飾について【月25万ブロガーが解説】
見やすいブログの書き方!改行・行間・装飾について【月25万ブロガーが解説】

続きを見る

 

 

AFFINGER5「ボックス」の使い方

 

まずはAFFINGER5で使える、ボックスの使い方について説明していきます。

 

ボックスを選択する箇所が何箇所かあり、初めは戸惑うかもしれませんが、覚えてしまうとあっという間に記事装飾が作成可能です。

 

それでは、ボックスを作っていきましょう。

 

AFFINGER5 ボックスの使い方

エディターの上部にある、「スタイル」→「ボックス」を選択すると以下のようなボックスが選択できます。

 

ボックス「黄色」

 

ボックス「薄赤」

 

ボックス「グレー」

 

ボックス「引用風」

 

ボックス「ワイド背景」

 

ボックス「ワイド背景(左寄せ)」

 

ボックス「ワイド背景(右寄せ)」

 

 

AFFINGER5 ボックスの使い方

他にも「タグ」→「テキストパーツ」→「クリップメモ」と進むと、以下のようなボックスが選択可能。

クリップメモ

 

クリップメモ(テキスト)

 

ミニふきだし

 

自由なメモ

複合

 

自由なメモ

複合アイコンなし

 

まるもじ(小)

 

まるもじ(大)

 

AFFINGER5 ボックスの使い方

次に「タグ」→「ボックスデザイン」を選択すると以下のようなボックスが選択できます。

 

バナーボックス

テキスト

 

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

テキスト

 

メモ

メモボックス

 

+ クリックして下さい

スライドボックス

 

チェックボックス

 

こんな方におすすめ

  • テキスト
  • テキスト

 

 

上記のように、用意されているボックスがたくさんあります。

 

このボックスを使い分けることで、記事の読みやすさがグンっとアップ。

 

ボックスは重要なポイントをまとめたりできるので、この章にはこんなことが書いているんだ ・ここがポイントなんだということを表すのに最適です!

 

AFFINGER5「吹き出し」の使い方

次にAFFINGER5で使える吹き出しの使い方を、解説していきます。

 

まず吹き出しを使うときは、設定が必要です。

 

先に吹き出しに使う、画像を選んでおきましょう。

 

 

AFFINGER5 ふきだしの使い方

WordPress管理画面の「AFFINGER5管理」→「会話・ファビコン等」にいきます。

 

AFFINGER5 ふきだしの使い方

アイコンがアップロードできるので、先ほど選んでいた画像をアップロード。

 

AFFINGER5 ふきだしの使い方

何個か吹き出しを設定したい場合は、「アイコン画像2」・「アイコン画像3」とそれぞれアップロードしていきましょう。

 

 

これで吹き出しの設定は完了です!

 

 

AFFINGER5 ふきだしの使い方

エディター上部の「タグ」→「会話ふきだし」を選択すると吹き出しが使えます。

 

AFFINGER5 ふきだしの使い方

吹き出しの位置を左右変更したい場合は、「半角スペースr( r)」を入れると右側に表示することも可能。

 

 

YURU
こんな風に右側・左側に分けて使えるよ!
すごい!
なまお

 

上の吹き出しのように、色を変更することも可能です。

 

 

AFFINGER5 ふきだしの使い方

WordPress管理画面「外観」→「カスタマイズ」→「オプションカラー」→「会話風ふきだし」と進んでいきます。

そうすると、会話1・会話2・会話3と設定した吹き出しの色を変更可能です。

 

 

また吹き出しの枠を別の色に変更したい場合、同じ「会話風ふきだし」内の下の方へ進むと、以下のように選択できます。

AFFINGER5 ふきだしの使い方

 

  • アイコンの枠線を消す → アイコンの枠がなくなる
  • 吹き出しを角丸にしない → 吹き出しの四角い部分がまるくなる
  • ボーダーデザインタイプ(2px)に変更 → 吹き出しの枠線と背景の色を別々にできる

 

 

この「ボーダーデザインタイプに変更」にチェックを入れると、吹き出しの枠線と背景の色を別々に設定することが可能。

 

吹き出しを使うことで、会話している感覚で読者の疑問点や補足などを付け足せ、読者も飽きずに読み進めることができます。

 

 

AFFINGER5「マーカー」の使い方

AFFINGER5で使えるマーカーの使い方は以下になります。

 

AFFINGER5 マーカーの使い方

エディターの上部「スタイル」→「マーカー」を選択すると、マーカーが選べるようになります。

 

用意されているマーカーの種類は、8種類。

 

黄マーカー

黄マーカー(細)

赤マーカー

赤マーカー(細)

青マーカー

青マーカー(細)

鼠マーカー

鼠マーカー(細)

 

マーカーは文字を目立たせることができるので、記事の強調させたい文章・伝えたい文章に使うと効果的ですよ。

 

AFFINGER5「箇条書き(リスト)」の使い方

AFFINGER5の箇条書き(リスト)の使い方について説明します。

 

まず箇条書きしたいものを書く

 

りんご

バナナ

いちご

 

 

AFFINGER5 箇条書きの使い方

次に「スタイル」→「リスト」→「マル(リスト)」選択。

 

AFFINGER5 箇条書きの使い方

エディター上部「段落」の左から4番目のリストマークをクリック。

 

  • りんご
  • バナナ
  • いちご

 

これでリストは完成です。

 

 

もし番号付きで①②③のように振りたいなら、以下のようになります。

 

 

AFFINGER5 箇条書きの使い方

スタイル」→「リスト」→「ナンバリング(番号付きリスト)」→上部の左から5番目のリストマークをクリック。

 

 

  1. りんご
  2. バナナ
  3. いちご

 

これで完成です!

 

ボックス」+「箇条書き(リスト)」を作成する場合は、まずボックスから選んでからリストを作る流れになります。

 

AFFINGER5 箇条書きの使い方

ボックスを選択」→「ボックスの中に箇条書きしたい文章を入力

 

AFFINGER5 箇条書きの使い方

スタイル」→「リスト」で箇条書きの種類を選択。

 

AFFINGER5 箇条書きの使い方

エディター上部「段落」の左から4番目のリストマークをクリック。(番号をふりたい場合は5番目のマーク)

 

これで「箇条書き」+「ボックス」の完成です。

 

 

箇条書きは内容をうまくまとめることができ、読者にも伝えたいことをぱっと見で伝えることができます。

 

特に2つ以上並んだことを伝えるときは、箇条書きにして記事を読みやすくすると効果的です。

 

「ボックス」+「箇条書き(リスト)」は、ぱっと見でも伝わりやすいので、記事に積極的に入れていくといいですよ。

 

 

AFFINGER5「ボタン」の使い方

次は、AFFINGER5の「ボタン」の使い方を説明していきます。

 

ボタンの作り方は2パターンあります。

 

1つずつ解説していきます。

 

 

まず貼りたいサイトのリンクをコピーしておきます。

 

AFFINGER5 ボタンの使い方

次にエディター上部の「ボタン」をクリック。

 

赤枠の「#」の部分に、コピーしているURLを貼ります。

 

もともとあるボタンのタイトル「ボタン」を変更したければ、文字を変更で完了です!

 

 

次に2つ目の方法を紹介します。

 

2つ目の方法は、ボタンの種類を選ぶことができます。

 

AFFINGER5 ボタンの使い方

まず「タグ」→「カスタムボタン」を選択。

 

ボタンの種類を選びます。

 

AFFINGER5 ボタンの使い方

コピーしている、飛ばしたいリンク先を「」に入れます。

 

もともとあるボタンのタイトル「詳しくはコチラ」を変更したければ、文字を変更で完了です!

 

 

ボタンの種類は以下のような種類があり、他にも色が選べます。

 

ボタン

 

角丸ボタン

 

ボタン

 

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

 

 

 

 

ボタンは目に止まりやすく案内ページへスムーズに誘導できるので、何か購入ページなどに繋げるときに使うと効果的ですよ。

 

 

AFFINGER5「口コミ・お客様の声」の使い方

次にAFFINGER5の「口コミ・お客様の声」の使い方を説明していきます。

 

まず、ボックスを選びます。(どのボックスでもOK!)

 

AFFINGER5 口コミ・お客様の声の使い方

タグ」→「ボックスデザイン」→「マイボックス」→「基本」を選択。

 

次に選んだボックスの中に、コメント欄を作ります。

 

 

AFFINGER5 口コミ・お客様の声の使い方

タグ」→「その他パーツ」→「画像付きコメント

 

AFFINGER5 口コミ・お客様の声の使い方

タイトル・年齢・性別・画像を設定していきます。

 

「"  "」←赤枠のこの部分を変更すればOK!

 

アイコンを設定するときは、「画像」と書かれている部分に、メディアから画像を選んで貼り付ければOKです!

 

AFFINGER5 口コミ・お客様の声の使い方

これで、口コミ・お客様の声の表が完成です!!

 

 

 

口コミ

20代男性

ここのタピオカ超美味しい

 

口コミ

20代男性

ここのタピオカ超美味しい

 

口コミ

口コミ

20代男性

ここのタピオカ超美味しい

 

 

 

 

AFFINGER5「画像枠」の使い方

次にAFFINGER5の画像をわかりやすくするための、「画像枠」の使い方を解説します。

 

AFFINGER5 画像枠の使い方

メディアを追加」から画像を選択し、エディター上部にある「写真枠」を選択するだけです!

 

画像枠を使ってないもの↓

 

AFFINGER5 画像枠の使い方

 

 

画像枠を使っているもの↓

 

AFFINGER5 画像枠の使い方

 

 

画像が背景と一体になって見えずらくなっている場合は、画像枠を使うと目立たせることが可能です。

 

AFFINGER5「表(テーブル)」の使い方

次にAFFINGER5の表(テーブル)の使い方について解説していきます。

 

以下のような表が作成可能です。

 

AスーパーBスーパー
りんご100円150円
バナナ150円180円

 

 

まず、赤枠の表のマークをクリック。

AFFINGER5 表(テーブル)の使い方

クリックすると、表のマスが選べるようになるので縦と横の使いたい数を選択。

 

AFFINGER5 表(テーブル)の使い方

表の中に文字を入れていきます。

 

続いて、表に色をつけていきます。

 

AFFINGER5 表(テーブル)の使い方

色つけたい箇所を選択し、表のマークをクリック。

 

セル」→「セルのプロパティー」→「高度な設定」へ進むと色が選べるようになります。

AFFINGER5 表(テーブル)の使い方

 

色を選択。

AFFINGER5 表(テーブル)の使い方

これで表の完成です。

 

商品を比較するときや、レビュー記事の商品紹介のときに使うと読みやすくなります。

 

 

AFFINGER5のサイドバープロフィールの作成方法

AFFINGER5の使い方「ブログ記事に役立つ装飾のやり方」を解説!【カスタマイズ入門編】

 

AFFINGER5のサイドバープロフィール作成方法を解説していきます。

 

プロフィール蘭は重要なので、しっかり作っておきましょう!

 

プロフィールの作成方法を以下です。

 

  • 画像を設定
  • 自己紹介文を設定
  • SNSを設定
  • ウィジェットからサイドバーへプロフィールを設定

 

ひとつずつ解説していきます。

 

 

 

まず、設定するアイコンやヘッダー画像を用意しておきましょう。

 

 

AFFINGER5のサイドバープロフィールの作成方法

初めにWordPress管理画面の「外観」→「カスタマイズ」→「オプションカラー」→「サイト管理者紹介」へ進みます。

 

AFFINGER5のサイドバープロフィールの作成方法

そこで「ヘッダー画像」と「アバター画像(アイコン)」が設定できるので、用意しているアイコンや画像をアップロードします。

 

もしヘッダー画像が不要なら設定なしでOKです!

 

  • ヘッダー画像 →プロフィール上部の画像の部分(下の図だとパソコンの画像)
  • アバター画像 →アイコンの部分(下の図だとドリンク飲んでる男性の画像)

 

アップロードすると以下のようになります。

AFFINGER5のサイドバープロフィールの作成方法

この部分で、色も変更できるので同時に色も設定しておきましょう。

 

  • ボーダー色 → 枠の色
  • 背景色 →背景の色
  • テキスト色 →テキストの色
  • 角丸にする →プロフィールが丸くなる

 

設定すると以下のようになります。

 

AFFINGER5 プロフィール作成方法

 

 

色などを設定しない場合は以下のように表示されます。

AFFINGER5のサイドバープロフィールの作成方法

 

 

続いてプロフィールの文章を入力していきます。

 

AFFINGER5のサイドバープロフィールの作成方法

WordPress管理画面の「ユーザー」→「プロフィール」へ進みます。

 

AFFINGER5のサイドバープロフィールの作成方法

下の方に進むと、「プロフィール情報」があるので自己紹介文を入力。

 

AFFINGER5のサイドバープロフィールの作成方法

同時に、TwitterやInstagramなどのSNSのURLを入力する蘭があるので入力。

 

AFFINGER5のサイドバープロフィールの作成方法

次にWordPress管理画面の「外観」→「ウィジェット」へ進みます。

 

ウィジェットから「11_STINGERサイト管理…」→「サイドバートップ」→「ウィジェット追加」を行います。

 

AFFINGER5のサイドバープロフィールの作成方法

次に、「サイドバートップ」を開き、タイトルをつけて保存するとトップページにサイドバーが表示されます。

 

AFFINGER5のサイドバープロフィールの作成方法

 

これでサイドバーのプロフィール設定は完了です!

 

今回は簡易的に作りましたが、プロフィール文・SNSを表示させることでよりいいプロフィールになるので、ぜひ作ってみてくださいね!

 

AFFINGER5の使い方デザイン編!まずはこれを知っておこう

AFFINGER5の使い方「ブログ記事に役立つ装飾のやり方」を解説!【カスタマイズ入門編】

 

次に、AFFINGER5をデザインするときに、主に触る以下3箇所を解説!

 

  • カスタマイザー
  • ウィジェット
  • テーマ管理

 

上記でできることを知っておけば、いろんなカスタマイズができデザイン変更なども可能です。

 

それでは、解説していきます。

 

AFFINGER5「カスタマイザー」の使い方

AFFINGER5のカスタマイザーでどんなことができるのか説明していきます。

 

WordPressの管理画面「外観」→「カスタマイズ」のところです。

 

カスタマイズでは、見出しの変更やカラーの調整・ヘッダー画像などの画像設定が可能。

 

トップページのメニューの設定も、このカスタマイズのところでできます。

 

色や画像などを変更したい場合は、このカスタマイズのところで編集可能です。

 

ココがポイント

カラーの変更や、見出し、ヘッダー画像、トップページのメニューなどが設定可能

 

 

AFFINGER5「ウィジェット」の使い方

AFFINGER5のウィジェットでどんなことができるのか説明していきます。

 

WordPressの管理画面「外観」→「ウィジェット」のところです。

 

ウィジェットは、細かいパーツなどを設定してくれる部分になります。

 

トップページやサイドバーなどに、コンテンツを表示させるための設定などを行う場所です。

 

サイドバーにコンテンツを表示させたり、投稿記事の下にコンテンツを表示さえたいときは、このウィジェットで編集できます。

 

ココがポイント

トップページのコンテンツを色々アレンジすることが可能。

トップページや投稿記事下におく、コンテンツを選べる

 

 

AFFINGER5「テーマ管理」の使い方

AFFINGER5のテーマ管理でどんなことができるのか説明していきます。

 

WordPressの管理画面「AFFINGER5管理」のところです。

 

トップページのデザインを1カラムに変更したり、記事の表示数を変更することができます。

 

またトップページの画像サイズの編集ができたり、トップページでやることはこのテーマ管理のところで変更することが可能。

 

アナリティクスの設定やサーチコンソールの設定もこのテーマ管理で行います。

 

ココがポイント

トップページのデザインの変更

アナリティクスやサーチコンソールの設定など

 

 

AFFINGER5の使い方ブログ記事に役立つ装飾の仕方を解説!【カスタマイズ入門編】:まとめ

 

この記事では、AFFINGER5で使える記事装飾の使い方についてと、プロフィールの作成方法、カスタマイズを設定する場所を解説してきました。

 

記事装飾を使いこなすと、読者の読みやすい記事に仕上げることが可能です。

 

離脱率を下げ滞在時間をアップさせるためにも、装飾を使い、読者がスムーズに読める記事を作成していきましょう。

 

そうすることにより、SEOにも強くなり上位表示を目指せるよになり段々と稼げるようになっていきますよ!

 

AFFINGER5の購入を検討している方や、「意外と簡単に装飾できるんだ使ってみようかな」と思った方は、AFFINGER5のレビューを書いているのでそちらも読んでみて下さい。

 

また当ブログからAFFINGER5を購入してくれた方限定で、豪華特典もご用意しています!

 

 

関連記事
AFFINGER5豪華10大特典付レビュー!初心者の収益化を徹底サポートします
AFFINGER5豪華10特典付レビュー!開始5ヶ月で25万円稼いだノウハウ無料プレゼント!

続きを見る

 

お知らせ

この「YURU BLOG」経由でアフィンガー5を購入してくれた方限定で、画像100枚以上を使ったAFFINGER5のデザインマニュアル、トップページデザインのデザイン済みデータ(2種類)をプレゼントいたします。
その他、有料記事プレゼント、ブログ記事添削など、豪華特典7つをご用意させていただきました。

 

 

 

 

-ワードプレス

© 2021 YURU BLOG Powered by AFFINGER5