タグ：WordPress

【モバイルファースト】【HTML Living Standard ＆ CSS3適応】【疑似スマートフォンアプリ】【WebP採用】【JSON-LD導入】【4K-DPR3-レスポンシブ対策】【マテリアルデザイン / マテリアル アイコン / マテリアルカラー】【gridレイアウト・flexboxコンテンツ】

Google Material Symbols and Icons GoogleアイコンのMaterial Symbolsは３種類(Outlined、Rounded、Sharp) それぞれ可変フォントと静的フォントがあり、静的フォントには塗りつぶしなしでfillも効かない。塗りつぶし(FILL)ありMaterial Symbolsを利用する裏技を紹介。まあ軽く速い可変フォントFILL(塗りつぶし)版かつ太字細字ありのGoogleホストの外部参照CSS セルフホスティング(セルフ-ホスト self-host)のアイコンフォントファイル入手法とWebサイトの設定

Google Material Symbols and Icons GoogleアイコンのMaterial Symbolsは３種類(Outlined、Rounded、Sharp) それぞれ可変フォント(variable)と静的フォント(static)があり、このページではMaterial Symbolsの静的アイコン、そのGoogleホストの外部参照CSS セルフホスティング(セルフ-ホスト self-host)のアイコンフォントファイル入手法とWebサイトの設定

Google Material Icons Googleアイコン活用最低限 Googleホストの外部参照CSS セルフホスティング(セルフ-ホスト self-host)のアイコンフォントファイル入手法とWebサイトの設定

画像レスポンシブイメージのHTMLコード 960w, 640w, 480w, 320w srcset(ソースセット)画像幅記述子(w)。その対象は、ビューポートかボックスサイズか ブラウザーで違いはあるか モバイルデバイスではどうなるのか

人気でクールなスマホアプリのスタイル/レイアウト/デザインを再現 画像が縦横にびっしり並ぶInstagram型、画像がびっしりに短メッセージ上乗せのメルカリ型、画像と下にメッセージのZOZOTOWN型、画像と右にメッセージのYahooニュース型(不動産紹介型)

【マテリアルカラー】シンプル(simple)・レッドガウン(red-gown)・オータムリーブズ(autumn-leaves)・フルーツ(fruit)・スペース(space)・グリーンケア(green-care)・シアンシェード(cyan-shades)・シアンモーニング(cyan-morning)・サイバーネオン(cyber-neon)・マスタード(mustard)・クリムゾングローリー(crimson-glory)・バナナ(banana)・ホワイトフォグ(white-fog)・グレーゴースト(gray-ghost)・オレンジチューリップ(orange-tulips)・パープルロイヤル(purple-loyal)・ダークオータム(dark-autumn)

【１カラム】【２カラム】左サイドバー・右サイドバー・左”上下”サイドバー・右”上下”サイドバー【３カラム】左右サイドバー・サイドバー右２・サイドバー左２・左シェアボタンバー/右サイドバー１・右シェアボタンバー/左サイドバー１・左シェアボタンバー/右”上下”サイドバー・右シェアボタンバー/左”上下”サイドバー

スマートフォンアプリのようなクールなビジュアルのアーカイブトップは、６タイプ　Yahooニュース/不動産紹介型、ZOZOTOWN型、メルカリ型、Instagram型に、スタンダード標準型、そしてtheブログのレガシー型