【超アップデートのお知らせ】NEW FACE、AFFINGERブロックプラグイン配布、無限ループ（EX）など ～ WING ver20190801β

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

 

WING ver20190801βの機能追加内容

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

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

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

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

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

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

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

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

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

詳しい説明はコチラ

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

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

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

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

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

添え字付ヘッダー用メニュー（横列）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

耳折れデザインの追加

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

リストデザインの追加

ドット下線

マル（リスト）

マル（リスト）+ドット下線

簡易チェック

簡易チェック+ドット下線

ナンバリング四角

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

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

詳しい使い方はコチラ

ボックスデザイン追加

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

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

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

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

オリジナルpreデザイン

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

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

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

 command
$ pwd

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

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

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

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

詳しい使い方はコチラ

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

背景画像設定可能に

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

上部固定設定を追加

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

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

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

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

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

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

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

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

オリジナル指定も簡単に

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

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

Googleマテリアルアイコン

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

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

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

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

Gutenberg対応（β）

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

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

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

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

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

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

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

Gutenberg（β対応）について

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

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

AFFINGERブロックプラグインの使い方、注意事項はコチラ

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

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

その他OTHER

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

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

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

フォント設定について

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

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

h4及びh5見出しタグ設定

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【その他の変更】

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

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

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

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

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

見せたくない「更新日」

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

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

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

カスタムHTML（広告用）ウィジェット

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

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

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

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

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

コメントを大幅強化

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

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

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

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

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

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

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

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

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

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

コード設定も簡単

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

表示速度優先（β）

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

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

表示速度優先（β）について

ご承諾事項

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