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

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

スタイルについて

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

テキスト

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

赤字

太字

赤字（太字）

大文字

小文字

ドット線

参照リンク

参考

必須

打消し

code

code風

アニメーション

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

45°揺れ

ベル揺れ

横揺れ

縦揺れ

点滅

バウンド

回転

ふわふわ

大小

シェイク

シェイク（強）

拡大（ゆれ）

過ぎる

戻る

バースト

落ちる

アイコン

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

はてな

注意

人物

チェック

メモ

王冠

初心者マーク

見出し

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

キャッチコピー

キャッチコピー+目次

記事タイトル

h2風

h3風

h4風

h5風

まとめ

カウント

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

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

ランキング1位（基本）

ランキング2位

ランキング3位

ランキング4位以下

マーカー

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

黄マーカー

黄マーカー（細）

赤マーカー

赤マーカー（細）

青マーカー

青マーカー（細）

鼠マーカー

鼠マーカー（細）

写真

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

枠線

ポラロイド風

ボックス

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

リスト

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

ドット下線（リスト）

マル（リスト）

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

簡易チェック（リスト）

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

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

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

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

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

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

解説です

ドット下線（リスト）とチェックボックス（番号なしリスト）の2つは、ulタグとolタグで表示の違いがありましたので、利用するときは注意してください。

あわせて読みたい

まとめ

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

記事作成者プロフィール

佃　直毅ITサポート/コンサルティング/コンテンツプロデュース

株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
おすすめ情報サイト「マイベスト」レンタルサーバー・ドメイン監修

【仕事略歴】早稲田大商卒。東証一部精密機器メーカー、レコード会社を経て独立後、2001年に動画配信（ストリーミングサーバー）レンタルサービス「ストレン」を立ち上げ、マイクロソフト認定パートナーとしてサーバー構築・運用からPRまで全般に携わる。2015年、東証マザーズ上場企業・お客様と合意のもと、上場企業サービスへ移行していただき同ビジネス終了、以降はITサポート・コンサルティングとして企業の支援に。

当サイトでは、ホスティングビジネスの経験を踏まえ、ユーザー視点でレンタルサーバーやECサービスの評価をし、これから始めたい・切り替えたい方の立場に立った記事・評価・比較情報をお届けします。

【趣味】プロ野球/MLBなどスポーツ、そして映画・音楽好き（主に洋楽）。

最新の投稿記事

• お役立ち情報 一般2021.11.30コロナ支援策：法人最大250万円の「事業復活支援金」が発表されました
• IT関連情報・コラム2021.11.27レンタルサーバー業界から見たSDGs（エスディージーズ）、そしてその取り組みとは？
• ワードプレステンプレート2021.11.24isotype（アイソタイプ） ～機能と美を追求したWordPressテーマ ～テンプレート一覧
• ワードプレステンプレート2021.11.23TCD ～WordPressテンプレート販売サイトの見方・購入方法～