AFFINGER5で簡単にできるデザイン・文字装飾・機能

そんな疑問にお答えします。

AFFINGER5のテーマで用意されている

などを紹介します。

本記事の信頼性

AFFINGER5では、見出しのデザインも多数あります！

それでは順番に見ていきましょう！

これは見出し3です

これは太字です。

これは赤字です。

これは大文字です。

これは小文字です

これはドット線です。

これは参照リンクです

参考これは参考マークです（例：参考という文字を記入してから使用します）

必須これは必須マークです（例：必須という文字を記入してから使用します）

これは打消しです。

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

アニメーションの設定

PowerPointみたいなアニメーションを入れることが可能です。

(^^♪45°揺れ

(^^♪ベル揺れ

(^^♪横揺れ

(^^♪縦揺れ

(^^♪点滅

(^^♪バウンド

(^^♪回転

(^^♪ふわふわ

(^^♪大小

(^^♪シェイク

(^^♪シェイク（強）

(^^♪拡大（ゆれ）

(^^♪過ぎる

(^^♪戻る

(^^♪バースト

アイコン

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

読者の注意を引くのに役立ちます。

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

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

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

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

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

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

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

キャッチコピー

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

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

記事タイトル

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

まとめ

↑このまとめは一見h3ですが、実は段落扱いになっています（h3風見出しタグ）

カウント

カウントは設定したテキストや見出し（hタグ）などに自動で番号を振付けます。

手動で番号を付けるよりも簡易であるのはもちろん、テキスト自体ではなくCSSで数字を付与するため目次などにも反映されないなどのメリットがあります。

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

これはダミーです

これはダミーです

これはダミーです

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

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

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

ランキング表示も簡単にできます。

ランキング1位

ランキング2位

ランキング3位

ランキング4位以下

マーカー

マーカー表示もお手の物です。

これは黄マーカーです。

これは黄マーカー（細）です。

これは赤マーカーです。

これは赤マーカー（細）です。

これは青マーカーです。

これは青マーカー（細）です。

これは鼠マーカーです。

これは鼠マーカー（細）です。

写真

写真枠

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

キャプションあり

ポラロイド風

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

ボックス

目立たせたいポイントに使いましょう。

ワイド

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

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

リスト

リストの種類も豊富です。

ドット下線（リスト）

マル（リスト）

マル+ドット下線（リスト）

簡易チェック（リスト）

簡易チェック+ドット下線（リスト）

チェックボックス（番号なしリスト）

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

チェックリスト（番号なしリスト）

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

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

ナンバリング（番号付きリスト）

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

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

ナンバリング四角（リスト）

ナンバリング四角+ドット下線（リスト）

レイアウト

回り込み解除

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

センター寄せ

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

下に余白

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

カードスタイル

※記事ID2で設定されています（ない場合は適宜変更して下さい）

ブログカードに別のデザインを設定します（全サイズで縦型）

カードスタイル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タグを囲めない）場合は「テキストモード」での作業をお勧めします

タグ

デザイン

クリップメモ

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

ミニふきだし

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

複合

複合（アイコンなし）

まるもじ（小）

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

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

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

まるもじ（大）

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

これは基本です

これはオレンジです

これはピンクです

これはブルーです

これははてなです

これはチェックです

これはうすい注意です

これは注意です

カスタムフォント

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

これはカスタムフォント1です

これはカスタムフォント2です

ステップ

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

step
1入力する

これはテキスト1です

step
2確認・修正する

これはテキスト2です

step
3応募する

これはテキスト3です

ポイント

これはポイントです

ラベル

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

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

流れる文字

バナー風ボックス

バナー風デザインを作成するショートコード

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

サンプル例

マイボックス

様々なボックスデザインを作成します。以下はデフォルトで用意されているデザインですが、自分でカスタマイズすることも可能です。

マイボックス（+CSSクラス）

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

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

メモボックス

スライドボックス

チェックボックス（番号なしリスト）

こんな方におすすめ（v）

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

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

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

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

ガイドマップメニュー

カスタムボタン

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

ノーマル

基本

ボタン

詳しくはコチラ（オレンジ）

詳しくはコチラ

詳しくはコチラ（レッド）

詳しくはコチラ

詳しくはコチラ（グリーン）

詳しくはコチラ

詳しくはコチラ（ブルー）

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく（オレンジ）

もっと詳しく

もっと詳しく（ピンク）

もっと詳しく

もっと詳しく（ブルー）

もっと詳しく

人気ランキング

人気ランキング

ランキングはコチラ(AFFINGER又はEX版のみ）

ランキングはコチラ

ミニ

基本

ボタン

詳しくはコチラ（オレンジ）

詳しくはコチラ

詳しくはコチラ（レッド）

詳しくはコチラ

詳しくはコチラ（グリーン）

詳しくはコチラ

詳しくはコチラ（ブルー）

詳しくはコチラ

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

会話ふきだし

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

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

レイアウト

PCとTab3分割

PCとTab左右40：60%

PCとTab左右50%

PCとTab左右30：70%

全サイズ左右50%

均等横並び

Div

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

マージン

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

タブ(AFFINGER又はEX版のみ）

その他パーツ

スター

年月（EX版のみ）

[st-date]

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

これははぐれガラスです

アドセンス

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

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

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

YouTube

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

URL貼り付け

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

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

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

三角（下矢印）

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

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

記事一覧

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

カテゴリ一覧

任意のカテゴリの一覧を所定内であれば好きな位置に表示できます。

表示する記事数やカテゴリの除外、閲覧サイズによる列数の指定（3~1）などが可能です。

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

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

ショートコード補助

Webアイコン

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

アニメーション（クラス）

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

HTMLカラーモード

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

クイックボタン

エディタの上に表示されているボタンです。

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

太字

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

太赤

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

黄細マ

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

CT

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

写真枠

写真に枠線をつけます

角丸背景

ボタンA

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

ボタンB

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

カード

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

AFFINGER5はSEO対策済みの優良ワードプレステーマ

出典：AFFINGER公式サイトより

このサイトでも使用しているAFFINGER5は、有名ブロガーがこぞって推薦する優良な有料WordPressテーマです。

AFFINGERはブログ立ち上げから利用したほうが良い理由

AFFINGERはブログ立ち上げから利用したほうが良いです。

ブログ初心者は、とにかく無料で済ませたいと考えがちですが、必ずしも得策とは言えません。

たとえばSEO検索順位ツール「GRC」のように、導入しない方が損するツールもあります。

参考

【おすすめ】SEO検索順位ツールGRCをブログ初心者も使うべき理由を解説！

ブログ初心者の場合、まず無料のWordPressテーマ「Cocoon」を使用することが多いと思います。

私も最初はCocoonを利用していました。

Cocoonは無料とは思えないほどの機能を備えた素晴らしいWordpressテーマです。

しかし、もしAFFINGERの購入を検討しているなら
ブログ立ち上げ時や、記事数が少ない時の方が断然良いです。

その理由は以下の通りです。

• 記事修正が発生しない（これがしんどい）
• テーマに慣れるまでに時間がかかる

記事修正は想像以上にしんどい

他のテーマからAFFINGERに移行する時は、ほぼ間違いなくデザインが崩れます。

Cocoonから移行した時に思いっきり崩れました。

そして、Cocoonを使用している場合、おそらくGutenbergを使用していると思います。

その場合、厄介なことが生じます。

AFFINGER5はGutenbergにも対応していますが、完全対応というわけではありません。
実際に、公式でもClassic Editorの使用を推奨しています。

そのため、多くの人はClassic Editorを使用しているはずです。

しかし、今までGutenbergで作成した記事をClassic Editorで書き直すと、バグが生じます。

Classic Editorでは”ビジュアル”、”テキスト”の二種類の投稿画面に切り替えることができるのですが
テキストの方で見るとGutenbergの記述が残っているんです。

これが残っていると、記事の表示がおかしくなってしまいます。

文章が無限ループすることがあるんです。

そのため、Gutenbergの記述を根気よく消していく作業が必要になります。

10記事程度ならまだしも、50記事ともなると相当しんどいです。

しかも初心者の場合、そういう不具合に慣れていないので調べることに時間がかかります。

テーマに慣れるまでに時間がかかる

テーマの操作に慣れるまでは時間がかかります。

しかし、これは多機能であるCocoonでも同じことが言えます。

結局どのテーマを使おうが、操作に慣れるまでは時間がかかります。

なので、あまりそこは考慮する必要は無いと考えています。

AFFINGERを購入すべき人は？

AFFINGERを購入した方が良い人は、以下の通りです。

AFFINGERは、オシャレなデザインを簡単に作成できる点でおすすめです。

スライドショーのように便利な機能もたくさんあります。

また、ブログを複数運営する予定があるなら、一度の購入で複数のブログに利用できるので、1ブログ当たりの購入単価がガクッと下がります。

そして、記事数が仮に多くても、リライトと割り切って修正する意思があるのならば、購入する意味があります。

順位アップの報告はポジショントークの可能性あり

「よく検索順位が上がった！」という口コミを見ますが、基本的にはポジショントークです。

本当にテーマを変えたから順位が上がったのかどうかは疑問です。

• テーマ変更した時と、Googleに評価される時期がたまたま同じだった
• リライトとみなされ、評価が上がった

普通ならこのあたりのことを触れるのですが、多くのブロガーは言及しません。

確かにこのブログも順位はアップしましたが、同時期に始めたブログ（半年ほど）も
Cocoonから変えなくても順位が上がっていました。

半年程度たつと、ある程度しっかり内容を書いていれば自然と順位が上がります。

テーマを変更したから、すぐに収益に結び付くというわけではありません。

有料テーマは、あくまでツールであり手段に過ぎないということはお忘れなく！

そうではありません。

例えば、AFFINGERならどんなデザインでも簡単に作れてしまいます。

カスタマイズ性が高すぎるという問題を指摘する人もいますが、初心者でもマニュアルを見ればできるはずです。

また、SEO対策もしっかり施されているので、その点も心配する必要はありません。

有料テーマは設備投資のようなもの

最初は無料テーマからはじめたい気持ちはよくわかります。

ブログの良さは初期費用の低さが上げられますからね。

しかし、作業を効率化したいなど考えた際は、一定の投資は必要です。

それはどんなビジネスでも当てはまることです。

設備投資にケチすぎる会社が、効率化を図れず結果的にライバル企業に負け、退場するのと同じ理屈です。

そういう意味では、有料テーマを選ぶの良い選択の一つです。

上で書いたようなことを踏まえて、購入すべきかどうかよく考えてみましょう。

私自身は、修正がとても大変でしたが購入して良かったと思っています。

「とりあえず、記事数増えてから有料テーマにしよう！」と考えている方は
少なくとも一度は地獄を見ることになるので覚悟しましょう（笑）。