【記事の質向上に】AFFINGER5のタグ一覧！テキストパーツ・ボックスデザイン

 

 

こんにちはアトム(AtomBlog1)です。

 

最近、テーマでAFFINGER5を使っている方を使っているサイトをよく見かけます。

AFFINGER5の良い点として少し高いテーマですが、SEOにも強く、自分でデザインのカスタマイズがしやすいのが特徴です。

しかし、逆に便利な機能が多すぎて使いこなせていないって人もいると思います。

 

その一つとして「タグ機能」です。

 

「タグ機能」を使いこなすことができれば分かりやすい記事を書くことができ、ユーザーも満足することができるので

ユーザーの滞在時間やPV数の向上につながるかもしれません。

 

そこで今回はAFFINFGER5の「タグ機能」の特によく使う「テキストパーツ」「ボックスデザイン」を一覧にまとめて、

 

使い方なども解説するのでユーザーを満足させたい方ぜひ参考にして自分の記事に生かしてください！

 

 

 

AFFINGER5のタグ機能はどこにある？

 

AFFINGERのタグ機能は記事を書く際のこの赤い枠にあるものクリックすればタグ機能を見ることができます。

 

クリックするとこんな感じで出てきます

 

 

今回はその中の「テキストパーツ」と「ボックスデザイン」のタグ一覧を作成しました。

 

使い方は簡単で自分が使いたいものをクリックすると

難しいコードのようなものが出るのですが、いじる必要がなく

ほとんどが書きたいコメントを記入するだけで簡単にできます！

 

全て「タグ機能」の名前を「✔︎〇〇」で表しているので気になるものがあれば、

 

自分でその名前を見つけて使用してみてください。

 

AFFINNGER5　タグ一覧：テキストパーツ

 

まずは「テキストパーツ」の一覧です。この赤枠の部分ですね。

 

クリップメモ

 

クリップメモは自分の強調したい言葉などによく使います。

 

他にもレビューなどのコメント用で使ったり、この点には注意して欲しい時に「注意文」を使ったりなど

 

幅広く使うことができます。

 

ミニふきだし

 

ミニふきだしでは赤マーカを引いている「これはダミーです。」を自分好みに変えることができます。

 

複合

 

「複合」は「クリップメモ」よりもアイコンを使いさらに強調しているタグ機能です。

僕自身もよく記事の冒頭やまとめの部分でよく使用しています。

赤マーカーで記されている所が自分でコメントを変えることができます。

 

CSSを理解できている人なら他にも色や大きさを変えることができますが、正直そこまで変えなくても十分使えます。

複合（アイコンなし）

 

「複合（アイコンなし）」は先ほど説明した「複合」と使い方は同じなので省きます。

 

まるもじ（小）

まるもじ（大）

AFFINGER5 タグ一覧：HTML（カスタム）

 

✔︎ルビ（ふりがな）

 

これはダミーです。これはダミーです。

この「ルビ（ふりがな）」の使いからは少し工夫が必要です。

まずをふりたいコメントを指定して「ルビ（ふりがな）」タグを押すと　ふりがな　が出てきます。

このふりがなを一度消してから他のふりがなを打とうとするとサイズは普段のサイズに戻ってしまうので

一度ふりがなの後に続けて打ってから、ふりがなだけを消すような仕方をします。

例えば「東京のふりがな」の場合は

「ふりがな」←と表示して「ふりがなとうきょう」と打ち、『ふりがな』だけを消すと

東京とうきょう

となります。

✔︎Pタグ

これはダミーです。

実際のコードはこんな感じです。黄色マーカーのところで色の変更なども行えます。

 

✔︎spanタグ

これはダミーです。

実際のコードはこんな感じです。pタグと同様に赤マーカーの所を変えたりすることができます。

カスタムフォント

 

✔︎デフォルト

これはダミーです。

 

✔︎白影

これはダミーです。

 

この二つは使い道は記事などではあまり使わなく、

ブログでの固定ページのカテゴリーの名前などに使う場合があります。

 

ステップ

 

step
1これはダミーです。

step
2これはダミーです。

step
3これはダミーです。

 

これは段階などを説明する時に使える「タグ機能」です。

例えば、動画配信サービスのダウンロード手順であったり、料理の手順などに使うことができます。

「ステップ」のコードはこちらです。

 

赤マーカのところを変えると番号を、黄色マークのところを変えるとコメントを変えることができます。

 

ポイント

 

これはダミーです。

 

ラベル

 

ラベルは画像に貼ったり、他には内部リンクカードに貼ったりなどの使い道があります。

 

画像だと配置に気をつけないといけないのでしたの画像の矢印の通りの配置すると綺麗なラベルを貼ることができます。

 

 

ボックスデザイン

 

次に「ボックスデザイン」です。

「ボックスデザイン」は以下の位置にあります。

バナー風ボックス

✔︎基本

✔︎背景なし（高さ400px)

 

現在高さが400pxとなっているので大きいのですが自分で調節可能です。

 

 

✔︎左寄せ

 

 

マイボックス

 

ボックスの使い方は以下の画像の通りです↓

 

こちらの赤いマーカのところにコメントを書くことでボックス内にコメントを表示できます。

 

マイボックス（+CSSクラス）

 

こちらも「マイボックス」と同様に赤マーカーのところにコメントを入れると表示できます。

 

また黄色マーカーで引いているところもコメントを変えることができます。

 

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

 

こちらも「マイボックス」と同様に「見出し」と「コメント」を変更可能です。

 

メモボックス

 

 

メモボックスはちょっとした補足などによく使うことができます。

 

そこまで強調しないデザインのボックスなので他のボックスと使い分けることもできます。

スライドボックス

 

 

スライドボックスは「クリックをしてください」の所をクリックすると

あらかじめ用意していたコメントが出る仕組みになっています。

例えばクイズ方式とかで答えを隠したり、

重要な言葉をあえて隠したりなどに使うこともできます。

 

チェックボックス（番号なしリスト）

 

チェックボックスはデザインもシンプルなボックスですが、

ボックスを増やすこともできます！

 

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

 

「こんな方におすすめ」と「これはダミーです。」を変更や数も変更可能です。

 

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

 

こちらも「こんな方におすすめ」と「これはダミーです。」を変更や数も変更可能です。

ガイドマップ

 

 

ガイドマップは目次のようにリンクをダミーリンクを当てはめることができます。

 

例えば、何かの手順などを説明する時に内部リンクでつなげることもできますよね。

 

pre

 

 html

preはコードを表示したい場合に使います。コードを入力するだけでコードを表示できます。

pre:terminal

 command

pre:terminalもpreと同様で、コードを入力したい時に用います。

 

AFFINGER5のタグ一覧まとめ

今回は「AFFINGER5」のタグ機能のテキストパーツとボックスデザインをまとめてました。

このタグ機能を上手く使いこなせば

記事もより読みやすくなり、

ユーザーの滞在時間やユーザーアビリティも高くなるかもしれません。

最後までご覧いただきありがとうございました。