AFFINGER6 ～サイトデザインで活かす「スタイル」装飾表示早見・一覧ページ

「AFFINGER6」には数多くの装飾機能があり、文章を囲うボックスやボタンなど「タグ」によるデザインのほか、「スタイル」による装飾も豊富にあります。このページでは「スタイル」について、主要な機能・装飾を目で見で分かるように使い方をご紹介します。

スタイルについて

WordPressの固定・投稿ページを作成するClassic Editor 「スタイル」内にページを装飾する各機能・項目が数多くあります。
必要なスタイルを設定しアクセントをつけて、ユーザーの印象に残るページ作りに役立ててください。

テキスト

最初にテキストを強調するなどの装飾を施す「テキスト」についてです。
太字や赤字など基本的な内容からドット線・打消しなどテキストにまつわる装飾が多く含まれています。

赤字

太字

赤字（太字）

大文字

小文字

ドット線

参照リンク

参考

必須

打消し

code

code風

アニメーション

個人ブログやサイトなど、遊び心ある文章やコンテンツには使える「アニメーション」です。多用は読みにくくなりますのでお勧めできませんが、ここぞというところで記事内容に一致していれば、利用価値はあるでしょう。

45°揺れ

ベル揺れ

横揺れ

縦揺れ

点滅

バウンド

回転

ふわふわ

大小

シェイク

シェイク（強）

拡大（ゆれ）

過ぎる

戻る

バースト

落ちる

アイコン

ちょっと注意を引きたい個所などにワンポイントで利用できる「アイコン」です。色も「外観」→「カスタマイズ」→「オプション（その他）」→「記事内のWebアイコン（スタイル）」で、自由に変更できます。

はてな

注意

人物

チェック

メモ

王冠

初心者マーク

見出し

ページを段落などで仕切る「見出し」を設定できます。デザインは外観のカスタマイズで設定を行いますので、サイトの統一感を意識してデザインしてください。なお、この「スタイル」で設定する見出しは、hタグで作成する通常の見出しとは異なり、あくまでも～風見出しであることに注意です。

キャッチコピー

キャッチコピー+目次

記事タイトル

h2風

h3風

h4風

h5風

まとめ

カウント

ランキング（管理CSS対応）

商品評価やレビューには欠かせない「ランキング」も簡単に設定できます。

ランキング1位（基本）

ランキング2位

ランキング3位

ランキング4位以下

マーカー

テキストで特に言いたいこと、強調したいところで利用する「マーカー」はとても便利です。「AFFINGER6」では基本で4色あり、またそれぞれに文字全体の装飾、アンダーラインの装飾と2パターンがあります。ポジティブな意見は黄色、ネガティブなコメントは赤など事前にグループを決めて、色分けするとユーザーにもわかりやすく効果的です。

黄マーカー

黄マーカー（細）

赤マーカー

赤マーカー（細）

青マーカー

青マーカー（細）

鼠マーカー

鼠マーカー（細）

写真

写真の装飾ですが、「枠線」は写真とページの背景が同系色の場合、区切りを明確にできるメリットがあります。

枠線

ポラロイド風

ボックス

長文のテキストが続く場合、この「ボックス」を利用して変化をつけたり強調したりするなど、さらに読み続けていただける効果があります。また、引用風ボックスでは、ニュース記事などをページで引用することで、サイトの説得力が高まります。

リスト

箇条書きにしてわかりやすくまとめられる「リスト」です。利用方法は、最初にこの「スタイル」でリスト全体のデザインを選択し～例：ドット下線（リスト）～、その後「ulタグ」もしくは「olタグ」で中のリストを作成する流れになります。

ドット下線（リスト）

マル（リスト）

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

簡易チェック（リスト）

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

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

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

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

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

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

あわせて読みたい

AFFINGER6 ～企業・個人で利用できる“収益を上げることに徹した”WordPressテンプレート～

数あるWordPressのテンプレートの中でも、「収益を上げる」ことに焦点を絞り開発されたのが「AFFINGER6」（アフィンガー6）です。売り上げを増やしたい、利益をアップさせたい企業やブロガー、ア ...

続きを見る

AFFINGER6独自プラグインで大幅に機能がアップ

収益を上げることに特化した「AFFINGER6」で利用できる独自プラグインは、管理者・運営者の作業を助け、さらに売上をアップさせることに貢献します。このページではAFFINGER6の独自プラグインにつ ...

続きを見る

AFFINGER6 ～サイトデザインで活かす「タグ」装飾表示早見・一覧ページ

多機能なWordPressテンプレート「AFFINGER6」ですが、数多くの機能があることでかえって、どの機能を使えばよいか悩むこともあります。 そこで、サイトデザインに欠かせない要素「タグ」について ...

続きを見る

まとめ

WordPressテンプレート「AFFINGER6」では「タグ」や「スタイル」を組み合わせてページを豊かにすることができます。画像ソフト・プラグインに依存しないメリットは、ページが軽くなり、プラグイン同士の干渉がなく安定していること、つまりユーザーの見やすさを高めて同時に検索エンジン対策も行えるという点です。
サクサク表示されるページを公開して、情報発信に、そしてビジネスにご活用ください。