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

contents-9-3840x3840

人気です
キャンペーン

マテリアル デザイン
Material Icon
マテリアル カラー

スマホアプリでGoogleが推奨/主導するマテリアルデザインを推進

GoogleアイコンのMaterial Icons・Material Symbolsをセルフホストとして組み込み
マテリアル カラーを含む30以上カラーセットでハイセンスの着せ替えも

design_services

マテリアル デザインは
各種シャドウと
最適タップ ターゲット

Material立体感を演出する box-shadow・text-shadow・filterなどをTPOに応じて効果的に使用
外側の影で浮き上がり、内側の影で盛り上がり

リンクやボタンなどは「タップ ターゲット」、GoogleのPageSpeed Insights SEOでチェックして適切なサイズとスペースで

palette

 

サイドバー優先の選択はデスクトップファースト?

あらためて当テーマの、サイドバーの有り無し、1個で左か右か、2個で左右か右2つか左2つか、というレイアウトは、デスクトップファーストの「残り火」かなと…
ただし、モバイルファーストであっても、デスクトップ ネグレクトではダメですし、パソコンユーザーの比率が高いサイトもあります
ところで、サイドバー有りでは、スマホやタブレット縦では折りたたまれますので邪魔にならず、内部リンクがてんこ盛りとなって、SEO的にもおいしくなります

コンテンツ箇所を圧迫するサイドバー箇所

テーマ作成の過程で、サイドバー箇所を自由に、gridレイアウトで左や右や両方に配置できることができるようになって、あらためてサイドバー箇所はコンテンツ箇所の幅を削ってブラウザーに表示させることになると、再認識しています

Webページのレイアウトは、作成者のスキルや嗜好にもよりますが、サイドバー箇所の幅を先に決めて、コンテンツ箇所の幅を可変にする(伸縮させる)ことがほとんどで、サイドバーの幅の分だけコンテンツ箇所の幅が狭くなります
デスクトップのディスプレイのサイズは、ポピュラーなものは次のとおり

  1. 1024 x 768
  2. 1280 x 960
  3. 1440 x 900
  4. 1680 x 1050
  5. 1920 x 1080

全画面表示なら、ブラウザーの表示幅は上記のとおりになります
さらに、デスクトップの場合は、ブラウザーを全画面表示にしないこともあるので、ユーザーは任意の幅で閲覧している、ということです
これらのデスクトップ ブラウザーのウインドウ幅によって、コンテンツ箇所の幅も伸縮することになります
ということで、デスクトップのブラウザーのコンテンツ箇所内のアイテムでは、「サイドバー クエリ」「ウインドウ幅クエリ」が必要となりそうです

サイドバー2つの3カラムは地雷

ところで、1000px程度のウインドウ幅で、250pxのサイドバー2つの場合、コンテンツ箇所の幅は500px程度になるということです
さらに、サイドバー2つが300pxのときは、コンテンツ箇所は400pxくらいとなって、コンテンツ内の表示が大崩れすることもありです
コンテンツ箇所が狭くなる3カラムは、Webサイトの地雷になりかねないわけです
とはいうものの、GoogleやSNSサイトは、デスクトップ版では2カラムや3カラムばかりですね
デスクトップ ユーザーの訪問数がどれほどなのか、横幅1000px程度のブラウザーの使用数は多いのか、それら次第で2カラム3カラムも捨てがたいと言えそうです

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

複数デバイスのメディアクエリは、当テーマの場合、「600 900」となっています
デスクトップ内レスポンシブでは、「1024/1280/1366/1440/1536/1680/1920」となり
当テーマをベースに、上記のブラウザー幅で、「1カラム/2カラム/3カラム」を確認することになります
デバイス対象レスポンシブよりも、デスクトップ内レスポンシブのほうが、ディスプレイサイズとブラウザーで見るコンテンツ幅を検証すると、じつに差が大きいことになります
様々なレスポンシブ設定がありますが、レイアウトのカラム数(≒コンテンツ箇所の幅)に合わせるケースでは、デバイスのビューポートをベースとしたレスポンシブ設定は対応が難しくなります
デバイス対象レスポンシブの確認では、ブラウザーのデベロッパーツールに活躍してもらいますが、デスクトップ内レスポンシブの確認では、ブラウザー用の拡張機能やアドオンを導入するといいでしょう
「Window Resizer」が便利です


SEOテンプレート×WordPressテーマサプライズ!

SEOテンプレート×WordPressテーマ 販売サイト

SEOテンプレート×WordPressテーマ 販売サイト

販売サイトは、クレジットカード購入がメインの対応です(Amazon、Microsoftなども採用しているStripeを採用)

Stripeのクレジットカード決済はJCB・VIZA・mastercard・AMEXなど 銀行振込も

銀行振込も加わりました(安全性・信頼性のため Stripe の口座を利用しています)
オンラインからでもATMからでも振り込むとすぐに、マイページでダウンロードできるようになります
また「認証キー」は購入履歴でご確認できます

アバター

author-primary による

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