〈景品表示法に基づく表記〉当サイトはアフィリエイトプログラムによる収益を得ています。

ブログ運営・収益

【AFFINGER6(アフィンガー6)使い方】タグ装飾一覧【保存版】

2023年4月25日

affinger6 タグ 使い方

このブログではAFFINGER6を使って全てのサイト設計を行っているんだけど、有料テーマなだけあって、かなり細かなカスタマイズができる。

そこで今回は、AFFINGER6の数ある機能の中でも最も使用頻度が多いタグ機能の装飾一覧をまとめた。

すでにAFFINGER6を導入済みの人はブックマーク用としても使えるし、今AFFINGER6導入を検討している人は「へー。ボタン1つでこんなことができるんだ」程度で見ていってほしい。

Yasu
Yasuです。YouTubeTwitterやってます。お問い合わせはこちら

この記事を読むことで得られる情報

  • AFFINGER6のタグ機能でできることが分かる

この記事の目次(クリックでジャンプ)

タグ機能とは?

そもそもAFFINGER6のタグ機能って何って話なんだけど、こういうやつ↓。

*ここに文章を入れる*

これをWordPress上で表示しようと思ったらある程度のHTMLとCSSのスキルが求められるんだけど、AFFINGER6はこれがボタン1つでできる。しかも、この記事の終盤に紹介するように色とタグ同士の組み合わせを使えばほぼ無限通りパターンのタグを使うことができる。

AFFINGER6のタグ機能の使い方

ちなみにAFFINGER6導入済みなら記事編集画面のこの「タグ▼」ボタンからこれ以降に紹介する全てのタグ機能を呼び出せる。

affinger6 タグ 使い方

AFFINGER6タグ機能装飾一覧

ということでここから下にタグ機能の装飾一覧を並べた。

それぞれの装飾が「タグ▼」ボタン内のどこに配置されているかはこんな感じで↓階層を「>」で区切ってるから参考にしてほしい。

テキストパーツ > クリップメモ

メモ

外部リンク

ブックマーク

お知らせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

 

テキストパーツ > クリップメモ(テキスト)

メモ

参考

関連

注意

Check

次へ進む

前に戻る

質問

回答

 

テキストパーツ > ミニふきだし

基本

オレンジ

ピンク

ブルー

グリーン

レッド

ふきだしテキスト

*ここに文章を入れる*

 

テキストパーツ > 複合

自由なメモ

自由なメモ

ココがポイント

ココがポイン

ココがおすすめ

ココがおすすめ

ココがダメ

ココがダメ

ココに注意

ココに注意

さらに詳しく

さらに詳しく

◯才女性

◯才女性

◯才男性

◯才男性

 

テキストパーツ > 複合(アイコンなし)

自由なメモ

自由なメモ

ココがポイント

ココがポイント

ココがおすすめ

ココがおすすめ

ココがダメ

ココがダメ

ココに注意

ココに注意

もっと詳しく

もっと詳しく

つまづきポイント

つまづきポイント

 

テキストパーツ > まるもじ(小)

基本 オレンジ ピンク ブルー うすい注意 注意

 

テキストパーツ > まるもじ(大)

基本

オレンジ

ピンク

ブルー

はてな

チェック

うすい注意

注意

 

テキストパーツ > HTML(カスタム)

ふりがな

Pタグ

spanタグ

 

テキストパーツ > カスタムフォント

デフォルト

白影

 

テキストパーツ > ステップ

アイコンの色はAFFINGER6のメインカラーに依存

step
1
ステップ

step
2
ステップ

step
3
ステップ

 

テキストパーツ > ポイント

アイコンの色はAFFINGER6のメインカラーに依存

 

テキストパーツ > ラベル

こんな感じでブログカードと組み合わせて使用

 

テキストパーツ > 流れる文字

流れる文字

 

ボックスデザイン > バナー風ボックス

サイズ、カラーは自由に変更可能

基本

背景なし(高さ400px)

高さは自由に変更可能

左寄せ

 

ボックスデザイン > マイボックス

ポイント

基本

しかく(枠のみ)

まるみ

参考

参考

関連

関連

メモ

メモ

ポイント

ポイント

注意ポイント

注意ポイント

はてな

はてな

ふきだしテキスト

+ミニふきだし

ShortCode

 

ボックスデザイン > マイボックス(+CSSクラス)

メモ

メモ(下線のみ)

メモ(枠のみ)

メモ(枠・下線あり)

注意(下線のみ)

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

必要なモノ(ドット下線)

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト(ドット下線)

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ(ドット下線)

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

ボックスデザイン > 見出し付きフリーボックス

基本

枠線と枠内カラーはAFFINGER6のメインとサブカラーに依存

注意

はてな

ポイント

メモ

基本(タイトル幅100%)

注意(タイトル幅100%)

はてな(タイトル幅100%)

ポイント(タイトル幅100%)

メモ(タイトル幅100%)

 

ボックスデザイン > メモボックス

メモ

メモボックス

 

ボックスデザイン > スライドボックス

 

ボックスデザイン > チェックボックス(番号なしリスト)

 

ボックスデザイン > こんな方におすすめ(v)

こんな方におすすめ

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

 

ボックスデザイン > こんな方におすすめ[v]

こんな方におすすめ

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

 

ボックスデザイン > ガイドマップメニュー

 

ボックスデザイン > pre

 html
 

 

ボックスデザイン > pre:terminal

 command
 

 

ボックスデザイン > pre:shortcode

 shortcode
 

 

カスタムボタン > ノーマル

ボタンにはリンクを埋め込み可(キラキラエフェクト有)

基本

詳しくはコチラ(オレンジ)

詳しくはコチラ(レッド)

詳しくはコチラ(グリーン)

詳しくはコチラ(ブルー)

お問合せ

もっと詳しく(オレンジ)

もっと詳しく(ピンク)

もっと詳しく(ブルー)

人気ランキング

ランキングはコチラ

 

カスタムボタン > 角丸

ボタンにはリンク埋め込み可(光るエフェクト無)

基本

詳しくはコチラ(オレンジ)

詳しくはコチラ(レッド)

詳しくはコチラ(グリーン)

詳しくはコチラ(ブルー)

 

カスタムボタン > ミニ

ボタンにはリンク埋め込み可(光るエフェクト無)

基本

 

詳しくはコチラ(オレンジ)

 

詳しくはコチラ(レッド)

 

詳しくはコチラ(グリーン)

 

詳しくはコチラ(ブルー)

 

カスタムボタン > MCボタン

ボタンにはリンク埋め込み可(光るエフェクト有)

オレンジ

今すぐ申し込む

*ここに文章を入れる*

レッド

今すぐ申し込む

*ここに文章を入れる*

グリーン

今すぐ申し込む

*ここに文章を入れる*

ブルー

今すぐ申し込む

*ここに文章を入れる*

 

カスタムボタン > ボックスメニュー > 基本(4列)

 

カスタムボタン > ボックスメニュー > サブあり(4列)

 

カスタムボタン > ボックスメニュー > 縦並びタイプ

 

カスタムボタン > ボックスメニュー > 縦並びタイプ(サブあり)

 

カスタムボタン > ボックスメニュー > 縦並びタイプ(単品)

 

カスタムボタン > ボタンA

ボタンにはリンク埋め込み可(キラキラエフェクト無)

 

カスタムボタン > ボタンB

ボタンにはリンク埋め込み可(キラキラエフェクト無)

 

カスタムボタン > 前のページ(履歴)に戻る

 

会話ふきだし

※「AFFINGER設定 > ●●●から」最大8パターンを登録

Yasu
会話ふきだし

 

ランキング

ランキング1位(基本)

ランキング2位

ランキング3位

ランキング4位以下

 

レイアウト > 全サイズ

*30%

70%

50%

50%

free%

free%

  • 均等横並び
  • 均等横並び
  • 均等横並び

 

レイアウト > PCとTab(959px以上)

3分割

3分割

3分割

 

30%

70%

70%

30%

40%

60%

60%

40%

50%

50%

 

レイアウト > DIV

メイン

サブ

 

レイアウト > 背景ワイド

背景ワイド

 

レイアウト > タブ(切替ボタン) > 2つ




タブ1のコンテンツ

タブ2のコンテンツ


 

レイアウト > タブ(切替ボタン) > 3つ





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


 

レイアウト > タブ(切替ボタン) > 4つ






タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

タブ4のコンテンツ


 

レイアウト > タブ > 2つ




タブ1のコンテンツ

タブ2のコンテンツ


 

レイアウト > タブ > 3つ





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


 

レイアウト > タイムライン > 基本


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

レイアウト > タイムライン > センター


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

レイアウト > タイムライン > 基本(ステップ)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

レイアウト > タイムライン > センター(ステップ)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

レイアウト > タイムライン > ブログカード

 

レイアウト > タイムライン(カウント) > 基本


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

レイアウト > タイムライン(カウント) > センター


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

レイアウト > タイムライン(カウント) > ブログカード

 

レイアウト > table > table(シンプル)





テキスト

 

レイアウト > table > table(属性あり)






テキストテキスト

 

その他パーツ > Googleアイコン

desktop_mac
phone_iphone
tablet_mac
timer
location_on
directions_bike
directions_run
directions_car
directions_transit
subway
flight
local_parking
restaurant
store_mall_directory
cake

smoking_rooms
arrow_back
arrow_downward
arrow_forward
arrow_upward
radio_button_unchecked
close
mood
mood_bad
sentiment_satisfied
sentiment_very_dissatisfied
thumb_up_alt
thumb_down_alt
error
new_releases

 

その他パーツ > スター

 

 

 

 

 

 

 

その他パーツ > 年月(自動更新)

現在の年月を表示できます。

2024年12月

 

その他パーツ > 画像付きコメント

画像(60×60)

タイトル

◯代男性

 

その他パーツ > アドセンス

↓こんな感じでGoogleアドセンスを挿入できます。

 

その他パーツ > YouTube

 

その他パーツ > 三角(下矢印)

 

その他パーツ > スクロールナビ

 

その他パーツ > 目次(カスタム)

記事一覧 / カード > 記事一覧

記事IDを指定して特定の記事をブログカード形式で表示できます。

 

記事一覧 / カード > 記事一覧(スライドショー)

記事IDを指定して特定の記事をスライドショー形式で表示できます。

ブログ運営・収益

2023/11/9

【Twitter運用】画像にURLを埋め込む方法【外部ツール不要】

この記事を音声で聴く https://yasu-lifestyle.com/wp-content/uploads/2022/08/243003945802043.mp3 ブログ記事のPV数を上げたい。となると、まず重要なのはGoogle検索からの流入なんだけど、ブログ記事がGoogleに評価されるには時間がかかる。 そこで効果的なのはTwitter(X)を使うことなんだけど、ツイート時にブログのURLを貼るとこんな感じで画像が小さく表示される。 これでも悪くはないんだけど、PV数を上げるためにもクリックで ...

ReadMore

薄毛治療

2023/10/31

【薄毛】本当に効く薄毛改善方法。やっても効果がなかったこと解説付き

男として生まれた以上、遅かれ早かれ立ちはだかる壁。ハゲ。 父親はもうすぐ60歳。一向にハゲる気配はない。 一方自分はというと、26歳で急激に薄毛が進行。それから育毛系のサプリ、シャンプー、ケア、生活習慣の改善を試したけどどれも効果がなく、ハゲは徐々に進行。 もうダメかと諦めかけて、俺はこれから一生ハゲとして生きていくんだと決心をしかけたんだけど、弟からのおすすめで使い始めた2種類の薬を飲んだところ3ヶ月で髪が生え始めた。 ということで今回は自分がハゲ改善に至った経緯と、これまでに自分が薄毛改善のために行な ...

ReadMore

お得情報 健康管理ガジェット

2023/10/12

【プロテイン】コスパ最強おすすめの1選【17社49商品を比較】

プロテインといえば最近は筋トレ族だけにとどまらず、ダイエットとか美容目的で飲む人も増えていて、最近はコンビニとかスーパーでもプロテイン商品を目にすることが増えた。 久しぶりに別のプロテインを試してみようと思っておすすめのプロテインを調べてみると、案件に塗れた情報と、味を含めゴリゴリ主観でレビューされている情報ばかりで、プロテイン選びの基準が分からない。 まあインフルエンサーは彼らなりの事情があるんだろうけど、中には正しい情報を欲している人もいるはず。 ということで今回はなんのしがらみのない俺が、国内外17 ...

ReadMore

睡眠改善

2023/7/1

【Fitbit Inspire 3 レビュー】1万円で始める睡眠計測

良い睡眠を取るためには睡眠の量と質が大事という話は耳タコ。 睡眠時間は自分で管理できるけど、睡眠の質は自分では把握しようがない。同時に睡眠を改善するためには現状を把握しないことには改善もクソもないから高精度で睡眠を計測できる端末が必要。 ということで数あるスマートウォッチの中から「Fitbit Inspire 3」購入してしばらく経過したから使用感をレビューする。 Yasu Yasuです。YouTube、Twitter、TikTokやってます。お問い合わせはこちら。 この記事を読むことで得られる情報 Fi ...

ReadMore

同様にカテゴリIDもしくはタグIDを指定してブログカードとスライドショー形式で表示することもできます。

 

記事一覧 / カード > ブログカード > 参考

参考【Twitter運用】画像にURLを埋め込む方法【外部ツール不要】

続きを見る

 

記事一覧 / カード > ブログカード > CHECK(ふきだし)

こちらもCHECK

【Twitter運用】画像にURLを埋め込む方法【外部ツール不要】

続きを見る

 

記事一覧 / カード > ブログカード > サムネイルなし

【Twitter運用】画像にURLを埋め込む方法【外部ツール不要】

続きを見る

 

記事一覧 / カード > ブログカード > 影なし

【Twitter運用】画像にURLを埋め込む方法【外部ツール不要】

続きを見る

 

AFFINGER6オリジナルアイコン

このアイコンはAffinger6購入後、購入者用公式マニュアルから一覧を確認できます。

基本(38種類)

 ペン
 メモ
 (反転)
 チェック
 注意
 (反転)
 リンク
 はてな
 虫めがね
 (plus)
 (minus)
 プラス
 マイナス
 ハート
 ユーザー
 コメント
 電球
 (三角)
 お知らせ
 ダイヤ
 王冠
 初心者
 インフォ
 マル
 バツ
 ニジュウマル
 サンカク
 バー
 Like
 (反転)
 Bad
 (反転)
 指さし
 (反転)
 時計
 表情(嬉)
 表情(普)
 表情(悲)

その他(55種類)

 家(HOME)
 目
 目隠し
 フォルダー
 (open)
 ピン
 コピー
 メラ
 (レトロ)
 ペン
 クレジット
 お金
 外部リンク
 カート
 マップ
 サインイン
 サインアウト
 目次
 ダウンロード
 ダウンロード
 クリップ
 ロック
 (空き)
 PC
 タブレット
 モバイル
 プリント
 チャート
 動画
 メール
 (反転)
 写真
 ギフト
 スター
 (half)
 (反転)
 プラグ
 本
 ブックマーク
 PDF
 ZIP
 code
 ベル
 トロフィー
 魔法
 タグ
 ショートコード
 紙飛行機
 カレンダー
 写真
 フラッグ
 箱
 新聞
 P
 パレット

ブランド(6種類)

 instagram
 twitter
 google
 pinterest
 amazon
 wordpress

矢印(13種類)

 double-up
 double-down
 double-right
 angle-down
 angle-right
 angle-up
 caret-right
 arrow-circle-o-right
 arrow-circle-right
 arrow-right
 chevron-down
 chevron-right
 arrow

 

タグのアレンジ方法

affinger6 使い方

ここまでで紹介したタグ機能の装飾は全てボタン1つで使うことができるんだけど、色とかタグの一部を組み合わせればほぼ無限通りの装飾を使うことができる。

例えば↑のクリックメモは枠内に適応されている色を変更すれば↓のように変更できるし、

それに加えて、吹き出しを組み合わせるのもあり。

メモ


こんな感じで色と一部のタグの組み合わせだけでもかなりのパターンの装飾を使うことができる。

AFFINGER6導入で記事執筆に専念できる

affinger6 タグ 使い方

ということで今回はAffinger6のタグ機能を紹介したんだけど、これらは全てボタン1つで記事の中に入れ込むことができる。

もちろんAFFINGER6がなくてもある程度のHTMLとCSSスキルがあれば似たような装飾をすることはできる。

だから俺もブログを始めてから2年くらいはWordPressの無料テーマを使いながら、書店でHTMLとCSSの本を買ってサイト設計を勉強していたけど、記事を書くまでにあまりにも準備しないといけないことが多すぎて執筆作業に専念できなかった。

加えて言うと、どれだけ良い文章を書いていたとしてもページ内の見た目が整理されてなかったり、読んで欲しい文章を視覚的に強調することができなかったら、その文章は誰からも読まれないから、書いた内容をできるだけ読んでもらえるものにするためにもAFFINGER6は導入する価値がある。もしAFFINGER6導入に悩んでいる人は下記を読んで次のステップに進んでほしい。

【アフィンガー6】購入を迷ってる人に伝えたいこと【初心者向け】

続きを見る

ということでこれからブログ運営を真剣にやっていく人にはおすすめ。

AFFINGER6の詳細を確認する

【アフィンガー6】購入を迷ってる人に伝えたいこと【初心者向け】

続きを見る

  • この記事を書いた人

Yasu

南国宮崎出身。2022.7に会社を辞めて現ブロガー兼Youtuber。好きなもの:刺身盛合わせ、格闘技。嫌いなもの:八方美人。筋トレ、睡眠、ダイエットで生活をアップデートする情報を発信中 詳細な自己紹介 →【トルマンブログ自己紹介】 不器用なりに下した決断。

-ブログ運営・収益