「AFFINGER6」には数多くの装飾機能があり、文章を囲うボックスやボタンなど「タグ」によるデザインのほか、「スタイル」による装飾も豊富にあります。このページでは「スタイル」について、主要な機能・装飾を目で見で分かるように使い方をご紹介します。
スタイルについて
WordPressの固定・投稿ページを作成するClassic Editor 「スタイル」内にページを装飾する各機能・項目が数多くあります。
必要なスタイルを設定しアクセントをつけて、ユーザーの印象に残るページ作りに役立ててください。
テキスト
最初にテキストを強調するなどの装飾を施す「テキスト」についてです。
太字や赤字など基本的な内容からドット線・打消しなどテキストにまつわる装飾が多く含まれています。
赤字
太字
赤字(太字)
大文字
小文字
ドット線
参考
必須
打消し
code
code風
アニメーション
個人ブログやサイトなど、遊び心ある文章やコンテンツには使える「アニメーション」です。多用は読みにくくなりますのでお勧めできませんが、ここぞというところで記事内容に一致していれば、利用価値はあるでしょう。
45°揺れ
ベル揺れ
横揺れ
縦揺れ
点滅
バウンド
回転
ふわふわ
大小
シェイク
シェイク(強)
拡大(ゆれ)
過ぎる
戻る
バースト
落ちる
アイコン
ちょっと注意を引きたい個所などにワンポイントで利用できる「アイコン」です。色も「外観」→「カスタマイズ」→「オプション(その他)」→「記事内のWebアイコン(スタイル)」で、自由に変更できます。
はてな
注意
人物
チェック
メモ
王冠
初心者マーク
見出し
ページを段落などで仕切る「見出し」を設定できます。デザインは外観のカスタマイズで設定を行いますので、サイトの統一感を意識してデザインしてください。なお、この「スタイル」で設定する見出しは、hタグで作成する通常の見出しとは異なり、あくまでも~風見出しであることに注意です。
キャッチコピー
キャッチコピー+目次
記事タイトル
h2風
h3風
h4風
h5風
まとめ
カウント
ランキング(管理CSS対応)
商品評価やレビューには欠かせない「ランキング」も簡単に設定できます。
ランキング1位(基本)
ランキング2位
ランキング3位
ランキング4位以下
マーカー
テキストで特に言いたいこと、強調したいところで利用する「マーカー」はとても便利です。「AFFINGER6」では基本で4色あり、またそれぞれに文字全体の装飾、アンダーラインの装飾と2パターンがあります。ポジティブな意見は黄色、ネガティブなコメントは赤など事前にグループを決めて、色分けするとユーザーにもわかりやすく効果的です。
黄マーカー
黄マーカー(細)
赤マーカー
赤マーカー(細)
青マーカー
青マーカー(細)
鼠マーカー
鼠マーカー(細)
写真
写真の装飾ですが、「枠線」は写真とページの背景が同系色の場合、区切りを明確にできるメリットがあります。
枠線
ポラロイド風

ボックス
長文のテキストが続く場合、この「ボックス」を利用して変化をつけたり強調したりするなど、さらに読み続けていただける効果があります。また、引用風ボックスでは、ニュース記事などをページで引用することで、サイトの説得力が高まります。
黄色ボックス
薄赤ボックス
グレーボックス
引用風ボックス
リスト
箇条書きにしてわかりやすくまとめられる「リスト」です。利用方法は、最初にこの「スタイル」でリスト全体のデザインを選択し~例:ドット下線(リスト)~、その後「ulタグ」もしくは「olタグ」で中のリストを作成する流れになります。
ココに注意
「ulタグ」もしくは「olタグ」どちらを使えばよいか、わかりにくいのがこの「リスト」の注意点です。下記のサンプルでは、「ulタグ」「olタグ」それぞれで作成していますので、同じ表示になる、異なる表示になる、の確認が行えます。
ドット下線(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
マル(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
マル+ドット下線(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
簡易チェック(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
簡易チェック+ドット下線(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
チェックボックス(番号なしリスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
チェックリスト(番号なしリスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
ナンバリング(番号付きリスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
ナンバリング四角(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述
ナンバリング四角+ドット下線(リスト)
- ulタグで作成
- ここに記述
- ここに記述
- olタグで作成
- ここに記述
- ここに記述

あわせて読みたい
Affinger6について詳しく
-
-
AFFINGER6 ~企業・個人で利用できる“収益を上げることに徹した”WordPressテンプレート~
数あるWordPressのテンプレートの中でも、「収益を上げる」ことに焦点を絞り開発されたのが「AFFINGER6」(アフィンガー6)です。売り上げを増やしたい、利益をアップさせたい企業やブロガー、ア ...
続きを見る
Affinger6独自プラグインを解説
-
-
AFFINGER6独自プラグインで大幅に機能がアップ
収益を上げることに特化した「AFFINGER6」で利用できる独自プラグインは、管理者・運営者の作業を助け、さらに売上をアップさせることに貢献します。このページではAFFINGER6の独自プラグインにつ ...
続きを見る
Affinger6「タグ」早見・一覧ページ
-
-
AFFINGER6 ~サイトデザインで活かす「タグ」装飾表示早見・一覧ページ
多機能なWordPressテンプレート「AFFINGER6」ですが、数多くの機能があることでかえって、どの機能を使えばよいか悩むこともあります。 そこで、サイトデザインに欠かせない要素「タグ」について ...
続きを見る
まとめ
WordPressテンプレート「AFFINGER6」では「タグ」や「スタイル」を組み合わせてページを豊かにすることができます。画像ソフト・プラグインに依存しないメリットは、ページが軽くなり、プラグイン同士の干渉がなく安定していること、つまりユーザーの見やすさを高めて同時に検索エンジン対策も行えるという点です。
サクサク表示されるページを公開して、情報発信に、そしてビジネスにご活用ください。
記事作成者プロフィール

- ITサポート/コンテンツプロデュース
-
株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
おすすめ情報サイト「マイベスト」レンタルサーバー・ドメイン監修
当サイトでは、ホスティングビジネスの経験を踏まえ、ユーザー視点でレンタルサーバーやドメイン販売サービス・WordPressテンプレートの評価をし、これから始めたい・切り替えたい方の立場に立った記事・比較情報をお届けします。
【仕事略歴】早稲田大商卒。東証一部精密機器メーカー、レコード会社を経て独立後、2001年に動画配信(ストリーミングサーバー)レンタルサービス「ストレン」を立ち上げ、マイクロソフト認定パートナーとしてサーバー構築・運用からPRまで全般に携わる。2015年、東証グロース上場企業・お客様と合意のもと、上場企業サービスへ移行していただき同ビジネス終了、以降はITサポート・コンサルティングとして企業の支援に。
【趣味】プロ野球/MLBなどスポーツ、映画・音楽好き(主に洋楽)