AFFINGER7/EX リリースのお知らせ

RenewalAFFINGER7 デザインカード

好きなデザインを1クリックで反映できる「AFFINGERデザインカード」プラグインが「AFFINGER7デザインカード」プラグインとしてリニューアル致します。

デザインサンプル

従来はデザインごとにプラグインがございましたが「AFFINGER7デザインカード」プラグインは本体は共通となりデータが個別となります。

AFFINGER7の主要追加機能

デザイン効率化カスタマイザーにカラーミニパレット

カスタマイザーの「全体カラー」で設定したカラーをミニパレットで表示するようにしました。

ミニパレットは、カスタマイザーのプレビュー画面の隅に出る小さなパネルで、キー・メイン・サブ・テキスト・アクセントの5色を色見本とカラーコードの形でまとめて見せます。

カスタマイザーで色を変えると表示もその場で追従するので、「今サイト全体の基調になっている色と、その数値」が一目で把握できます。カラーコードはクリックするとクリップボードにコピーできるため、別ツールやデザイン資料に貼るときも手間がかかりません。

PCメニューの改善

PCメニューに「最小幅」「最大幅」設定を追加しました。最大幅に値が無い場合は文字数に応じた幅になり長いテキストでも表示されます。

ヘッダーメニュー横列も下層メニューに対応しました。

第一階層のみだったヘッダーメニュー横列（PC）もドロップダウンで下層メニューが表示できるようになりました。

カスタマイザーの「PC ヘッダーメニュー / 横列」で有効化が必要です。

「ブロック下の余白」を自由に設定

段落ブロックなどの「ブロック下の余白」設定に自由なpxサイズで設定できる項目を追加しました。

カスタムフィールドにURLタイプを追加

カスタムフィールドの入力タイプにURLを追加しました。

表（Table）ブロックの拡張

セルの結合・分割

表（Table）ブロックのセルを結合及び分解する設定を追加しました。

セルの結合		テキスト	テキスト
テキスト	セルの結合	セルの結合
テキスト		テキスト	テキスト
テキスト	セルの結合		テキスト

• 結合・分解操作はパソコン操作時のみ

セルの文字・背景色【正規版】

セルの文字や背景色を指定する設定を追加しました。

セルの結合		テキスト	テキスト
テキスト	セルの結合	セルの結合
テキスト		テキスト	テキスト
テキスト	セルの結合		テキスト

背景にアイコンを挿入【正規版】

セル背景に以下のアイコンを挿入できる設定を追加しました。

診療時間	月	火	水	木	金	土	日・祝
午前	田中	田中		山本	田中	山本
午後	田中	田中 予約のみ		山本	田中	山本 予約のみ

使い方いろいろ。セールスカードブロック

商品・サービス・お知らせなどを「一枚のカード」にまとめて、読者の目を引きつけながら詳細へ誘導できるブロックです。

画像・見出し・補足文・本文を一か所で整えられるので、記事の途中に「押しの一点」を置きやすくなります。

サービスへの想いやユーザーの声など

アイコンでシンプルに～商品の紹介や比較、提案に。

メニューやプランの紹介に

• スライドショーはEX版のスライドコンテンツ機能です

ステップブロック

手順や流れを、きれいに番号付きで見せたいときに使うブロックです。

レシピの工程、設定の手順、作業のステップ、初心者向けのやさしい解説など、「このあと何をすればいいか」が一目でわかるようにまとめられます。

読者が自分のペースで開ける折りたたみ機能

「閉じる」をオンにすると、各ステップの本文は最初は畳んだ状態で表示されます。

番号とタイトルだけが並ぶので、記事を開いた瞬間に「全体の流れ」が把握しやすくなります。

興味のあるステップだけ、タイトルやトグルをタップして本文を開けます。全部を一度に読まなくてよいので、スマホでも負担が少なく、リピート読みにも向きます。

いつ、何があったかをタイムラインでタイムラインブロック

年月日とタイトル、本文を縦の線でつなぎ、流れのわかる時系列表示ができます。項目の追加はブロック操作だけ。色や表示の雰囲気も、編集画面から整えやすいので、年表・経緯紹介・日記的なまとめに向いています。

スマホサイズ（599px以下）や設定ではラベルを内側に変更できます

ビジネスサイトや地域情報ブログにGoogleMap埋め込みブロック

Google マップの「地図を埋め込む」で取得した HTML を貼るだけで、記事や固定ページに地図を表示できるブロックです。AFFINGER 側で iframe の URL を検証しつつ、幅・高さ・枠線・角丸など見た目を整えられます。

新ウィジェット

記事一覧・カテゴリー一覧・タグ一覧（EX限定）

ウィジェットに記事一覧・カテゴリー一覧・タグ一覧（EX限定）を追加しました。

SVGタグによるアイコン設定を追加

メモブロックやマイボックスブロックなど様々なブロックのアイコンをSVGタグ（Remix.iconやBootstrap Iconsなど）で設定できるようになりました。

これにより今まで以上に自由なアイコンを設置できるようになりました。

ツールバーのハイライトを第一階層へ移動

使用頻度の高いテキストの色・背景色設定を第一階層に移動しました。

見出しブロックにサブタイトル設定を追加

見出しのサブタイトルを簡単に設置できるようにしました。これに伴い、ツールバーの「キャッチコピー」「キャッチコピー+目次」設定は廃止しました。

新スタイル

段落ブロック

段落ブロックに汎用性の高い「スラッシュ」「ライン」スタイルを追加しました。

スラッシュ

ラインスタイル

埋め込みURLのスタイルを追加

OGP対応

埋め込みURLのサムネイル画像として、OGP画像を選べるようにしました。

AFFINGER管理：「全体設定」＞”サムネイル画像設定”

コードブロックの仕様変更

コードブロックのデザインを変更し、ラベル設定とコピーボタン機能（EX版のみ）を追加しました。

<?php
$data = [
    ['id' => 1, 'name' => 'Test1'],
    ['id' => 2, 'name' => 'Test2'],
];

foreach ($data as $item) {
    echo $item['name'] . "<br>";
}

カラーモード及びEX版のコピーボタンはGutenberg設定で有効化できます。

動的CSSのキャッシュ機能を追加

カスタマイザーなど動的に生成されるCSSをキャッシュする機能を追加しました。

• AFFINGER管理またはカスタマイザーを保存したときか「CSSキャッシュをクリア」が押されたときにキャッシュをクリアします。CSSが反映されない場合はお試しください。

AFFINGER管理：「その他」＞”CSSキャッシュ”

画像ブロックの枠線・角丸設定を追加

画像ブロックの枠線・角丸設定を追加しました。

設定ナビを追加

AFFINGER管理画面に設定ナビを追加しました。

その他

• AMPの機能を完全廃止（※利用者は設定 → パーマリンクで「変更を保存」 を一度実行してリライトルールを更新してください。）
• 小さなCSSファイルのインライン化/統合
• AFFINGER管理の”トップ/記事一覧”にあった「動画背景（YouTube背景）」設定を”全体設定”に移動
• 見出しスタイル「カウント」のデザインを調整
• トップページのLPワイド化及びデフォルト記事一覧のカードデザイン対応
• カスタマイザーの メモボックス、スライドボックス、Webアイコンの設定を削除
• カスタマイザー設定値の 0 対応（ver6までは null と同じ扱いでしたが 0 として設定されるようになります）
•  グループブロック（ワイド）のデフォルト背景カラーを削除（グレーから白に）
•  グループブロックにカウントスタイルのリセット不可設定を追加
• デフォルトフォントおよびサイズの変更
• 「記事一覧のカードデザイン化」及び記事一覧のカテゴリーや投稿日表示に関する設定を「トップ/記事一覧」タブへ移動
• カードデザイン（スライドショー含む）のタイトルを左寄せに
• フォントのサイズ「記事一覧」の行間をサイドバーに反映しない
• 「スライドショー機能の全停止」設定を表示速度優先（β）に移動
• マーキー風の padding を削除
• [グレー] インラインスタイルのCSSを追加
• コメントのニックネームに初期値として”匿名”を表示
• 記事一覧のタイトルを「文字数制限（2列）する」設定を追加
• その他

EX版限定の追加機能

期間限定ブロック【正規版】

指定した期間だけ自動で表示・非表示になるブロックを追加しました。

期間限定コンテンツにおすすめのブロックです。

レビューブロック

星とアバターでレビュー・体験談をカード風にまとめられるブロック

レビューブロックは、商品やサービスを「誰が・どんな立場で・何点か・どう感じたか」をひと目で伝えるためのブロックです。

顔写真（アバター）と星評価、見出しのようなタイトル、属性ラベル（例：年齢層・利用歴・職業など）を並べ、本文は通常の段落ブロックで自由に書けます。

口コミ・体験談・アフィリエイト記事の「信頼の見せ方」を、デザインを崩さずサイトに合わせて整えたいときに向いています。

スライドコンテンツブロック

複数の内容を横スライドで切り替え、端末ごとに見える枚数を調整できるブロック

スライドコンテンツは、複数のパネルを横並びのスライドとして見せるブロックです。PC・タブレット・スマホで一度に表示する枚数を変えられるので、狭い画面でも読みやすくまとまります。

自動で送り表示したり、オフにして前後ボタンで操作したりできます。おすすめポイントの列挙、比較・事例の紹介、訴求を短い単位で切り替えたいランディングや記事の「見せ場」に向いています。

カットオフ + 自動スクロール

ワイド + 手動スクロール

レビューボックスとの組み合わせ

• LazyLoadを使用していると高さが正常に取得できない場合がございます（スライド内の画像のAffingerLazyLoadは除外します）
• スライド内のコンテンツは原則として画像やテキストなどシンプルな内容を想定しています。内包コンテンツによっては不具合やレイアウト崩れが生じる場合がございます。

headerエリア及びヘッダー画像エリアの動画背景