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

2021年11月11日

WordPressテンプレート AFFINGER6

多機能なWordPressテンプレート「AFFINGER6」ですが、数多くの機能があることでかえって、どの機能を使えばよいか悩むこともあります。

そこで、サイトデザインに欠かせない要素「タグ」について、主要な機能・装飾をこのページでぱっと見で分かるようにご紹介します。

 

通常版テンプレート単体

 

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

 

タグについて

Affinger6 タグ機能について

WordPressの固定・投稿ページを作成するClassic Editor 「タグ」内にページを装飾する各機能・項目が数多くあります。
ページの内容やデザインに沿って、必要なタグを設定してより読みやすいページ作りを心がけましょう。

 

テキストパーツ

最初にテキストの見栄えを彩る「テキストパーツ」についてです。
メモ風に囲って見せる「クリップメモ」や、何が書いてあるか分かりやすくする「ミニ吹き出し」、段階を踏んで説明する「ステップ」などがあります。

Affinger6 タグ機能 テキストパーツについて

クリップメモ

メモ

ここに記述

外部リンク

ブックマーク

お知らせ

はてな

コメント

コード

ポイント

ユーザー

初心者

注意文

注意文(グレー)

 

クリップメモ(テキスト)

メモ

ここに記述

参考

関連

注意

Check

次へ進む

前に戻る

質問

回答

 

ミニふきだし

基本

ここに記述

オレンジ

ここに記述

ピンク

ここに記述

ブルー

ここに記述

グリーン

ここに記述

レッド

ここに記述

+マイボックス

ふきだしテキスト

ここに記述

 

テキストだけでは単調になりがちで、ページからの離脱も考えられますので、カラフルな吹き出しで「何が書いてあるかの強調」「色彩のアクセント」など付けて、より読みやすいページに修正しましょう。

 

複合

自由なメモ

自由なメモ

ここに記述

ココがポイント

ココがポイント

ココがおすすめ

ココがおすすめ

ココがダメ

ココがダメ

ココに注意

ココに注意

もっと詳しく

さらに詳しく

女性コメント

◯才女性

男性コメント

◯才男性

 

複合(アイコンなし)

自由なメモ

自由なメモ

ここに記述

ココがポイント

ココがポイント

ココがおすすめ

ココがおすすめ

ココがダメ

ココがダメ

ココに注意

ココに注意

もっと詳しく

もっと詳しく

はてなマーク

つまづきポイント

 

まるもじ(小)

基本 ここに記述

オレンジ ここに記述

ピンク ここに記述

ブルー ここに記述

うすい注意 ここに記述

注意 ここに記述

 

まるもじ(大)

基本

ここに記述

オレンジ

ここに記述

ピンク

ここに記述

ブルー

ここに記述

はてな

ここに記述

チェック

うすい注意

ここに記述

注意

ここに記述

 

HTML (カスタム)

ルビ

振り仮名ふりがな

 

カスタムフォント

デフォルト

テキスト記述

白影

テキスト記述

 

ステップ

step
1
ここに記述


step
2
ここに記述


step
3
ここに記述

 

ポイント

ここに記述

 

ラベル

ここに記述

 

 

流れる文字(marguee風)

ここに記述

 

ボックスデザイン

次は、比較的長い文章を囲い装飾する「ボックスデザイン」です。
さらに詳しく説明したい場合や、かみ砕いて解説したい場合などに利用できます。また、チェックリスト形式や簡単な流れで項目をまとめられますので、理解の整理・促進にも役立ちます。

Affinger6 タグ機能 ボックスデザインについて

バナー風ボックス

基本

タイトル

 

背景なし(高さ400px)

タイトル

左寄せ

タイトル

 

マイボックス

基本

ポイント

ここに記述

しかく(枠のみ)

ここに記述

まるみ

ここに記述

参考

参考

ここに記述

関連

関連

ここに記述

メモ

メモ

ここに記述

ポイント

ポイント

ここに記述

注意ポイント

注意ポイント

ここに記述

はてな

はてな

ここに記述

+ミニふきだし

ふきだしテキスト

ここに記述

ShortCode

ここに記述

 

マイボックス(+CSSクラス)

メモ

メモ

ここに記述

メモ(下線のみ)

メモ

ここに記述

メモ(枠のみ)

メモ

メモ(枠・下線あり)

メモ

注意(下線のみ)

ここに注意

必要なモノ

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

必要なモノ(ドット下線)

必要なモノ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

チェックリスト

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

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

チェックリスト

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

簡単な流れ(ドット下線)

簡単な流れ

  • ダミーテキスト
  • ダミーテキスト
  • ダミーテキスト

 

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

基本

見出し(全角15文字)

ここに記述

注意

注意

はてな

はてな

ポイント

ポイント

メモ

メモ

基本(タイトル幅100%)

見出し(全角15文字)

注意(タイトル幅100%)

注意

はてな(タイトル幅100%)

はてな

ポイント(タイトル幅100%)

ポイント

メモ(タイトル幅100%)

メモ

 

メモボックス

メモ

ここに記述

 

スライドボックス

 

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

  • テキストを記述
  • テキストを記述

 

こんな方におすすめ(V)

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

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

こんな方におすすめ

  • これはダミーのテキストです
  • これはダミーのテキストです

 

ガイドマップメニュー

 

pre

 html
 

 

pre:terminal

 command
 

 

pre:shortcode

 shortcode
 

 

カスタムボタン

WordPressテンプレート「AFFINGER6」では、画像を作ることなくタグを利用すれば、テキストのままカラフルなボタンを作成しページに設定することができます。
色彩やサイズなど、紹介する商品やサービス・コンテンツによって適したボタンを選択して掲載しましょう。

Affinger6 タグ機能 カスタムボタンについて

ノーマル

基本

ボタン

詳しくはコチラ(オレンジ)

詳しくはコチラ

詳しくはコチラ(レッド)

詳しくはコチラ

詳しくはコチラ(グリーン)

詳しくはコチラ

詳しくはコチラ(ブルー)

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく(オレンジ)

もっと詳しく

もっと詳しく(ピンク)

もっと詳しく

もっと詳しく(ブルー)

もっと詳しく

人気ランキング

人気ランキング

ランキングはコチラ

ランキングはコチラ

 

角丸

基本

角丸ボタン

詳しくはコチラ(オレンジ)

角丸ボタン

詳しくはコチラ(レッド)

角丸ボタン

詳しくはコチラ(グリーン)

角丸ボタン

詳しくはコチラ(ブルー)

角丸ボタン

 

ミニ

基本
ボタン

詳しくはコチラ(オレンジ)
詳しくはコチラ

詳しくはコチラ(レッド)
詳しくはコチラ

詳しくはコチラ(グリーン)
詳しくはコチラ

詳しくはコチラ(ブルー)
詳しくはコチラ

 

MCボタン

オレンジ

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

レッド

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

グリーン

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

ブルー

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

 

ボックスメニュー

基本(4列)

サブあり(4列)

縦並びタイプ

縦並びタイプ(サブあり)

縦並びタイプ(単品)

 

ボタンA

 

ボタンB

 

前のページ(履歴)に戻る

 

会話吹き出し

もっと詳しく
ここに記述
ここに記述
お悩みくん

画像は事前に設定しておく必要があります。8パターンまで利用できます。
また、タグにrを加えると反対向きになります。

 

ランキング

チャート1位デモ

チャート2位デモ

チャート3位デモ

チャート4位デモ

 

レイアウト

レイアウトは、他の装飾に比べれば地味なのですが、パソコンとスマホで読みやすくページ制作するためには欠かせない機能です。
パソコンで横に表示される表が、スマートフォンでは縦に表示されますので、ユーザーにとっては読みやすく、管理者にとっては作りやすい機能の一つです。

 

全サイズ

左右30:70%

左側テキストは30%で表示されます(30%)

右側テキストは70%で表示されます(70%)

左右50%

左側テキストは50%で表示されます(50%)

右側テキストは50%で表示されます(50%)

左右free%

左側テキストは任意の%で表示されます(%)

右側テキストは任意の%で表示されます(%)

均等横並び

  • 横並びコンテンツ
  • 横並びコンテンツ
  • 横並びコンテンツ

 

PCとTab(959px以上)

3分割

このテキストは33%で表示されます(33%)

このテキストは33%で表示されます(33%)

このテキストは33%で表示されます(33%)

左右30:70%

左側テキストは30%で表示されます(30%)

右側テキストは70%で表示されます(70%)

左右70:30%

左側テキストは70%で表示されます(70%)

右側テキストは30%で表示されます(30%)※スマホ(599px以下)ではこちらが上になります

左右40:60%

左側テキストは40%で表示されます(40%)

右側テキストは60%で表示されます(60%)

左右60:40%

左側テキストは60%で表示されます(60%)

右側テキストは40%で表示されます(40%)※スマホ(599px以下)ではこちらが上になります

左右50%

このテキストは50%で表示されます(50%)

このテキストは50%で表示されます(50%)

 

タブ(切替ボタン)

2つ




タブ1のコンテンツ

タブ2のコンテンツ


3つ





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


4つ






タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ

タブ4のコンテンツ


 

タブ

2つ




タブ1のコンテンツ

タブ2のコンテンツ


3つ





タブ1のコンテンツ

タブ2のコンテンツ

タブ3のコンテンツ


 

タイムライン

基本


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

センター


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

基本(ステップ)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

センター(ステップ)


  • step.1

    ここにコンテンツ


  • step.2

    ここにコンテンツ


  • step.3

    ここにコンテンツ


 

ブログカード

 

タイムライン(カウント)

基本


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

センター


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


  • ここに見出しテキスト

    ここにコンテンツ


 

ブログカード

 

その他パーツ

スター





 

画像付きコメント

タイトル

◯代男性

ここに記述

 

三角(下矢印)

 

スクロールナビ

 

あわせて読みたい

Affinger6について詳しく

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

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

続きを見る

Affinger6「スタイル」早見・一覧ページ

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

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

続きを見る

 

まとめ

以上のようにWordPressテンプレート「AFFINGER6」では、画像ソフトで制作することなく、プラグインをインストールすることなく、テンプレート自体の機能で数多くの装飾を利用することができます。
より読みやすくユーザビリティの高いページ作成にご活用ください。

 

通常版テンプレート単体

 

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

 

記事作成者プロフィール

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

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

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

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