AFFINGER7で追加された機能

背景スライドショー機能を追加

サンプルをみる

ヘッダー画像で登録した画像をヘッダーエリアの背景画像としてスライドショーで表示できます。（※「ヘッダーコンテンツ」利用時のみ）

背景スライドショーとして設定するエリアとして「ヘッダー画像エリア」「headerエリア」「body全体」が選択可能です。

• 画像自体の縦横比は保たれ（歪まない）、表示枠の縦横比と画像の縦横比の差分だけ、中央を基準に上下または左右がトリミングされます。

背景画像に透過グラデーションを追加

背景画像に任意のカラーで透過グラデーションをかける設定を追加しました。

好きな色でフェードアウトする背景を作成できます

ヘッダー画像コンテンツに見出し用フォームを追加

ヘッダー画像コンテンツ利用時に見出し専用のフォームを追加して設定しやすくしました。（ <br> タグのみ使用可）

AFFINGER管理の「ヘッダー（ナビ / 画像）」＞”表示コンテンツ”にて「ヘッダーコンテンツ」選択時

AIで要約するボタンの実装

既存のAIサービスを利用してユーザーに要約を促すボタンです。

ユーザーの利用サービスを活用するので提供側の課金やAPIなどは不要です。

自身の記事およびURL内容がAIサービスで入力、質問されることに価値を感じる方には特におすすめです。

• AIサービスによってはプロンプトの実行警告などが表示されるケースがあります

AFFINGER管理・カスタマイザー横断検索フォーム（β）

AFFINGER管理とカスタマイザーの設定をキーワードで横断できる検索フォームを追加しました。

各設定箇所を今まで以上に見つけやすくなるかと思います。

• 検索フォームが正常に表示されない場合は Ctrl ( mac は command ) + Shift + R （スーパーリロード）をお試しください。
• モバイル閲覧時は表示されません

カスタマイザーにカラーミニパレット

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

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

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

PCメニューの改善

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

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

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

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

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

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

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

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

表（Table）ブロックの拡張

セルの結合・分割

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ステップブロック

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

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

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

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

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

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

タイムラインブロック

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

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

GoogleMap埋め込みブロック

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

新ウィジェット

記事一覧・カテゴリー一覧

ウィジェットに記事一覧・カテゴリー一覧を追加しました。

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

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

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

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

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

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

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

新スタイル

段落ブロック

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

スラッシュ

ラインスタイル

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

OGP対応

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

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

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

コードブロック（及びpreショートコード）のデザインを変更し、ラベル設定とコピーボタン機能（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 として設定されるようになります）
•  グループブロック（ワイド）のデフォルト背景カラーを削除（グレーから白に）
•  グループブロックにカウントスタイルのリセット不可設定を追加
• デフォルトフォントおよびサイズの変更
• 「FontAwesomeIcons4.7.0の読み込み」を廃止（※FontAwesomeのサポート終了）
• カスタマイザーの メモボックス、スライドボックス、Webアイコンの設定を削除
• 「記事一覧のカードデザイン化」及び記事一覧のカテゴリーや投稿日表示に関する設定を「トップ/記事一覧」タブへ移動
• カードデザイン（スライドショー含む）のタイトルを左寄せに
• フォントのサイズ「記事一覧」の行間をサイドバーに反映しない
• 「スライドショー機能の全停止」設定を表示速度優先（β）に移動
• [グレー] インラインスタイルのCSSを追加
• コメントのニックネームに初期値として”匿名”を表示
• 記事一覧のタイトルを「文字数制限（2列）する」設定を追加
• その他

AFFINGER6からAFFINGER7へのアップデート手順及び注意事項