graphic design時間短縮小ネタ

AFFINGER6記事作成パーツ一覧まとめ[クラシックエディタ(ブロック)バージョン]

AFFINGER6記事作成パーツ一覧まとめ-クラシックエディタ編

今は、ブロックエディタ(Gutenberg)が一般的になってきました。

でも自分のように「ギリギリまでクラシックエディタが使いたい!」という方もいるはず!と思い、AFFINGER6のクラシックエディタで使用できるスタイルやショートコードによるタグなどのパーツをまとめました。

 

 

AFFINGER6はクラシックエディタ派にも優しい

AFFINGER6はクラシック・ブロックどちらでもOK

AFFINGER6はブロックエディタを推奨していますが、実は前のバージョンAFFINGER5ではクラシックエディタを推奨していました。

また、アフィンガー(AFFINGER)は、昔からの高額収入アフィリエイター(ブログで稼げる人)がおおく使っているテーマなので、クラシックエディタ派であろう昔からのアフィリエイター達を無視はできません。

そのためAFFINGER6はブロックエディタを推奨はしていますが、まだまだ居るクラシックエディタ派にも優しいテーマ設計になっています。

 

ギリギリまでクラシックエディタを使用したいと考えているのであれば、AFFINGER6を使うのもアリ。

アフィンガー(AFFINGER)は裏切りません!※3年間AFFINGERを使い倒した個人的な意見です。)

 

 

AFFINGER6のクラシックエディタパーツは、ブロックエディタでも使用できる

ブロックエディタはクラシックエディタパーツもOK

実は、ブロックエディタ(Gutenberg)でも、AFFINGER6ではクラシックエディタのパーツは使用できます。

ブロックエディタ用のパーツ(かなりありますが)で足りない!のであれば、クラシックエディタのパーツを使用するのもアリ。

ブロックエディタで使用するときは、「クラシックブロック」からクラシックエディタのパーツが選べます。

 

クラシックエディタで使用の場合

「本記事のクラシックエディタで使用できるパーツ」が使用できます。

ブロックエディタで使用の場合

「本記事のクラシックエディタで使用できるパーツ」+「ブロックエディタ用の簡単設定パーツ」が使用できます。

 

ブロックエディタ(Gutenberg)で使用できるパーツ記事はコチラ↓

AFFINGER6ブロックエディタで使えるパーツ
AFFINGER6ブロックエディタで簡易設定できるパーツ

続きを見る

 

試しにクラシックエディタ派の自分がブロックエディタを使用してみました。

クラシックエディタとはまた違った使いやすさがありました。

 

将来的に、クラシックエディタ、ブロックエディタどちらかにするにしても、今現在クラシックエディタを使いたいのであればAFFINGER6はオススメです。

 

 

では、ここからがAFFINGER6のクラシックエディタのパーツ一覧です↓

AFFINGER6のクラシックエディタの「スタイルパーツ」

テキスト

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

これは参照リンクです

参考これは参考マークです(例:参考という文字を記入してから使用)

必須これは必須マークです(例:必須という文字を記入してから使用)

これは打消しです。

これはcodeなどに使用します

アニメーション

(^ _ ^)45°揺れ

(^ _ ^)ベル揺れ

(^ _ ^)横揺れ

(^ _ ^)縦揺れ

(^ _ ^)点滅

(^ _ ^)バウンド

(^ _ ^)回転

(^ _ ^)ふわふわ

(^ _ ^)大小

(^ _ ^)シェイク

(^ _ ^)シェイク(強)

(^ _ ^)拡大(ゆれ)

(^ _ ^)過ぎる

(^ _ ^)戻る

(^ _ ^)バースト

(^ _ ^)落ちる

アイコン

アイコンマークは「カスタマイザー」の「オプション」でカラーを設定できます。※通常エディタ上では表示されません

これは「はてな」マークです

これは「注意」マークです

これは「人物」マークです

これは「チェック」マークです

これは「メモ」マークです

これは「王冠」マークです

これは「初心者」マークです

見出し

キャッチコピー

こんな風にキャッチコピー見出しタグのテキストなど
見出しタグのテキストなどこんな風にキャッチコピー

記事タイトル

記事タイトル、h2〜h5風はPタグに見出しタグと同じデザインを設定します

まとめ

カウント

カウントは設定したテキストや見出し(hタグ)などに自動で番号を振付けます。手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。

クイックボタンの「CT」でも付与できます。

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

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

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

これは「まとめ」用の見出しです

通常の見出しタグとは別に「まとめ」用のデザインをカスタマイザーの「各テキストとhタグ(見出し)」で設定できます

ランキング(AFFINGER又はEX版のみ)

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

マーカー

これは黄マーカーです。

これは黄マーカー(細)です。

これは赤マーカーです。

これは赤マーカー(細)です。

これは青マーカーです。

これは青マーカー(細)です。

これは鼠マーカーです。

これは鼠マーカー(細)です。

写真

写真枠

写真に「枠線」を付与します。境界が曖昧な写真などにとくに有効です(クイックボタン「写真枠」でも使用できます)

ワイド

ポラロイド風

写真をポラロイド風にデザインします


ポロライド風

ボックス

黄色ボックスです

薄赤ボックスです

グレーボックスです

引用風のボックスです

ワイド

幅一杯の背景を設定するEX限定デザインです

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

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

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

ショートコードタグでは背景色や画像も設定できます

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

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

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

リスト

ドット下線(リスト)

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

マル(リスト)

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

マル+ドット下線(リスト)

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

簡易チェック(リスト)

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

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

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

チェックボックス(番号なしリスト)

ulタグの番号なしリストを囲むとチェックボックス風のデザインになります。

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

チェックリスト(番号なしリスト)

ulタグの番号なしリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「チェック(ulタグ)」を適応してから「番号なしリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

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

ナンバリング(番号付きリスト)

olタグの番号付きリストを囲むとチェック風のデザインになります。「テキストモード」でするか、「ナンバリング(olタグ)」を適応してから「番号付きリスト」を適応すると便利です。

※カスタマイザーの「オプション」でカラー変更が可能です

  1. これはダミーのリストです
  2. これはダミーのリストです
  3. これはダミーのリストです

ナンバリング四角(リスト)

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

ナンバリング四角+ドット下線(リスト)

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

レイアウト

回り込み解除

<div class="clearfix"> </div>で囲み、floatを解除します

センター寄せ

要素をセンター寄せにします。

下に余白

要素の下に「10px」の余白を付けます

カードスタイル

【カードスタイル】PC、タブレット、スマホの全サイズで縦型の大きさで表示されます↓

カードスタイルB

【カードスタイルB】PC、タブレットは縦型の大きさで表示、スマホでの表示は、細横型のコンパクトサイズに変更します↓

ランキングボックス(AFFINGER又はEX版のみ)

「ランキング一覧背景色」と同じスペースを設定します

width100%リセット

max-width: initial; display: inline;を設定してmax-widthをリセットします。

imgインラインボックス

display: inline;を指定します。

テーブル

テーブル(表の作成)には「TinyMCE Advanced」プラグインが便利です。

横スクロール

スマホ閲覧時など横幅がはみ出る場合にtableタグを<div class="scroll-box"></div>で囲むことで横スクロールに対応させます。

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

中央配置

table内のテキストを上下左右の中央に配置します。

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

装飾なし

テーマで用意されたデフォルトデザインを解除します。

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

※設定が上手くできない(tableタグを囲めない)場合は「テキストモード」での作業をお勧めします

AFFINGER6のクラシックエディタの「タグパーツ」

デザイン

クリップメモ

ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

(メモ)これはダミーです


(外部リンク)ダミーテキストです


(ブックマーク)ダミーテキストです


(おしらせ)ダミーテキストです


(はてな)これはダミーです


(コメント)これはダミーです


(コード)これはダミーです


(ポイント)これはダミーです


(ユーザー)これはダミーです


(初心者)これはダミーです


(注意文グレー)これはダミーです


(注意文)これはダミーです

ミニふきだし

ショートコードで作成するデザインです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

(基本)これはダミーです


(オレンジ)これはダミーです


(ピンク)これはダミーです


(ブルー)これはダミーです


(グリーン)これはダミーです


(レッド)これはダミーです

複合

自由なメモ

これはダミーです

ココがポイント

これはダミーです

ココがおすすめ

これはダミーです

ココがダメ

これはダミーです

ココに注意

これはダミーです

さらに詳しく

これはダミーです

◯才女性

これはダミーです

◯才男性

これはダミーです

複合(アイコンなし)

自由なメモ

これはダミーです

ココがポイント

これはダミーです

ココがおすすめ

これはダミーです

ココがダメ

これはダミーです

ココに注意

これはダミーです

もっと詳しく

これはダミーです

つまづきポイント

これはダミーです

まるもじ(小)

丸い背景の文字を作成します。見出しタグの前などに使用するとポイントになりお薦めです。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

(基本)これはダミーです (オレンジ)これはダミーです (ピンク)これはダミーです (ブルー)これはダミーです (うすい注意)これはダミーです (注意)これはダミーです

ポイントこれは見出しに使用したサンプル

まるもじ(大)

丸い背景の大きめの文字を作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

基本:これはダミーです


(オレンジ)これはダミーです


(ピンク)これはダミーです


(ブルー)これはダミーです


(はてな)これはダミーです


(チェック)これはダミーです


(うすい注意)これはダミーです


(注意)これはダミーです

カスタムフォント

カスタムフォントはショートコードでフォントをカスタマイズできます

これはダミーです

これはダミーです

ステップ

「購入の流れ」などステップを使用したい場合のデザインに便利です。カラーなどがカスタマイザーの「オプション」で変更できます

step
1
お湯を入れる

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

step
2
3分待つ

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

step
3
完成です

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

ポイント

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

ラベル

おすすめ

PC(960px以上)Tab(955px〜600px)のレスポンシブ表示となります

※コンテンツ内容は「バナーショートコード」で作成しています

流れる文字

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

バナー風ボックス

flexボックスを使用した様々なデザインを作成できます。背景画像を指定することでバナーのようなボタンを作成することも可能です。

タイトル

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

サンプル例

美味しい!
カフェランキング


オススメのランチは何?

今すぐCHECK


マイボックス(+CSSクラス)

見出し部分を中に変更したデザインです

メモ


これはダミーです

メモ


これはダミーです

必要なモノ

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

チェックリスト

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

簡単な流れ

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

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

見出し(全角15文字)

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

見出し(全角15文字)

これはタイトル幅を100%にしたデザインです

メモボックス

メモ

ここに本文を記述

スライドボックス

チェックボックス(番号なしリスト)

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

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

サイトで効果の高い「こんな方におすすめ」リストも簡単に作成できます。カスタマイザーの「オプション」でカラー変更も可能です。

こんな方におすすめ

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

<ul class="st-blackboard-list st-no-ck-off">st-no-ck-offst-no-ckとすることでアイコンを消せます

本日のメニュー

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

「番号付きリスト(olタグ)」にも対応

今日のやることリスト

  1. これはダミーのテキストです
  2. これはダミーのテキストです
  3. これはダミーのテキストです

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

こんな方におすすめ

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

ガイドマップメニュー

カスタムボタン

自由なボタンを作成します。幅や色、アイコンなどボタンごとに自由なカスタマイズが可能です。

ノーマル

基本

ボタン

詳しくはコチラ(黄色)

詳しくはコチラ

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

詳しくはコチラ

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

詳しくはコチラ

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

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく(黄色)

もっと詳しく

もっと詳しく(ピンク)

もっと詳しく

もっと詳しく(ブルー)

もっと詳しく

人気ランキング

人気ランキング

MCボタン(AFFINGER又はEX版のみ)

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

会話ふきだし

「会話ふきだし」は最大8つまで設定でき、1クリックで呼び出すことが可能です

Mrガマグチ
Mrガマグチ
これはダミーのテキストですこれはダミーのテキストです
これはダミーのテキストですこれはダミーのテキストです
100円さん
100円さん

ランキング見出し(AFFINGER又はEX版のみ)

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

レイアウト

PCとTab3分割

PCとTab左右40:60%

PCとTab左右50%

PCとTab左右30:70%

全サイズ左右50%

均等横並び

Div

任意のクラスを設定するdivを作成します

マージン

マージンをつける用のボックスを作成します

タブ(AFFINGER又はEX版のみ)

タブ1のコンテンツ

タブ2のコンテンツ

その他パーツ

スター

年月(EX版のみ)

2024年12月

画像付きコメント(AFFINGER又はEX版のみ)

タイトル

◯代男性

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

タイトル

◯代男性

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

アドセンス

ウィジェット「広告・Googleアドセンスのスマホ300px」で設定した内容を挿入します

オリジナルショートコード

ウィジェット「オリジナルのショートコード作成ウィジェット」で設定した内容を挿入します

YouTube

YouTube動画の貼り付けは直接URLを貼り付ける方法と、IDを指定して「サムネイル画像」リンクとして表示する方法があります。

URL貼り付け

自動でレスポンシブな動画として表示されます。

IDによるサムネイルリンク

サムネイルリンクとして表示することで複数でも表示が遅くなるのを軽減できます。クリックするとYouTubeに飛んでしまうのが欠点です。

三角(下矢印)

カラーを変更できる三角矢印のショートコードです。

スクロールナビ(AFFINGER又はEX版のみ)

記事一覧

任意の記事の一覧の記事中の好きな位置に表示できます(EX版ではスライドショーにすることも可能)

カテゴリ一覧

任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定(3~1)などが可能です。

カテゴリ一覧スライドショー

上記の一覧を簡易にスライドショーに変えることが可能です。

AFFINGER6ブロックエディターは進化している

AFFINGER

2024/12/1

AFFINGER6のブロックエディターパーツは進化しているって本当?

AFFINGER6好きのnondoriです。 はい。本当です。 実はAFFINGER6のブロックエディターパーツって進化しているんです!     ん?進化ってなんだ?というと、配布ブロックパーツが常に増えているんです。 と言われても、AFFINGER6を使っていない方や、AFFINGER6を使っていたとしてもあまり管理ページを見ない方はハテナ(?)ですよね。 (という自分はクラシックエディター派なんですが、これを見たらブロックエディターに変えたくなっちゃいました!)   そこで、今回はAFFIN ...

ReadMore

お知らせ

お知らせ

2024/12/7

特典:最短7分「カスタムAFFINGERデザインカード設定」をFirsty-4種で出来るようにしました!

のんどりデザインのAFFINGER6購入特典として、最短7分で設定できる「カスタムAFFINGERデザインカード設定」をのんどり限定Firsty-4種でできるようにしました! 今までは、のんどり限定Firsty-4種もデザイン済みデータ設定のみでしたが、もっと簡単に設定を!の声にお答えして「カスタムAFFINGERデザインカード設定」を作成しました。 のんどりオリジナルFirsty-4種はコチラ↓   約3工程で設定できます↓   今までよりも簡単に初期デザイン設定が可能ですので、ぜひ ...

ReadMore

のんどりデザイン特典11お知らせ

お知らせ

2024/12/1

「特典11:【中級者用】ライバルサイトのドメインパワーを無料で随時確認できる方法を伝授」を追加しました

のんどりデザインのAFFINGER6購入特典として「[特典11]【中級者用】ライバルサイトのドメインパワーを無料で随時確認できる方法を伝授」を追加しました。   「ライバルサイトのドメインパワーを随時確認する方法を伝授」は、ライバルサイトのドメインパワーを常に確認する方法です。 ライバルのドメインパワーって確認する必要あるの?って思いました? 実は、ライバルサイトのドメインパワーを随時確認することは、とても重要。   この方法を知っているか、知らないかで、記事の上位表示率がかなり変わっ ...

ReadMore

Customizer Export/Importエラー対策

副業ブログ AFFINGER ミニコラム

2024/11/7

Customizer Export/Importのインポートエラーの対処策[2024.9月]

「Customizer Export/Import」のインポートエラーの対処策です。   「Customizer Export/Import」は、ワードプレスのカスタマイズの移行ができる便利プラグイン。 自分も便利に使用しています。 ところが2024.9月頃から、「Customizer Export/Import」でデータをインポートしようとすると、「File type is not allowed」エラーがでるようになりました。 2024.8月までは通常にインポートできたのに、急にインポート出 ...

ReadMore

ワードプレスフィード設定は抜粋に

副業ブログ

2024/12/5

コピーサイトをつくらせないためにフィード設定は抜粋だ!

最近、まさかの自分のサイトがリダイレクトハッキングされちゃいまして、妙に厳しくセキュリティをみております。のんどりです。 (※リダイレクトハッキング・・・サイトは改変されないけど、知らないうちに外部から、ハッカーさんたちの利益があがるよう使われている事。) そこで、何回かに分けてセキュリティについて記事を書きたいと思います。   今回は、「NO!コピーサイト」を合い言葉に、コピーサイトをつくらせないためのフィード設定の仕方です。   フィード設定の仕方 フィード設定は、基本では「全文を ...

ReadMore

ショートコード補助

Webアイコン

ショートコードに挿入するためのWebアイコンです(アイコンが直接表示されるわけではございません。ショートコードの引数に使用して下さい)

アニメーション(クラス)

ショートコードに挿入するためのCSS用のクラスです(ショートコードの引数に使用して下さい)

HTMLカラーモード

ショートコードに挿入するHTMLカラーコードです(カラーが直接表示されるわけではございません。ショートコードの引数に使用して下さい)

#e53935


#f44336


#ffebee


#03A9F4


#03A9F4


#E1F5FE


#43A047


#4CAF50


#E8F5E9


#FFC107


#FFF3E0


#212121


#424242


#FAFAFA


#FFFDE7

AFFINGER6のクラシックエディタの「クイックボタン」

エディタの上に表示されているボタンです。クリックするだけでデザインが適応されるので使用頻度の高いものなどを設定しています。

太字

選択したテキストに太字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい

太赤

選択したテキストに太赤字を適応します。テキスト全体の場合は「スタイル」の「太字」をご利用下さい

黄細マ

選択したテキストに黄マーカー(細)を適応します

CT

選択したテキストや見出しに自動カウントを設定します

写真枠

写真に枠線をつけます

角丸背景

角丸のマイボックスを設定します。

ボタンA

HTMLでボタンデザインAを挿入します(AFFINGERの場合「ランキング管理」>「CSS」でカラーを変更できます)

ボタンB

HTMLでボタンデザインBを挿入します(AFFINGERの場合「ランキング管理」>「CSS」でカラーを変更できます)

カード

記事IDを設定することで内部リンクをブログカード化します

ワードプレステーマAFFINGER6(アフィンガー6)[購入〜設定方法]

続きを見る

 

まとめ

AFFINGER6はクラシックエディタ派にも優しいテーマ設計です。

まだギリギリまでクラシックエディタを使いたいと考えているのであれば、AFFINGER6を選択するのもアリ。

AFFINGER6なら、クラシックエディタのパーツも揃ってます。

 

ブロックエディタ(Gutenberg)で使用できるパーツはコチラ↓

AFFINGER6ブロックエディタで使えるパーツ
AFFINGER6ブロックエディタで簡易設定できるパーツ

続きを見る

AFFINGER6ブロックエディタで簡易設定できるパーツ

 
AFFINGER6ブロックエディタパーツは進化中!?記事はコチラ↓

AFFINGER6ブロックエディターは進化している
AFFINGER6のブロックエディターパーツは進化しているって本当?

続きを見る

AFFINGER6ブロックエディタパーツは進化中!?記事

 

AFFINGER6はできるのことがおおいのか?3年間使った感想はコチラ↓

アフィンガーを使った感想
「アフィンガー6はできることがおおい?」3年間使った感想のまとめ[特典付き]

続きを見る

「アフィンガー6はできることがおおい?」3年間使った感想のまとめ[特典付き]

 

AFFINGER6は何を選べばいい?〜購入・設定方法〜記事はコチラ↓

ワードプレステーマAFFINGER6(アフィンガー6)[購入〜設定方法]

続きを見る

ワードプレステーマAFFINGER6(アフィンガー6)[購入〜設定方法]

 

 

関連記事
AFFINGER6は初心者には難しいのか?
AFFINGER6は初心者には難しいといわれるが本当か?

続きを見る

 

-graphic design時間短縮小ネタ