AFFINGER

アフィンガー(WING)で使えるタグ一覧【使い方説明付き】

2020年7月6日

 

アフィンガー5でブログを編集するときに使うタグ一覧を作りました。

 

別記事で詳しい使い方の説明をしているものもあります。

 

 

 

タグ→テキストパーツ

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

メモ

外部リンク

ブックマーク

おしらせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文(グレー)

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

メモ

参考

関連

注意

Check

次へ進む

前へ戻る

質問

回答

 

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

基本

オレンジ

ピンク

ブルー

グリーン

レッド

テキスト

マイボックス

 

 

テキストパーツ→複合

自由なメモ

ココがポイント

ココがおすすめ

ココがダメ

ココに注意

さらに詳しく

◯才女性

◯才男性

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

自由なメモ

ココがポイント

ココがおすすめ

ココがダメ

ココに注意

もっと詳しく

つまづきポイント

 

 

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

基本

 

オレンジ

 

ピンク

 

ブルー

 

うすい注意

 

注意

 

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

基本

オレンジ

ピンク

ブルー

はてな

チェック

うすい注意

注意

 

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

ルビ(ふりがな)

たけだしんげん
武田信玄

 

Pタグ

(例)

こんにちわ

コード→[st-p add_style="color: #3366ff;"]こんにちわ[/st-p]

 

spanタグ

(例)こんにちわ

コード→[st-span add_style="padding:5px;background:#3366ff;"]こんにちわ[/st-span]

 

上2つはCSSのスタイルを直接書いて、デザインできるショートコードです。

CSSが書ける人向けのタグになります。

 

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

デフォルト

CSSでフォントサイズを任意の大きさにできるタグ(デフォルトは150)

白影

こんばんわ

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

step
1
ジャガイモを切ります

step
2
人参を切ります

step
3
玉ねぎを切ります

 

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

ココがポイント!

テキストパーツ→ラベル

おすすめ

 

 

テキストパーツ→流れる文字(marquee風)

あいうえお・かきくけこ・さしすせそ

 

 

タグ→ボックスデザイン

バナー風ボックス

アフィンガーの購入はココをクリック

稼ぎたいならアフィンガー!

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】バナー風ボックスを使ったデザイン【簡単ショートコード】

  今日はアフィンガー5でバナー風ボックスを使ったデザインをしていきます。     作るデザインのサンプル   サイトマップ こてつの自由帳のサイトマップになり ...

続きを見る

 

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

ポイント

参考

関連

 

メモ

ポイント

注意ポイント

はてな

ふきだしテキスト

 

 

ボックスデザイン→マイボックス
(+CCSクラス)

メモ

メモ

メモ

メモ

ここに注意

必要なモノ

  • テキスト
  • テキスト
  • テキスト

必要なモノ

  • テキスト
  • テキスト
  • テキスト

チェックリスト

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

チェックリスト

  • テキスト
  • テキスト
  • テキスト

簡単な流れ

  • テキスト
  • テキスト
  • テキスト

簡単な流れ

  • テキスト
  • テキスト
  • テキスト

 

 

ボックスデザイン→見出しつきフリーボックス

基本

注意

はてな

ポイント

メモ

基本(タイトル幅100%)

注意(タイトル幅100%)

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

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

メモ(タイトル幅100%)

 

 

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

メモ

 

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

+ クリックして下さい

 

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

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

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

こんな方におすすめ

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

 

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

こんな方におすすめ

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

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

 

  • ボックスデザイン→pre:

     html
    
  • ボックスデザイン→pre:terminal

     command
    
  • ボックスデザイン→pre:shortcode

    [/] shortcode
    

 

 

タグ→カスタムボタン

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

 

 

カスタムボタン→MCボタン

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

AFFINGER5はコチラから

今すぐ使ってみる

※使って後悔なし

 

カスタムボタン→ボックスメニュー

\基本(4列)/

\サブあり(4列)/

\縦並びタイプ/

\縦並びタイプ(サブあり)/

\縦並びタイプ(単品)/

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】ボックスメニューの使い方【サイドバーにも使える】

  アフィンガーで気に入っている機能の一つがボックスメニューで、アイコン付きのリンクボックスを作成できるショートコードになります。   こてつの自由帳でもトップページのサイドバーに ...

続きを見る

 

 

カスタムボタン→ボタンA・B

 

 

タグ→会話吹き出し
おはよう!

 

もう昼だよ!

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】会話ふきだしの使い方と画像設定方法

  アフィンガーを使っていると大活躍するのが会話ふきだしタグ。   こてつです   いろんなブログで使っているのを見かけます。   おはよう!   も ...

続きを見る

 

タグ→ランキング

ランキング1位(基本)

ランキング2位

ランキング3位

ランキング4位

 

 

タグ→レイアウト

全サイズ→左右30:70%

ABCDEFG・HIJKLNM・OPQRSTU・VWXYZ

あいうえお・かきくけこ・さしすせそ・たちつてと・なにぬねの・はひふへほ・まみむめも・やゆよ・らりるれろ・わをん

 

 

全サイズ→左右50%

 

全サイズ→左右free%

任意のサイズに変更可能(20%)

任意のサイズに変更可能(80%)

 

全サイズ→均等横並び

 

自分でコードをいじらなくても、エンターキーで均等なコンテンツを増やせるのが良いところ。

 

PCとTab(959px以上)→3分割

 

この他にも

・左右30:70%

・左右70:30%

・左右40:60%

・左右60:40%

・左右50%

があります。

画像を3つ並べて表示させたいときなどに便利なレイアウトです。

 

レイアウト→メイン

任意のクラスを設定し、divを作成して囲むショートコード。

[st-div class="任意のクラス" margin="0 0 20px 0" padding="0 0 0 0" add_style=""]テキスト[/st-div]

 

レイアウト→背景ワイド

 

レイアウト→タブ(切替ボタン)

 

レイアウト→タブ→3つ

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】便利なタブのレイアウトを紹介

  アフィンガー5のタグって種類が多くて使い切れていなかったり、知らなかったものがあったりしますよね。   こてつも全部は把握していなし、まだ使ったことすらないタグがたくさんありま ...

続きを見る

 

タイムライン→基本


  • タイトル1

    コンテンツ


  • タイトル2

    コンテンツ


  • タイトル3

    コンテンツ


タイムライン→基本(センター)


  • タイトル1

    コンテンツ


  • タイトル2

    コンテンツ


  • タイトル3

    コンテンツ


 

タイムライン→基本(ステップ)


  • step.1

    コンテンツ


  • step.2

    コンテンツ


  • step.3

    コンテンツ


タイムライン→センター
(ステップ)


  • step.1

    コンテンツ


  • step.2

    コンテンツ


  • step.3

    コンテンツ


 

タイムライン→ブログカード

 

タイムライン(カウント)→基本


  • タイトル1

    コンテンツ


  • タイトル2

    コンテンツ


  • タイトル3

    コンテンツ


タイムライン(カウント)→センター


  • タイトル1

    コンテンツ


  • タイトル2

    コンテンツ


  • タイトル3

    コンテンツ


 

タイムライン→ブログカード(カウント)

 

タグ→その他パーツ

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

 

スター

 

 

 

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

タイトル

◯代男性

 

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

ダッシュボード  →  外観  →  ウィジェット →「広告・Googleアドセンス用 336px」に設定したコンテンツをショートコードで呼び出せるタグになります。

その他パーツ→オリジナルショートコード

ダッシュボード  →  外観  →  ウィジェット  → 「オリジナルのショートコード作成ウィジェット」に設定したコンテンツをショートコードで呼び出せるタグになります。

 

その他パーツ→YouTube

タグ一つでYoutube動画リンクを静止画で表示するショートコード。

そのまま動画を貼るとページが重たくなるので、なるべくこのタグを使うことをオススメします。

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】意外と知らないYoutube動画リンクを軽くできるタグ

  AFFINGERを使っているのに、Youtube動画リンクをそのまま記事に貼っていませんか?   WordPressはYoutubeのURLを貼るだけで動画リンクが自動表示され ...

続きを見る

 

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

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

 

その他パーツ→目次カスタム

 

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】目次の作り方【図解】

  今日はアフィンガーで使える目次を設定していきます。 今回作る目次はコチラ。 目次 タイトル1 タイトル2 タイトル3   1度覚えてしまえば簡単なので安心してください。 &nb ...

続きを見る

 

その他パーツ→目次カスタム(TOC+)

ワードプレスの目次プラグイン「Table of Contents Plus」をショートコードで呼び出せるタグになります。

 

タグ→記事一覧

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

歯列矯正

【歯列矯正】ドルツジェットウォッシャー【2機種比較&レビュー】

2020/6/29  

  歯列矯正をしていると気になるのが、食後口の中が食べかすだらけになる事。 こてつは食後の歯磨きが習慣化されたら、人前に出る時に前歯に青のりがついているなんてことはない。 ないんだけど、実は ...

歯列矯正

【大人の歯列矯正】現在までの治療費【3年3ヶ月】

2020/4/6  

  歯列矯正を始めて3年2ヶ月23日(1178日)経過しました! こてつです。 ようやく器具が外せる目処が立ったので、これまでの治療費を合計してみました!   歯列矯正にかかる費用 ...

 

記事一覧/カード→カテゴリ一覧

AFFINGER

【AFFINGER5】ボックスメニューの使い方【サイドバーにも使える】

  アフィンガーで気に入っている機能の一つがボックスメニューで、アイコン付きのリンクボックスを作成できるショートコードになります。   こてつの自由帳でもトップページのサイドバーに ...

AFFINGER

【AFFINGER5】記事コピーボタンを設置する方法(この記事タイトルとURLをコピー)

  ブログを更新したらSNSに呟いていますか? こてつはブログを更新したらTwitterで呟いています。   ツイッターカード機能を使うと、URLを貼るだけで勝手にアイキャッチ画像 ...

 

記事一覧/カード→カテゴリ一覧(スライドショー)

ガジェット コラム

2020/6/14

【BRAVIA】一部機種Huluサービス終了

  2020年7月24日以降、SONY製品の一部機種でHuluのサービスが終了します。 こてつさん家のブラビアがこれに該当してしまったので、これを機にAmazon Fire TVの導入を検討しています。   Huluが観られなくなる リビングのメインテレビ、SONYのBRAVIA40インチなんですけど 無線LAN機能内蔵なのでテレビでインターネットができます。 2014年発売のテレビだから、製品としては新しくないです。 当時はテレビでYouTubeが見れるのが新鮮でした。 テレビなんて ...

ReadMore

ガジェット

2020/6/5

BenQの色味をMacBookProに合わせる方法

  BenQ GW2480を購入して24インチの画面に綺麗な映像を映すことができて大満足なこてつさんですが、モニターの初期設定がかなり明るいなと感じました。 普段暗い部屋でMacの輝度を下げて使用しているので、モニターの初期設定だと明るすぎます。 それに、若干ですがBenQの白がMacと比べて黄色がかって見えるのも気になってきました。 モニターの詳細設定をいじったところ、BenQの色味をMacにかなり近づけることができたので今回はその設定値を公開したいと思います。   目次 はじめに ...

ReadMore

ガジェット

2020/7/1

【BenQ GW2480】在宅勤務でモニター品薄

  こてつさんは在宅勤務している訳ではないのですが、ニート生活効率化のために初めてモニターを購入しました。   2020年のAppleの初売りで購入した“MacBook Pro13” 13インチの画面に表示できる情報に、限界があります。 ブログを書きながらYouTubeを見て、さらにネットサーフィンしたいのに並べて作業できるのは、せいぜい2つまでです。 それ以上は画面の切り替えが必要になってきますが、コレがとても面倒です。 このストレスは分かる人には分かると思います。   今 ...

ReadMore

ガジェット

2020/6/29

【ナビで快適】自転車用スマホホルダー導入【ツーリング・サイクリング・ウーバーイーツ】

  移動手段のメインが原付バイクのこてつさん。 布マスクは届いていませんが、軽自動車税の納付書は届いています。   スマホをバイク用のナビとして使用するために、スマホホルダーを購入しました。 いつも決まったルートしか走らないけど、たまには違う道も走ってみたくなります。   スマホのナビの最大のメリットは【常に最新の地図データ】でいられる事です。 最近だとトンネルにも対応してきているみたいです。 しかも無料。   デメリットは攻めすぎたルート案内をされる事。 普通車で ...

ReadMore

 

記事一覧/カード→スライドショー画像のみ(❇︎クラス)

BLOG

2020/8/27

【Q:これはスパイダーマンですか?A:いいえ、ズゴックです】

  旧キットの【シャア専用ズゴック1/100】を使って、マーベルの人気キャラクター【スパイダーマン】を製作したので紹介したいと思います。 【ボークスV.K.M.ペイントコンテスト5】にTwitterエントリーしていて、色々な方からいいねをいただいています。 ありがとうございます。   1/100 MSM-07S シャア専用ズゴック (機動戦士ガンダム) Amazon   店舗で800円で購入しました。 ネットだとちょっと割高です。   スパイダーマンとは 簡単に説明 ...

ReadMore

BLOG

2020/8/2

影部分はあえて塗らない!SDCSシャア専用ザクⅡ筆塗り塗装

  プラモデルや模型を作り始めて1年が過ぎました。 この間に作ったガンプラは7体程度と決して多くはないのですが 最近作った機体を紹介したいと思います。 SDガンダム クロスシルエット シャア専用ザクⅡ 色分け済みプラモデル Amazon このシリーズは財布に優しい価格なのに、造形がしっかりしていてパーツの稼働も申し分ないです。 実はパーツ点数が多いプラモがあまり好きではなく、このシリーズくらいの、どちらかというと少なめの方が個人的には好きです。   ランナー跡の処理や、合わせ目消しが面 ...

ReadMore

BLOG

2020/8/1

【メディバンペイント】でヘッダー画像を作る

  実は毎月トップページのヘッダー画像を変えています。 気分転換です。   6月 7月 8月   8月のイメージイラストの候補がいっぱいあって(スイカ、ひまわり、花火、風鈴などなど) 悩んだ結果、夏の虫にしてみました。   セミとカブトムシ、可愛いでしょ。   【2200px*500px】のサイズで作っているので、トリミングの必要もなくアフィンガーのヘッダー画像として使えます。 ちなみに使用しているソフトはメディバンペイントです。 イラストやマンガ制作ツー ...

ReadMore

BLOG

2020/6/28

ブログ運営報告4ヶ月目〜9千PV突破〜

ブログを始めて4ヶ月が経ちました。 はっきり言って大きな変化はまだありません。 ブログってとにかく続けることが大事で、今何十万と稼いでる先人たちも最初の1年は収益0とかよく聞くので気長にやっていこうと思っています。 では、4ヶ月目の運営報告を見ていきましょう。   ブログ運営4ヶ月目の結果 ・期間:6月1日〜6月30日 ・記事数:18記事 ・アクセス数:総数9616PV(+1261) ・収益:428円(+208円) ・Twitterフォロワー数:26人(変化なし) ()は内は先月比   ...

ReadMore

BLOG

2020/6/28

【2020年】WordPressを更新する手順

  最近Wordpressを最新版に更新しました。 データの更新って一見手間で難しそうに感じますよね。 バックアップを取ったり、プラグインの一時停止など気をつけてやることはありますが決して手間でも難しくもありません。 WordPressはバグの修正や使いやすさの向上を求めて頻繁に更新しています。 そのため更新の仕方を覚えて常に最新版にバージョンアップできるようにしておきたいですね。 今日はWordpressの更新方法を画像付きでわかりやすく紹介していきます。     Word ...

ReadMore

 

記事一覧/カード→おすすめ記事一覧

ダッシュボード → AFFINGER5管理 → おすすめ記事一覧 → タイトルの入力 → 表示させたい記事の記事IDを入力 から設定した記事が反映されるショートコード。

おすすめ記事

1

  ノートパソコンの最大のメリットは、どこでも持ち運びが可能だということ。 MacBook Pro 13インチを購入してから外出先でも仕事をするようになり、とても能率的になった。 &nbsp ...

2

  移動手段のメインが原付バイクのこてつさん。 布マスクは届いていませんが、軽自動車税の納付書は届いています。   スマホをバイク用のナビとして使用するために、スマホホルダーを購入 ...

3

  フレンチブルドッグの服って特殊サイズですよね。 頭が大きく首回り・胴回りも太い為なかなか既製品が合わず服を探すのも一苦労だと思います。 うちは抜け毛が多いため一年中服を着せています。 & ...

4

  テレビの内蔵スピーカーの音質に不満を持つ人って意外と多いですよね。   こてつもその1人で、寝室に設置してるAQUOSの音質が薄っぺらく貧弱すぎるのでガッカリしていました。 A ...

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】サイドバーにおすすめ記事を表示する方法【わかりやすい図解】

  今日はサイドバーに選んだ記事を表示させるカスタマイズをしていこうと思います。   こてつの自由帳はこんな感じです。   10分ほどで設定できるくらい簡単なカスタマイズ ...

続きを見る

 

記事一覧/カード→ブログカード(参考)

参考【ナビで快適】自転車用スマホホルダー導入【ツーリング・サイクリング・ウーバーイーツ】

  移動手段のメインが原付バイクのこてつさん。 布マスクは届いていませんが、軽自動車税の納付書は届いています。   スマホをバイク用のナビとして使用するために、スマホホルダーを購入 ...

続きを見る

 

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

こちらもCHECK

【BenQ GW2480】在宅勤務でモニター品薄

  こてつさんは在宅勤務している訳ではないのですが、ニート生活効率化のために初めてモニターを購入しました。   2020年のAppleの初売りで購入した“MacBook Pro13 ...

続きを見る

 

タグ→条件表示

表示・非表示を指定できるショートコード。

・コメントアウト
・エディタ用メモ
・PC閲覧時のみ表示
・PC閲覧時のみ非表示
・AMPページのみ表示
・AMPページのみ非表示
・フロントページのみ表示
・フロントページのみ非表示
・指定したカテゴリーIDのみ非表示

 

タグ→ショートコード補助

ショートコード補助→Webアイコン(クラス)

ショートコード「fontawesome="ココに挿入"」に使えるコード。

ウェブから探す手間が省けるので便利。

今回はカスタム ボタンミニに挿入してみました。

 

 

ショートコード補助→アニメーション(クラス)

動き サンプル コード
45°揺れ サンプル faa-wrench animated
ベル揺れ サンプル faa-ring animated
横揺れ サンプル faa-horizontal animated
縦揺れ サンプル faa-vertical animated
点滅

サンプル

faa-flash animated
バウンド サンプル faa-bounce animated
回転

サンプル

faa-spin animated
ふわふわ サンプル faa-float animated
大小 サンプル faa-pulse animated
シェイク サンプル faa-shake animated
シェイク(強) サンプル st-shake
拡大(ゆれ) サンプル faa-tada animated
過ぎる サンプル faa-passing animated
戻る サンプル faa-passing-reverse animated
バースト サンプル faa-burst animated
落ちる サンプル faa-falling animated

 

\詳しい使い方は下記の記事からどうぞ/

【AFFINGER5】webアイコン、画像、文字を動かすアニメーションタグの使い方

  便利な機能が多いアフィンガー5。 ちょっとした装飾ならショートコード一つで出来てしまいます。   いろんなブログでよくみるfontawesomeのwebアイコン、画像、文字もア ...

続きを見る

 

 

ショートコード補助→HTMLカラーコード

#ffffff
赤濃 #e53935
#f44336
青濃 #039BE5
#03A9F4
青薄 #E1F5FE
緑濃 #43A047
#4CAF50
緑薄 #E8F5E9
橙濃 #FFB300
#FFC107
橙薄 #FFF3E0
黒濃 #212121
#424242
黒薄 #fafafa
黄薄 #FFFDE7

ショートコード補助→HTMLカラーコード(ブランド)

Twitter

Facebook

hatena

Wordpress

Amazon

LINE

 

ショートコード補助→定型文

・\ バンザイ /

・※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。

・※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。

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

 

まとめ

アフィンガーで使えるタグの一覧でした。

次々新しい機能が出てきますね。すごいです。

 

ブログを始めるならアフィンガーがオススメ。

 

アフィンガー5はこちらから>>

 

 

ブログ編集時の参考にしてみてくださいね。

-AFFINGER

© 2020 こてつの自由帳 Powered by AFFINGER5