お知らせ バージョンアップ

【超アップデートのお知らせ】NEW FACE、Gutenbergプラグイン配布、無限ループ(EX)など ~ WING ver20190801β

2019年8月1日

見た目を変える新しいデザインやGutenbergプラグイン配布、EX限定「無限スクロール」機能などを追加したver20190801βの内容を紹介します。

【追記】

現在、AFFINGER5及びSTINGER PRO2通常版も20190809βを公開済みです。

AFFINGER5 / STINGER PRO2(通常版) ver20190809β公開のお知らせ

本日迄!EX期間限定割引 2019/08/15までEX版アップデートを2,000円OFFで販売中です。 AFFINGER5EX版ページへ AFFINGER5及びSTINGER PRO2通常版のver2 ...

続きを見る

【EX】target="_blank"削除設定追加 ~ WING ver20190809βアップデート

EX限定先行公開中のβ版にて以下の機能追加及び軽微な修正を行ったver20190809βを公開致しました。 EX版 購入ユーザー限定ページ 記事内のリンクからtarget="_blank"を一括で削除 ...

続きを見る

ご注意事項

現時点のver20190801β版及びGutenbergプラグインはEX版 購入ユーザーのみ限定ページにて先行公開しております。

AFFINGER5及びSTINGER PRO2通常版への公開は8月中旬予定です。

EX版販売のご案内はコチラ

最新版アップデートの方法はコチラ

  • β版の為、販売中のものには当機能は反映されておりません。購入後、別途ダウンロードして下さい

  • 追加(又は実装予定)の機能及びデザインは今後、変更または削除される場合もございます。

WING ver20190801βの機能追加内容

AFFINGER5 / EX / STINGER PRO2を含めた全体のアップデート内容です。

記事ごとのヘッダーデザイン

アイキャッチ画像をタイトル背景にする新しいFACE

今回のバージョンアップでは新しい記事の見せ方としてヘッダー部分にタイトルやアイキャッチ画像背景を設定できるようにしました。

また、それ以外にも任意のコードを挿入できるフォームも用意したので記事ごとにヘッダー画像を設定する等、より細やかなカスタマイズが可能になるかと思います。

ステ子
記事情報を挿入した際の最小の高さは200pxです。CSSで適宜変更して下さい。

記事に応じたヘッダーを設定可能

「出力するソース」では記載したコードをそのまま表示します。

これにより記事ごとにヘッダー画像を変更するなどのカスタマイズが可能です。(「記事情報を表示」にチェックがある場合はそちらが優先されます。)

※「記事ごとのヘッダーデザイン」はAMP及びLP(及びLPワイド)には対応しておりません。
※「記事ごとのヘッダーデザイン」使用時はアイキャッチ画像は挿入されません

詳しい説明はコチラ

ヘッダー画像エリアの背景にパララックス(視差)風の効果設定

PC閲覧時にヘッダー画像をパララックス(視差)風の効果を付与する設定を追加しました。

ポイント

カスタマイザー:「ヘッダー画像」>ヘッダー画像エリア

※表示にはbackground-attachment: fixedを使用しており、背景画像はビューポートからの相対位置で固定されます(レスポンシブ設定とは見た目が異なります)。
※反映はPC閲覧時のみです。

ヘッダーカード背景画像設定

「おすすめヘッダーカード」リンクに背景を設定するデザイン機能を追加しました。

カスタマイザー:「基本エリア」>ヘッダーカードエリア

添え字付ヘッダー用メニュー(横列)

PC閲覧時にロゴと横並びに表示するヘッダー用メニュー(横列)を追加しました。

このメニューではタイトル属性で設定された文字もサブテキストとして反映できます。

詳しい使い方と注意事項はコチラ

ここにも一言!見出し用キャッチコピー

こんな風にコピーを添えるとても伝えやすいタイトルになるよね

見出しの一部をキャッチコピー風にデザインするクイックタグを用意しました。

前方又は後方の文字をキャッチコピーとすることで見た目を変更することができます。

ヘッダーカードでも使える!

キャッチコピーはおすすめヘッダーカードにも使用できます。

詳しい使い方と注意事項はコチラ

すごいもくじ(SUGOI MOKUJI)連動アップデート

キャッチコピーを目次から除外

見出しにキャッチコピーを追加することで目次が長く見辛くなることが懸念されます。

目次プラグイン「すごいもくじ(SUGOI MOKUJI)[PRO]」ver20190628以上では見出しに付けたキャッチコピーを目次の記事タイトルから除外することが可能です。

目次テキストを任意の見出しにカスタマイズ

さらに、新バージョンでは目次に表示される記事タイトルを任意のテキストに変更ズできるようになりました。

「SUGOIMOKUJI(すごいもくじ)[PRO]」アップデート内容

「SUGOIMOKUJI(すごいもくじ)[PRO]」購入ユーザー限定ページ(※無料特典は対象外です)

「すごいもくじ」販売ページ

耳折れデザインの追加

h4及びh5タグに新しい「耳折れデザイン」を追加しました。

記事内の背景が白い箇所を想定したデザインとなります

リストデザインの追加

ドット下線
  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです
マル(リスト)
  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです
マル(リスト)+ドット下線
  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです
簡易チェック
  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです
簡易チェック+ドット下線
  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです
ナンバリング四角
  1. これはダミーのリストです
  2. これはダミーのリストです
  3. これはダミーのリストです
ナンバリング四角+ドット下線
  • これはダミーのリストです
  • これはダミーのリストです
  • これはダミーのリストです

リストアイコンのデザインはテキストのデフォルトサイズでデザインされています。テキストのサイズ変更によっては適宜、調整が必要です。※AMP非対応

カラーの一部はカスタマイザーで変更できます

詳しい使い方はコチラ

ボックスデザイン追加

メモ

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

メモ

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

メモ

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

メモ

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

ここに注意

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

必要なモノ

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

必要なモノ

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

チェックリスト

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

チェックリスト

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

簡単な流れ

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

簡単な流れ

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

各デザインにはショートコードのmyclass属性にクラスを追加することで変更できます。

見出しフリーボックス(タイトル幅100%)

見出しフリーボックスのタイトルが全幅、中央寄せになったタイプです。

見出し(全角15文字)

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

注意

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

はてな

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

ポイント

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

メモ

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

組み合わせて色んなカスタマイズも。

お買い物リスト

  • 砂糖
  • 牛乳
  • たまご1パック
  • リンゴ

オリジナルpreデザイン

コードなどの表示に使用するオリジナルのpreタグのショートコードを用意しました。

既存のpreに反映させることも可能です。

 html
img {
margin-bottom:5px;
border:1px solid #ccc;
}
 command
$ pwd

※CSSのみの軽くシンプルなデザインです

詳しい使い方と注意事項はコチラ

ワイド背景用ショートコード

好きな位置で好きな背景色、記事エリアの幅一杯のコンテンツを作成できるショートコードです。

例えばこんな風に、内容を分けたいとき。

これはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミー

例えばこんな風に、左寄せにしたいとき。

これはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミー

例えばこんな風に、右寄せにしたいとき。

これはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミー

例えばこんな風に、背景を画像にしてオシャレに分けたいとき。

これはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミーこれはダミー

※見出しのワイド幅いっぱい設定など、コンテンツによっては表示がハミ出すなどデザインが綺麗にならない場合がございます。
※画像のワイド化は「スタイル>写真>ワイド」で実装しています

詳しい使い方はコチラ

スライドメニューデザイン

背景画像設定可能に

モバイルのスライドメニューバーに背景画像を設定できるようにしました。

カスタマイザー:「メニューのカラー設定」>「スマホスライドメニュー」>スライドメニュー内に配置する背景画像

上部固定設定を追加

既存のスクロールに応じて表示するモバイル用メニューバーに「常時固定」設定を追加しました。

上部に固定する要素(Google自動広告など)やデザイン内容によっては表示が異なる、チラつきが生じる場合等がございます※AMP非対応

タイトル重視のサイトに記事一覧サムネイルの左右変更

一般的なアイキャッチが左にあるレイアウトとは反対になる、某大手メディアでも採用されているレイアウトです。

アイキャッチ画像を右側にすることで記事タイトルが目に入りやすくなる効果があります。

サイトに合った文字をフォントの読み込み種類追加

Googleフォントにdisplay=swapを付与する設定追加

テーマ設定にてGoogleフォントを遅延読込させるdisplay=swapを付与します。

display=swapは読み込みに時間がかかるGoogleフォントをまず別のフォントで仮で表示させてから適応させることで表示速度を改善する仕様です。

オリジナル指定も簡単に

使用したいフォント設定を簡易に設定できるようにしました。

※利用フォントによっては別途ファイルを読み込む必要がございます。

Googleマテリアルアイコン

https://material.io/tools/icons/

Googleのマテリアルアイコンを使用できるようにしました。

有効化して使用したいアイコンのコードを挿入することで使用できます。

「テーマ管理」>「デザイン」>フォントの種類

また、いくつか汎用的なアイコンのコードをクイックタグで用意しています。

クイックタグのGoogleアイコンは上記設定が有効化されている必要があります。

Gutenberg対応(β)

Gutenberg使用時のデザインをβ版として追加致しました。

Gutenberg使用時のエディタの幅「テーマ管理」>「投稿・固定記事設定」>管理画面 > Gutenberg設定(β)にて変更可能です。また、固定表示されるブロック挿入ボタンもこちらで解除できます。

ステ子
「テーマ管理」>「投稿・固定記事設定」>「ビジュアルエディタのデザインを実際に近づける(β)」でより実際に近いプレビューで作業が可能です。

ブロックの表示を厳選したシンプルなモードも用意

Gutenbergのブロックが多すぎて使いづらいという方のために「 段落・見出し・画像・クラッシック・カスタムHTML・再利用ブロック 」だけに厳選したモードを用意。

好みで「引用・リスト ・ ソースコード ・ カラム ・ ボタン ・ ショートコード ・ カバー」を追加することも可能です。

プラグインにより生成されるブロックも使用できなくなるので注意して下さい

よく使うカラーをパレットに保存

Gutenbergのカラーパレットにある最後の4つはテーマ管理で自由に設定が可能です。

Gutenberg(β対応)について

Gutenberg専用プラグイン配布開始

また、これに伴い無料のGutenberg専用プラグインを購入ユーザー限定ページにて配布中(期間未定)です。

Gutenbergプラグインの使い方、注意事項はコチラ

サイト管理者IDの変更設定

プロフィール情報及び構造化データのpublisher情報のユーザーを変更します。(デフォルトのauthor idは「1」で設定されています)

「テーマ管理」>「SEO」>「構造化データ設定」

その他OTHER

  • meta="thumbnail"の追加(サムネイル>投稿・固定ページ以外のアイキャッチ画像(OGP設定))
  • ステップデザインの背景画像が無い場合に配置を下に変更
  • ペーパー風デザイン適応時に横揺れ防止(display:noneの追加)
  • モバイル閲覧時に横揺れする場合の強制修正設定追加(display:noneの追加)(テーマ管理>その他)
  • スタイルのボックス内にあったリストデザインを新たに「リスト」として独立しました。
  • マイクロコピーのボタンカラー追加
  • ルビ(フリガナ)用クイックタグ追加
  • 抜粋の文字サイズ及びカラーの微調整
  • 記事一覧(管理画面)のステータスを赤色に変更 にする設定 (テーマ管理>投稿・固定記事>管理画面)
  • カスタム目次クイックタグの修正
  • 投稿日時の表記をアイコンに変更
  • サイドバー記事一覧のタイトルと投稿日位置を変更
  • ヘッダーカードリンク(AFFINGER)に背景がある場合のリンク反応エリア修正
  • 「トップページのみサイト名(ロゴ)及びキャッチフレーズを非表示」にする設定追加(テーマ管理>ヘッダー>ヘッダー設定)
  • 「STINGER PRO管理」→「STINGER 管理」に変更
  • サイト管理者紹介のプロフィールカードデザインを初期値で有効化
  • CSS調整 bugfix 他

アップデート後に必ず確認を注意事項

アップデート後は以下の確認を必ずお願い致します。

フォント設定について

上部記載のとおり、フォント設定の一部を変更致しました。

設定しているフォントが期待通りの状態になっているかご確認をお願い致します。

テーマ管理 > デザイン > フォントの種類

h4及びh5見出しタグ設定

h4及びh5見出しタグに「耳折れデザイン」が追加されたことにより吹き出しデザインの設定値が変更になりました。使用している方は表示状況をご確認ください。

カスタマイザー>各テキストとhタグ(見出し)>h4タグ(及びh5タグ)

スライドメニューの「表示パターンB」の設定方法変更について

スライドメニューの固定設定が変更になりました。

必ず設定を見直していただき、期待通りの状態になっているかご確認をお願い致します。

※上手く反映されない場合は一度別の状態を選択、保存の上で再度設定を行ってください。

カスタマイザー > メニューのカラー設定 > スマホスライドメニュー > 表示パターン

ペーパー風デザインについて

すごいもくじ(SUGOI MOKUJI)用に用意されたカスタマイザーの「ペーパー風デザイン」使用時にモバイル閲覧時の横揺れを防ぐ為の仕様を追加しました。

それにより、当デザイン使用時は「position:sticky」を使用した動作(追いかけるボタン・表の上部固定など)が無効となりますのでご注意下さい。

ますますパワフルにEX版の最強8機能について

EX版にのみ追加される予定の限定機能です。

関連記事をどんどん読み込む無限スクロール

関連記事をストレスなく閲覧

投稿ページに表示される関連記事に「もっと読む」ボタンによる無限スクロール(風)機能を追加しました。

従来の投稿記事の「関連記事」は管理画面で設定した記事数をランダムで表示するタイプのため、限られた記事数しかユーザーに見せることができませんでした。

当機能を有効化することでクリックする度に関連記事を新着順で無限(記事がある限り)に読み込みます。

これにより、さらにストレスなく記事を効果的に閲覧してもらうことが可能です。

テーマ管理>投稿・固定記事

動かない場合は

  • 対応は対応ショートコード及び投稿記事にある関連記事のみです
  • 表示速度優先(β)又はスライドショー機能の全停止が有効化されていると動作しません
ステ子
トップページにも使用したい場合はテーマ管理でデフォルトの一覧を非表示にしてウィジェットにショートコードで設定する方法などをご検討ください(形状は一部非対応)。

記事一覧ショートコードにも対応

カテゴリ一覧ショートコード等にも対応しています。

動作サンプル

【WING / EX / JET】軽微な修正アップデート ver20190924bのお知らせ(追記あり)

以下の修正を加えたver20190924を各購入ユーザー限定ページに公開致しました。 MCボタン用のクイックタグでグリーンとブルーのカラーが反対になっている修正 ※STINGER PRO2にはMCボタ ...

※テーマ管理にて「もっと読む(無限スクロール)を使用する」が有効化されている必要があります。

スクロールによる自動ではなくボタンのクリック毎に(設定した記事数分)読み込む仕様となります

無限スクロール対応 オリジナル子テーマ「JET」アップデートver20190801β

「JET」を無限スクロールに対応させるには購入ユーザー限定ページにて最新版をダウンロードして下さい。(β版の為、販売テーマには未反映です。別途ダウンロードをして下さい。)

【その他の変更】

  • 記事一覧の日付表示が親テーマ同様「更新日」が反映されるように修正

オリジナル子テーマ「JET」購入ユーザー限定ページ

見出し前広告「10番目」まで拡張

広告を挿入する見出しのカウント数を5から10へ拡張しました。

長文の記事にも幅広く対応できます。

見せたくない「更新日」

「更新日」を記事ごとに非表示にする設定

投稿及び固定ページにて記事ごと「更新日」を非表示(投稿日を表示)にできます。

 記事ごとの非表示に対応する広告専用ウィジェット

カスタムHTML(広告用)ウィジェット

投稿及び固定ページにある非表示設定「設定内の広告を表示しない」は

  • 「広告」と記載されたウィジェットエリア
  • テーマ管理の見出し前広告・自動広告

※今回よりインフィード広告にも自動対応

に対応しておりましたが連動する専用ウィジェットを用意しました。これで挿入した内容は「設定内の広告を表示しない」に連動して非表示となります。

※固定ページでもTOPページに指定されている場合は使用できません

コメントを大幅強化

「見出しタイトル」「評価(スター)」を設定可能

コメントのカスタマイズ機能をさらに強化。

ユーザーからのコメントの「タイトル」「評価(スターマーク)」を設定可能に。

ステ子
商品を紹介するような記事ではそのまま他のユーザーのコメント評価も募集できちゃうわね!

他にもコメントは残したままでコメントフォームだけを閉じたい場合に「コメントフォームを非表示にする」機能など便利な設定が盛りだくさん。

ブラウザの履歴に応じて戻るボタン

どのページから訪れた場合でも「以前見ていた(タブに残っている履歴)ページ」に戻るボタンを表示する機能を追加しました。

ちょっと寄り道で別ページを確認した後に元のページに戻ることができます。

履歴はサイトで簡易的に保存され、履歴が無い場合は表示しません

リンクはショートコードで挿入でき、テキストとアイコンは属性で変更可能です。

利用環境によっては正常に動作しない場合があります(W3totalCacheにてminifyを有効化している場合など)

<body>直後に出力するコード用フォーム追加

コード設定も簡単

様々なコード設置でbody直後に挿入したいコードにも対応致しました。

表示速度優先(β)

一部のjsやCSSファイル、フォントの読込等を強制停止して表示速度を優先します。

使用できなくなる機能や、使用状況によっては表示結果が変わるのでご了承下さい。

画像スライドショー設定 / 記事スライドショー設定 / スライドショー機能の全停止※ショートコードのスライドショー機能も使用できません / 全体フォント設定値をデフォルトに / 記事タイトル・見出し(h2~3)・ウィジェットタイトルフォントを「使用しない」に / PC閲覧時にサイドバーの最下部広告エリアをスクロール追尾しない / SNS設定でコピーを非表示 / カウントダウンを無効化(EX) / もっと読む(無限スクロール)を使用するを無効化(EX) / ランキングにオリジナルのCSSを使用しない有効化(AFFINGER/EX) / アニメーションCSSの無効化(font-awesome-animation)

ステ子
有効化した後に無効化した場合は、再度各箇所を再設定が必要です。
ENJI
ほとんどの機能が個別に停止することもできるのでマニュアルを参照して下さい

表示速度優先(β)について

※通常版にも反映しました

ご承諾事項

  • EXページ含め、マニュアルは一部未対応の箇所がございます。
  • 原則として追加機能の多くはAMPには対応しておりません
  • 各機能は変更及び停止、他バージョンへの反映する可能性もございます。ご了承下さい。

EX版販売のご案内はコチラ

EX購入ユーザー限定ページ

最新版アップデートの方法はコチラ

WING(AFFINGER5)を手に入れる

販売ページへ

追加アップデートのお知らせ

【不具合修正・機能追加】WING ver20190807βアップデートのお知らせ

先行配布中のEXver20190801βにてコメントが正常に投稿できない不具合がございました。 大変申し訳ございません。 こちらの修正と以下の機能追加を行いましたver20190807βを購入ユーザー ...

続きを見る

-お知らせ, バージョンアップ

Copyright© AFFINGER(WING) , 2019 All Rights Reserved Powered by AFFINGER5.