コンテンツ4 サムネイル 16×9

contents-4-3840x3840

キャンペーン

gradation-heading

heapup-heading

ボックスの外で使う見出しデザインのスタンダードは、gradation-headingとheapup-heading

左はgradation-headingのg4、右はheapup-headingのg4とhorizontal

desktop_windowsfit_screenデスクトップ内レスポンシブ dtrwd

h2をdiv(gradation-heading/heapup-heading)で囲み、さらにclassにchange-size-dtrwdを適宜追記
change-size-dtrwdはデバイス別ではなく、デスクトップ内だけでレスポンシブ適用させる工夫(dtrwdは、デスクトップ レスポンシブWebデザインの意味)

新テーマではビジュアルSEO?として、見出しデザインに工夫を凝らしている
flexboxをふくむボックス内ではレスポンシブのCSS手当ては完了済み
ボックス外でデザインされた見出しを使う場合は、CSSを事前に設定するにも、親要素がcontentsやsectionなどで、ボックス内の見出しデザインにまで影響をおよぼすので却下

そこで、デスクトップのブラウザーの横幅がユーザーやディスプレイによって様々
かつ1カラム、2カラム、3カラムなどでコンテンツ箇所の幅も変動
それを反映した幅サイズをデスクトップのブラウザーを対象にレスポンシブに変更
つまり、ボックス外のデザインされた見出し、gradation-heading、heapup-heading、mesh-headingを使う場合は、change-size-dtrwdをクラスに追記して不細工を回避

 

アバター

author-primary による

Algorism Inc. 株式会社アルゴリズム 代表取締役。SEO塾運営。このサイトは2023年新発売のWordPressテーマのショーケース