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

WordPressテンプレート AFFINGER6

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

 

通常版テンプレート単体

 

特別版テンプレート・プラグインとセット

 

スタイルについて

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タグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

マル(リスト)

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

簡易チェック(リスト)

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

  • ulタグで作成
  • ここに記述
  • ここに記述

 

  1. olタグで作成
  2. ここに記述
  3. ここに記述

 

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

 

あわせて読みたい

Affinger6について詳しく

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

商品名 料金 ライセンス形態 ACTION AFFINGER6 14,800円 1ライセンス購入で サイト利用数無制限 こんな方におすすめ SEO対策をしたい、表示速度を上げたい、WEBで収益を上げた ...

続きを見る

Affinger6「タグ」早見・一覧ページ

AFFINGER6 ~企業・個人で利用できる“収益を上げることに徹した”WordPressテンプレート~
AFFINGER6 ~サイトデザインで活かす「タグ」装飾表示早見・一覧ページ

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

続きを見る

 

まとめ

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

 

通常版テンプレート単体

 

特別版テンプレート・プラグインとセット

 

記事作成者プロフィール

佃 直毅
佃 直毅ITサポート/コンサルティング/コンテンツプロデュース
株式会社ストレン 代表取締役社長
MCP,2級知的財産管理技能士
おすすめ情報サイト「マイベスト」レンタルサーバー・ドメイン監修

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

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

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