0→1ブログで収益化 ブログの書き方

【ブログ時短】アフィンガー6記事装飾を図解入りで解説(テキストパーツ編)

悩む
早速アフィンガー6をダウンロードしたけどまだ全然使いこなせない… マニュアルを見るのも欲しい答えを探すのに一苦労… 実例をチェックして時短でブログ更新していきたい!
 
僕も同じ悩みがあったので、自分でまとめました! この記事でどこにどんな機能があるのか?をプレビュー付きで確認できます!
rikuパパ
 

本記事の内容

  • タグ機能の「テキストパーツ」の呼び出し方が分かる
  • 実際のプレビューが画像付きで分かる
  • テキストパーツの中からお気に入りを見つけられる
  収益化を目指してアフィンガー6をダウンロードされた方、アフィンガー6の購入を検討されている方に向けて、アフィンガーを使ったブログ歴2年のrikuパパが画像付きで解説します。   最短でブログ収益化を目指している方は是非チェックしてみてください。 タグ機能のイメージが沸きますよ。    

目次

見出し2 記事の見出しに使います

 

▲【見出し2】の出し方▲

 

見出し3  見出しの中の中項目

▲【見出し3】の出し方▲

 

見出し4 見出し3の中の小項目

 

▲【見出し4】の出し方▲

  記事を見やすくするための工夫です。 必ず読み手を意識して記事作成をしていきましょう。    

テキストパーツについて

  ここではテキストパーツについて解説します。 メニューバーの「タブ」をクリックすると様々な装飾を選択できます。    

クリップメモ

クリップメモについて図解入りで解説していきます。  

クリップメモ→「メモ」

   

▲【メモ】の出し方▲

活用例は以下

  • 要約やメモ書きで表現する時に
  • 読者に注目してほしい時に!

メモ

▲実際のプレビュー▲

  以下、rikuパパがカスタムしたクリップメモの【メモ】になります。

メモ(サンプル)

▲カラーとサイズをカスタムしたサンプルプレビュー▲

  カスタムしたサンプル用のソースコードです。 実際に挿入するとサンプルと同じように表示されます。

 html [st-cmemo webicon="st-svg-file-text-o" iconcolor="#3333ff" bgcolor="#eaf4ff" color="#000000" bordercolor="#606060" borderwidth="1" iconsize="150"]メモ(サンプル)[/st-cmemo] 

▲サンプル用コード▲

   

悩む
うわ…専門的な文字の並びでめまいがしてきます… rikuパパ!わかりやすく解説してください!
 
大丈夫です!コードと意味についても簡単に解説します。 次のグラフをご覧ください。
rikuパパ
 

コード 意味
iconcolor="xxxxx" アイコンの色
bgcolor="xxxxx" 枠の塗りつぶし
color="xxxxx" 文字の色
bordercolor="xxxxx" 線の色(枠線、アイコン右の縦線)
borderwidth="xxx" 枠線の太さ=数値を入力 ※本サンプルでは"1"に指定
iconsize="xxx" アイコンのサイズ変更=数値を入力 ※本サンプルでは"150"に指定

  いかがですか? 基本的には、読者の皆さんはデフォルト仕様で問題ないと思います。 拘りを持ちたい方、サイトやブログのテーマに合わせてカスタムしたい方は参考にしてみてくださいね!  

クリップメモ→「外部リンク」

 

▲【外部リンク】の出し方▲

外部リンク

▲実際のプレビュー▲

 

クリップメモ→「ブックマーク」

▲【ブックマーク】の出し方▲

ブックマークです

▲実際のプレビュー▲

 

クリップメモ→「おしらせ」

▲【おしらせ】の出し方▲

おしらせ

▲実際のプレビュー▲

 

クリップメモ→「はてな」

▲【はてな】の出し方▲

はてな

▲実際のプレビュー▲

 

クリップメモ→「コメント」

▲【コメント】の出し方▲

コメント

▲実際のプレビュー▲

 

クリップメモ→「コード」

▲【コード】の出し方▲

コード

▲実際のプレビュー▲

 

クリップメモ→「ポイント」

▲【ポイント】の出し方▲

ポイント

▲実際のプレビュー▲

 

クリップメモ→「ユーザー」

▲【ユーザー】の出し方▲

ユーザー

▲実際のプレビュー▲

 

クリップメモ→「初心者」

▲【初心者】の出し方▲

初心者

▲実際のプレビュー▲

 

クリップメモ→「注意文」

▲【注意文】の出し方▲

注意文

▲実際のプレビュー▲

 

クリップメモ→「注意文(グレー)

▲【注意文(グレー)】の出し方▲

注意文(グレー)

▲実際のプレビュー▲

 

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

ここではクリップメモ(テキスト)について実例付きで解説します。

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

▲【メモ】の出し方▲

メモ

▲実際のプレビュー▲

 

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

▲【参考】の出し方▲

参考

▲実際のプレビュー▲

 

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

 

▲【関連】の出し方▲

関連

▲実際のプレビュー▲

 

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

▲【注意】の出し方▲

注意

▲実際のプレビュー▲

 

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

▲【Check】の出し方▲

Check

▲実際のプレビュー▲

 

クリップメモ(テキスト)→次へ進む

▲【次へ進む】の出し方▲

次へ進む

▲実際のプレビュー▲

 

クリップメモ(テキスト)→前に戻る

 

▲【前に戻る】の出し方▲

前に戻る

▲実際のプレビュー▲

 

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

▲【質問】の出し方▲

質問

▲実際のプレビュー▲

 

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

▲【回答】の出し方▲

回答

▲実際のプレビュー▲

 

ミニ吹き出し

ミニ吹き出しについても色別で解説します。  

基本

 

▲【基本】の出し方▲

基本

▲実際のプレビュー▲

 

オレンジ

以下の各色は「テキストパーツ」→「ミニ吹き出し」の中から選べるようになっています。  

オレンジ

 

ピンク

ピンク

ブルー

ブルー

グリーン

グリーン

レッド

レッド

複合

複合について図解入りで解説します。

自由なメモ

 

▲【自由なメモ】の出し方▲

 

自由なメモ

ここにはテキストを入れます

▲実際のプレビュー▲

 

ここがポイント

 

▲【ここがポイント】の出し方▲

 

ココがポイント

ここにはテキストを入れます

▲実際のプレビュー▲

 

ここがおすすめ

 

▲【基本】の出し方▲

 

ココがおすすめ

ここにはテキストを入れます

▲実際のプレビュー▲

 

ここがダメ

 

▲【基本】の出し方▲

 

ココがダメ

ここにはテキストを入れます

▲実際のプレビュー▲

 

ここに注意

 

▲【基本】の出し方▲

 

ココに注意

ここにはテキストを入れます

▲実際のプレビュー▲

 

もっと詳しく

 

▲【基本】の出し方▲

 

さらに詳しく

ここにはテキストを入れます

▲実際のプレビュー▲

 

女性コメント

 

▲【基本】の出し方▲

 

◯才女性

ここにはテキストを入れます

▲実際のプレビュー▲

 

男性コメント

 

▲【基本】の出し方▲

 

◯才男性

ここにはテキストを入れます

▲実際のプレビュー▲

 

複合(アイコンなし)

  複合(アイコン)なしについても図解入りで解説します。  

自由なメモ

 

▲【基本】の出し方▲

 

自由なメモ

ここにはテキストを入れます

▲実際のプレビュー▲

 

ここがポイント

 

▲【ここがポイント】の出し方▲

 

ココがポイント

ここにはテキストを入れます

▲実際のプレビュー▲

 

ココがおすすめ

 

▲【ココがおすすめ】の出し方▲

 

ココがおすすめ

ここにはテキストを入れます

▲実際のプレビュー▲

 

ココがダメ

 

▲【ココがダメ】の出し方▲

 

ココがダメ

ここにはテキストを入れます

▲実際のプレビュー▲

 

ココに注意

 

▲【ここに注意】の出し方▲

 

ココに注意

ここにはテキストを入れます

▲実際のプレビュー▲

 

もっと詳しく

 

▲【もっと詳しく】の出し方▲

 

もっと詳しく

ここにはテキストを入れます

▲実際のプレビュー▲

 

はてなマーク

 

▲【はてなマーク】の出し方▲

 

つまづきポイント

ここにはテキストを入れます

▲実際のプレビュー▲

 

まるもじ(小)

まるもじ(小)について図解入りで解説します。  

▲【基本】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

 

オレンジ

ここにはテキストを入れます

ピンク

ここにはテキストを入れます

ブルー

ここにはテキストを入れます

うすい注意

ここにはテキストを入れます

注意

ここにはテキストを入れます

まるもじ(大)

まるもじ(大)について図解入りで解説します。    

▲【基本】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

 

オレンジ

ここにはテキストを入れます

ピンク

ここにはテキストを入れます

ブルー

ここにはテキストを入れます

はてな

ここにはテキストを入れます

チェック

ここにはテキストを入れます

うすい注意

ここにはテキストを入れます

注意

ここにはテキストを入れます

HTML(カスタム)

HTML(カスタム)について図解入りで解説します。  

ルビ(ふりがな)

 

▲【ルビ(ふりがな)】の出し方▲ ※ふりがなを入れたい語句を選択した状態で呼び出します

 

 「薔薇」ばら

▲実際のプレビュー▲ ※テキスト例 薔薇という文字にルビ(ふりがな)を振っています

 

Pタグ

 

▲【Pタグ】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

 

spanタグ

 

▲【spanタグ】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

ルビ(ふりがな)は利用シーンもあるかと思いますが、「Pタグ」「spanタグ」は使用しなくても問題ないと思います。
rikuパパ

カスタムフォント

カスタムフォントについて図解入りで解説します。    

デフォルト

 

▲【デフォルト】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

 

白影

 

▲【白影】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

 

ステップ

  ステップについて図解入りで解説します。  

▲【ステップ】の出し方▲

 

step
1
ここにはテキストを入れます

step
2
ここにはテキストを入れます

step
3
ここにはテキストを入れます

▲実際のプレビュー▲

 

簡単に作成をしてみましょう。 rikuパパの朝のルーティン(顔を洗う、歯を磨く、身支度をする)を「ステップ」で表記してみます。
rikuパパ
 

step
1
顔を洗う

step
2
歯を磨く

step
3
身支度をする

▲朝のルーティンを「ステップ」で表記したプレビュー▲

 html [st-step step_no="1"]顔を洗う[/st-step] [st-step step_no="2"]歯を磨く[/st-step] [st-step step_no="3"]身支度をする[/st-step] 

▲サンプル用コード▲

 

ポイント

 

▲【ポイント】の出し方▲

ここにはテキストを入れます

▲実際のプレビュー▲

 

ラベル

 

▲【ラベル】の出し方▲

 

「ラベル」の使い方は、画像に差し込んだり、関連したブログの記事に差し込むと効果的です。
rikuパパ
 
おすすめ

▲実際のプレビュー(画像の差し込み例)▲

 

流れる文字(marquse風)

 

▲【流れる文字】の出し方▲

 

ここにはテキストを入れます  ここにはテキストを入れます  ここにはテキストを入れます

▲実際のプレビュー▲

 

まとめ | アフィンガー6 記事装飾方法(テキストパーツ)を解説

  本記事では、ブログをスタートされたばかりの方向けに「アフィンガー6の記事装飾(テキストパーツ)の呼び出し方とプレビュー」を解説しました。 ブログ収益化には必要不可欠な記事作成時の装飾機能、このテキストパーツを使えると読者の皆さんの見やすさに繋がります。   見やすい記事は【ブログ収益化】において必要不可欠なスキルです!    

記事のまとめ

  • アフィンガー6タグ機能「テキストパーツ」の呼び出し方
  • 実際のプレビュー画像
   
丁寧すぎるほどの解説かもしれませんが、rikuパパも悪戦苦闘したのでこの悩みはブログ初心者のどなたかに届けば幸いです。
rikuパパ
  他にもアフィンガーの装飾機能の記事もあります。 ご興味あれば、見てみて下さい。

-0→1ブログで収益化, ブログの書き方
-, ,