AFFINGER

AFFINGER5の記事装飾タグ一覧【テキストパーツ編】

おさむ
AFFINGERのテキスト装飾って、たくさんありすぎて困りませんか?

 

「どれをクリックしたらどの装飾が表示されるんだろう?」と悩み、エディタでとりあえずショートコードを出力して「プレビュー」で確認する。

 

この作業、慣れるまでは仕方ないのかもしれないですけど、死ぬほどメンドクサイ!!

 

ということで、この記事さえ開いておけばプレビューを押さなくても「どのタブでどの装飾が出力されるかが分かる」ようにしました!

 

よかったら活用してください

 

AFFINGERで使える装飾一覧(タグ)

 

「ダッシュボード」→「投稿」→「新規追加」で表示される【投稿作成画面】で使えるAFFINGERの装飾をサンプルとともに紹介します。

 

まずはビジュアルエディタのツールバーにある【タグ(またはスタイル)】で使える装飾から一気に見ていきましょう!

クリップメモ

AFFINGERテキスト装飾_テキストパーツ_クリップメモ

メモ

test

外部リンク

test

ブックマーク

test

おしらせ

test

はてな

test

コメント

test

コード

test

ポイント

test

ユーザー

test

初心者

test

注意文

test

注意文(グレー)

test

[?]ガイド※使用不可

ここにテキスト

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

メモ

test

参考

test

関連

test

注意

test

Check

test

次へ進む

test

前に戻る

test

質問

test

回答

test

ミニふきだし

AFFINGERテキスト装飾_テキストパーツ_ミニふきだし

基本

基本のふきだし

オレンジ

オレンジのミニふきだし

ピンク

ピンクのミニふきだし

ブルー

ブルーのミニふきだし

グリーン

グリーンのミニふきだし

レッド

レッドのミニふきだし

+マイボックス

ふきだしテキスト

「ミニふきだし(基本)」と「マイボックス」がセットになった!

[?]ガイド※使用不可

記事を公開すると以下のように装飾されているように見えますが、実際は本来指定されるべきCSSが何も指定されていません。(画像)

ここにテキスト

複合

AFFINGERテキスト装飾_テキストパーツ_複合

自由なメモ

自由なメモ

テストテキスト

ココがポイント

ココがポイント

テストテキスト

ココがおすすめ

ココがおすすめ

テストテキスト

ココがダメ

ココがダメ

テストテキスト

ココに注意

ココに注意

テストテキスト

もっと詳しく

さらに詳しく

テストテキスト

女性コメント

◯才女性

テストテキスト

男性コメント

◯才男性

テストテキスト

複合(アイコンなし)

AFFINGERテキスト装飾_テキストパーツ_複合(アイコンなし)

※「ふきだし」のテキストと「ボックス」のテキストはそれぞれ自由に設定可能です。

自由なメモ

自由なメモ

テストテキスト

ココがポイント

ココがポイント

テストテキスト

ココがおすすめ

ココがおすすめ

テストテキスト

ココがダメ

ココがダメ

テストテキスト

ココに注意

ココに注意

テストテキスト

もっと詳しく

もっと詳しく

テストテキスト

はてなマーク

つまづきポイント

テストテキスト

 

まるもじ(小)

 

基本

テストテキスト

オレンジ

テストテキスト

ピンク

テストテキスト

ブルー

テストテキスト

うすい注意

テストテキスト

注意

テストテキスト

 

まるもじ(大)

AFFINGERテキスト装飾_テキストパーツ_まるもじ(大)

基本

テストテキスト

オレンジ

テストテキスト

ピンク

テストテキスト

ブルー

テストテキスト

はてな

テストテキスト

チェック

テストテキスト

うすい注意

テストテキスト

注意

[?]ガイド※使用不可

ここにテキスト

 

HTML(カスタム)

AFFINGERテキスト装飾_テキストパーツ_HTML(カスタム)

ルビ(ふりがな)

以下のように「ふりがな」を追加可能です。

諸行無常しょぎょうむじょう

↓使い方動画

Pタグ

以下のショートコードが出力されます。

使うことはないと思います。僕は使ってません。

[st-p add_style=""][/st-p]

SPANタグ

以下のショートコードが出力されます。

こちらも使うことはないと思います。

[st-span add_style=""][/st-span]

 

カスタムフォント

AFFINGERテキスト装飾_テキストパーツ_カスタムフォント

デフォルト

テストテキスト

白影

テストテキスト

ステップ

AFFINGERテキスト装飾_テキストパーツ_ステップ

step
1
テスト1

step
2
テスト2

step
3
テスト3

↓ビジュアルエディタ 上で記載している内容

[st-step step_no="1"]テスト1[/st-step]

[st-step step_no="2"]テスト2[/st-step]

[st-step step_no="3"]テスト3[/st-step]

 

ポイント

AFFINGERテキスト装飾_テキストパーツ_ポイント

 

テストテキスト

 

※アイコンの色は「ダッシュボード」→「外観」→「カスタマイズ」→「[+]オプションカラー」→「ステップ / ポイント」から変更可能です。

 

ラベル

AFFINGERテキスト装飾_テキストパーツ_ラベル

 

AFFINGERテキスト装飾_テキストパーツ_ラベル_サンプル

 

ビジュアルエディタで上記のように記述すると、以下のように表示されます。

 

おすすめ

流れる文字(marquee風)

AFFINGERテキスト装飾_テキストパーツ_流れる文字

 

テストテキスト

 

  • この記事を書いた人

おさむ

【 仕事 】スタートアップIT系事業会社のマーケティング担当。副業でアフィリエイトとライター業やってます。運営サイトの合計月間PV100万、最高月収85万。【 趣味 】個人でWebアプリ開発中。開発・分析・筋トレ・下ネタが好き。PythonやRで機械学習・ディープラーニング勉強中。【 経歴 】ダンス日本1位→LA留学→プロ挫折→Web会社→日系コンサル→IT系マーケ+Webアプリ個人開発。

-AFFINGER

© 2020 Osamu Blog Powered by AFFINGER5