別記事で詳しい使い方の説明をしているものもあります。
目次
この記事に書いてあるコト
- 1 タグ→テキストパーツ
- 1.1 テキストパーツ→クリップメモ
- 1.2 テキストパーツ→クリップメモ (テキスト)
- 1.3 テキストパーツ→ミニふきだし
- 1.4 テキストパーツ→複合
- 1.5 テキストパーツ→複合(アイコンなし)
- 1.6 テキストパーツ→まるもじ(小)
- 1.7 テキストパーツ→まるもじ(大)
- 1.8 テキストパーツ→HTML(カスタム)
- 1.9 テキストパーツ→カスタムフォント
- 1.10 テキストパーツ→ステップ
- 1.11 テキストパーツ→ポイント
- 1.12 テキストパーツ→ラベル
- 1.13 テキストパーツ→流れる文字(marquee風)
- 1.14 バナー風ボックス
- 1.15 ボックスデザイン→マイボックス
- 1.16 ボックスデザイン→マイボックス (+CCSクラス)
- 1.17 ボックスデザイン→見出しつきフリーボックス
- 1.18 ボックスデザイン→メモボックス
- 1.19 ボックスデザイン→スライドボックス
- 1.20 ボックスデザイン→チェックボックス(番号なしリスト)
- 1.21 ボックスデザイン→こんな方におすすめ(v)
- 1.22 ボックスデザイン→こんな方におすすめ[v]
- 1.23 ボックスデザイン→ガイドマップメニュー
- 1.24 ボックスデザイン→pre:
- 1.25 ボックスデザイン→pre:terminal
- 1.26 ボックスデザイン→pre:shortcode
- 1.27 カスタムボタン→ノーマル
- 1.28 カスタムボタン→角丸
- 1.29 カスタムボタン→ミニ
- 1.30 カスタムボタン→MCボタン
- 1.31 カスタムボタン→ボックスメニュー
- 1.32 カスタムボタン→ボタンA・B
- 1.33 ランキング1位(基本)
- 1.34 ランキング2位
- 1.35 ランキング3位
- 1.36 ランキング4位
- 1.37 全サイズ→左右30:70%
- 1.38 全サイズ→左右50%
- 1.39 全サイズ→左右free%
- 1.40 全サイズ→均等横並び
- 1.41 PCとTab(959px以上)→3分割
- 1.42 レイアウト→メイン
- 1.43 レイアウト→背景ワイド
- 1.44 レイアウト→タブ(切替ボタン)
- 1.45 レイアウト→タブ→3つ
- 1.46 タイムライン→基本
- 1.47 タイムライン→基本(センター)
- 1.48 タイムライン→基本(ステップ)
- 1.49 タイムライン→センター (ステップ)
- 1.50 タイムライン→ブログカード
- 1.51 タイムライン(カウント)→基本
- 1.52 タイムライン(カウント)→センター
- 1.53 タイムライン→ブログカード(カウント)
- 1.54 Googleアイコン
- 1.55 スター
- 1.56 その他パーツ→画像付きコメント
- 1.57 その他パーツ→アドセンス
- 1.58 その他パーツ→オリジナルショートコード
- 1.59 その他パーツ→YouTube
- 1.60 その他パーツ→三角(下矢印)
- 1.61 その他パーツ→スクロールナビ
- 1.62 その他パーツ→目次カスタム
- 1.63 その他パーツ→目次カスタム(TOC+)
- 1.64 記事一覧/カード→記事一覧
- 1.65 記事一覧/カード→カテゴリ一覧
- 1.66 記事一覧/カード→カテゴリ一覧(スライドショー)
- 1.67 記事一覧/カード→スライドショー画像のみ(❇?クラス)
- 1.68 記事一覧/カード→おすすめ記事一覧
- 1.69 記事一覧/カード→ブログカード(参考)
- 1.70 記事一覧/カード→ブログカード(CHECKふきだし)
- 1.71 ショートコード補助→Webアイコン(クラス)
- 1.72 ショートコード補助→アニメーション(クラス)
- 1.73 ショートコード補助→HTMLカラーコード
- 1.74 ショートコード補助→HTMLカラーコード(ブランド)
- 1.75 ショートコード補助→定型文
- 1.76 まとめ
タグ→テキストパーツ
テキストパーツ→クリップメモ
メモ
外部リンク
ブックマーク
おしらせ
はてな
コメント
コード
ポイント
ユーザー
初心者
注意文
注意文(グレー)
テキストパーツ→クリップメモ
(テキスト)
メモ
参考
関連
注意
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%)
ボックスデザイン→メモボックス
メモ
ボックスデザイン→スライドボックス
ボックスデザイン→チェックボックス(番号なしリスト)
- これはダミーのテキストです
- これはダミーのテキストです
ボックスデザイン→こんな方におすすめ(v)
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
ボックスデザイン→こんな方におすすめ[v]
こんな方におすすめ
- これはダミーのテキストです
- これはダミーのテキストです
ボックスデザイン→ガイドマップメニュー
-
ボックスデザイン→pre:
html
-
ボックスデザイン→pre:terminal
command
-
ボックスデザイン→pre:shortcode
[/] shortcode
タグ→カスタムボタン
カスタムボタン→ノーマル
カスタムボタン→MCボタン
カスタムボタン→ボックスメニュー
\基本(4列)/
\サブあり(4列)/
\縦並びタイプ/
\縦並びタイプ(サブあり)/
\縦並びタイプ(単品)/
\詳しい使い方は下記の記事からどうぞ/
-
-
【AFFINGER5】ボックスメニューの使い方【サイドバーにも使える】
アフィンガーで気に入っている機能の一つがボックスメニューで、アイコン付きのリンクボックスを作成できるショートコードになります。 こてつの自由帳でもトップページのサイドバーに ...
続きを見る
カスタムボタン→ボタンA・B
タグ→会話吹き出し


\詳しい使い方は下記の記事からどうぞ/
-
-
【AFFINGER5】会話ふきだしの使い方と画像設定方法
アフィンガーを使っていると大活躍するのが会話ふきだしタグ。 こてつです いろんなブログで使っているのを見かけます。 おはよう! も ...
続きを見る
タグ→ランキング
ランキング1位(基本)
ランキング2位
ランキング3位
ランキング4位
タグ→レイアウト
全サイズ→左右30:70%
ABCDEFG・HIJKLNM・OPQRSTU・VWXYZ
あいうえお・かきくけこ・さしすせそ・たちつてと・なにぬねの・はひふへほ・まみむめも・やゆよ・らりるれろ・わをん
全サイズ→左右50%
全サイズ→左右free%
任意のサイズに変更可能(20%)
任意のサイズに変更可能(80%)
全サイズ→均等横並び
- 1
- 2
- 3
- 4
- 5
自分でコードをいじらなくても、エンターキーで均等なコンテンツを増やせるのが良いところ。
PCとTab(959px以上)→3分割
この他にも
・左右30:70%
・左右70:30%
・左右40:60%
・左右60:40%
・左右50%
があります。
画像を3つ並べて表示させたいときなどに便利なレイアウトです。
レイアウト→メイン
任意のクラスを設定し、divを作成して囲むショートコード。
レイアウト→背景ワイド
レイアウト→タブ(切替ボタン)
レイアウト→タブ→3つ
\詳しい使い方は下記の記事からどうぞ/
-
-
【AFFINGER5】便利なタブのレイアウトを紹介
アフィンガー5のタグって種類が多くて使い切れていなかったり、知らなかったものがあったりしますよね。 こてつも全部は把握していなし、まだ使ったことすらないタグがたくさんあります。 &nbs ...
続きを見る
タイムライン→基本
-
タイトル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日)経過しました! こてつです。 ようやく器具が外せる目処が立ったので、これまでの治療費を合計してみました! 歯列矯正にかかる費用 ...
記事一覧/カード→カテゴリ一覧
-
【AFFINGER5】サイトのロゴをセンター寄せにする方法
こんにちわ、こてつです。 今日はアフィンガー5を使って、サイトのロゴをセンター寄せにする方法を紹介していきます。 最終的にはこんな感じになります。   ...
-
【AFFINGER5】ボックスメニューの使い方【サイドバーにも使える】
アフィンガーで気に入っている機能の一つがボックスメニューで、アイコン付きのリンクボックスを作成できるショートコードになります。 こてつの自由帳でもトップページのサイドバーに ...
記事一覧/カード→カテゴリ一覧(スライドショー)
記事一覧/カード→スライドショー画像のみ(❇?クラス)
記事一覧/カード→おすすめ記事一覧
ダッシュボード → AFFINGER5管理 → おすすめ記事一覧 → タイトルの入力 → 表示させたい記事の記事IDを入力 から設定した記事が反映されるショートコード。
\詳しい使い方は下記の記事からどうぞ/
-
-
【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カラーコード(ブランド)
hatena
WordPress
Amazon
LINE
ショートコード補助→定型文
・\ バンザイ /
・※時期により内容が異なる場合がございます。詳細は公式サイトにてご確認下さいませ。
・※掲載されている文字、写真、イラスト等は著作権の対象となっています。無断利用を固く禁止しております。
・これはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストですこれはダミーのテキストです
まとめ
アフィンガーで使えるタグの一覧でした。
次々新しい機能が出てきますね。すごいです。
ブログを始めるならアフィンガー一択です。
タイトル
◯代男性