アーカイブトップは人気スマホアプリのビジュアル仕様で６タイプ SEOテンプレート×WordPressテーマ 新発売
アーカイブトップスタイルデザイン一覧
人気スマートフォンアプリのようなクールなビジュアルのアーカイブトップは、６タイプ
Yahooニュース/不動産紹介型、ZOZOTOWN型、メルカリ型、Instagram型に、スタンダード標準型、そしてtheブログのレガシー型
下記コンテンツは、スマートフォン縦画面・横画面、タブレット縦画面では横スクロール、デスクトップではオール表示
また下記画像/サムネイルは、個別投稿のサムネイル（アイキャッチ）
スマホアプリ風スタイル
- Yahooニュース/不動産紹介型
- 画像左/タイトル右
- ZOZOTOWN型
- 画像上/タイトルなどテキスト下
- メルカリ型
- 画像に単テキスト上乗せ
- Instagram型
- 画像のみ
ブログ風スタイル
- スタンダード型
- 画像上
- タイトル
- moreボタン
- レガシー型
- タイトル上
- 画像左・抜粋右
- moreボタン
スタンダード
標準スタイル
Yahooニュース型
スタイル
ZOZOTOWN型
スタイル
メルカリ型
スタイル
Instagram型
スタイル
レガシー theブログ
スタイル
アーカイブトップ６スタイルデザイン紹介
WordPressのアーカイブには、カテゴリー、タグ、また日付、さらに検索結果などがある
アーカイブは、テーマによって個別投稿の記事のタイトルや抜粋/説明、サムネイルなどが表示される
新発売の当テーマでは、そのサムネイルを大活用している
アーカイブトップは、6つのスタイルでビジュアルをテーマ設定からプルダウンメニューで変更できる
スタンダード
標準スタイル
スタンダード型は上図のように
- サムネイル画像が上
- タイトル(デフォルトで抜粋/説明なし)
- moreボタン
そのようなビジュアル仕様
デフォルトは、スマートフォン２カラム タブレット3 デスクトップ４カラム
デバイス別のカラム数は変更可能
Yahooニュース型
スタイル
Yahooニュース型は上図のように
- サムネイル画像が左
- タイトルが右
そのようなビジュアル仕様
デフォルトは、スマートフォン１カラム タブレット２カラム デスクトップ３カラム
デバイス別のカラム数は変更可能
ZOZOTOWN型
スタイル
ZOZOTOWN型は上図のように
- サムネイル画像が上
- タイトルなどテキストが下
そのようなビジュアル仕様
デフォルトは、スマートフォン２カラム タブレット3 デスクトップ４カラム
デバイス別のカラム数は変更可能
メルカリ型
スタイル
メルカリ型は上図のように
- サムネイル画像が全面に
- 専用カスタムフィールドの短テキストが左上・右上・左下・右下に上乗せ
そのようなビジュアル仕様
デフォルトは、スマートフォン３カラム タブレット４カラム デスクトップ５カラム
デバイス別のカラム数は変更可能
Instagram型
スタイル
Instagram型は上図のように
- サムネイル画像が全面に
- 他のテキストは表示なし
そのようなビジュアル仕様
デフォルトは、スマートフォン３カラム タブレット４カラム デスクトップ６カラム
デバイス別のカラム数は変更可能
レガシー theブログ
スタイル
レガシー型は上図のように
- タイトルが上
- サムネイル画像は左
- moreボタンなど、他は右や下に
そのようなビジュアル仕様
デフォルトは、スマートフォン１カラム タブレット１カラム デスクトップ１カラム
デバイス別のカラム数は変更可能
アーカイブトップ６スタイルの変更(着せ替え)
アーカイブトップは6種類の「フィード表示」
アーカイブトップの6つのスタイルはいわゆる「フィード表示」
テーマカスタマイズの「グローバル設定」でサイト一括の変更
そのほか、カテゴリー一括およびカテゴリー個別に、タグ一括およびタグごとに、設定が可能
サイト一括の設定は、日付(日時・月次・年次)、さらに検索結果などで有効に
フィードだからAdSenseインフィード広告や自作広告も
スタイルは「フィード表示」なので、たAdSenseのインフィード広告を表示できる
しかも6つのスタイルに合わせたインフィード広告も設定次第
AdSenseインフィード広告だけではなく、自作広告も設定可能でECサイトとしてはクールなWebになる
モダンWeb！ WP最新テーマ
レガシーWeb？ 掃討作戦！！
【モダンWebとは】
モバイルファースト・最新HTML/CSS3・スマホアプリ・WebP・JSON-LD・4K(Retina)・マテリアルデザイン・grid/flexbox
【レガシーWebとは】
table、float、position(relative / absolute)による位置決めが特徴
モバイルファースト
モバイルファーストの対象は、Googleのインデックスなのか、スマートフォンデバイスなのか、スマートフォンユーザーなのか
スマートフォンアプリ ビジュアル再現
ZOZOTOWN型スタイル、メルカリ型スタイル、Instagram型スタイル、およびYahooニュース/不動産紹介スタイル
4K / DPR:3 レスポンシブ イメージ
同一サイズの同一画像ファイルをCSSで伸縮させるのが、レスポンシブWebデザイン(レガシーレスポンシブ)
複数サイズの複数画像ファイルをビューポート(もしくはボックスサイズ)のDPRに合わせて最適な画像ファイルを、ブラウザーが選択表示するのがレスポンシブイメージ(モダンレスポンシブ)
モダンWebで
ビジュアルSEO
