IMUZA.com

Xserver << WordPress(ConoHa) << はてなブログ

WordPress：コンテンツ幅で決めるメディアクエリのブレイクポイント

unsplash-logoFrankie

WordPress：コンテンツ幅で決めるメディアクエリのブレイクポイント

2022.12.04 Wordpress, テーマ

テーマをゼロから作ってみる（7）です。忙しくてなかなか進みません（笑）。

現在運用しているサイト、このサイトもそうなんですが、Genesis Framework を使っています。それをゼロから自作してみようということです。最初に手をつけているのは次のサイトです。

01レスポンシブデザイン

今回、7回目の記事になるのですが、これまでの経緯の一覧は次のリンクで見られます。

また、作成中のテーマを適用させたサイトを次のサブドメインで立ち上げました。noindex にしてありますが、運用中のサイトと記事が重なるのはまずいですので、データは「テーマユニットテストデータ日本語版」を使っています。また、CSS は基本構造とある程度の視覚的要素のみにしか設定していません。

  • ゼロから作るWordPressテーマ（現在停止中）

現在の段階は、フロントページ、個別記事ページ、カテゴリーページ、記事一覧ページの骨格ができたところです。今回は基本的なデザインについてです。

当然レスポンシブデザインで作るわけですが、重要なのはブレイクポイントをどこに置くかですので、まずはその整理からです。

02ブレイクポイントをコンテンツ幅で決める

私は次のような考え方でブレイクポイントを決めています。

ブログサイトの場合ですが、ブログはテキストコンテンツを読んでもらうことが目的ですので、読みやすいテキストコンテンツ幅を決めてそれを基本に考えていきます。

個別記事ページ

まず、個別記事ページです。モバイルファーストです。テキストコンテンツ幅を「メイン（コンテンツ）幅」、そしてメイン幅と「サイドバー幅」を含めたものを「コンテンツ幅」と表記しています。

  • デバイス幅とコンテンツ幅のマージンを左右最低各 4％ とする
  • メイン幅を最大 650px とする
  • サイドバー幅を 300px 固定とする
  • メインとサイドバーのギャップを 50px とする
  • コンテンツ幅が 1000px かつデバイスとのマージンが左右各 4% 確保できるまでは 1カラムとする
  • (650 + 50 + 300)px / (100 – 4 – 4)% ≒ 1087px となり、1087px 以上のコンテンツ幅が確保されれば 2カラムとする

これだけです。

フロントページ、カテゴリーページ

フロントページには、最新記事、おすすめ記事、よく読まれている記事の抜粋をそれぞれ数記事から10記事程度表示しますのでサイドバーは表示しません。というよりも、この3つを表示すれば他にサイドバーで表示するものがありません。カテゴリーはメニューで表示します。

ただし、メインコンテンツ内の表示ではメディアクエリを使用します。現在作成中のテーマは映画のレビューサイト用ですので画像がほぼタイトルのような意味合いを持ちます。ですので、フロントページのメインコンテンツ内は次のようになります。カテゴリーページ、記事一覧ページもそれに準じます。

  • 各記事アイテム幅を 300px 固定とする
  • コンテンツ幅に 650px 確保できるまでは 1カラムとする
  • コンテンツ幅に 650px 確保できれば 2カラムとし、ギャップは 50px とする
    650px / 92% ≒ 707px
  • コンテンツ幅に 1000px 確保できれば 3カラムとし、ギャップは 50px とする

ということになり、メディアクエリは次のようになります。

（Android 上の Chrome 限定の注意）
コードブロックをタップしますと数秒固まる場合があります。スクロール等他の操作に支障はありません。Chrome のバグとの報告が上がっています。詳細は「AndroidのChromeだけ固まる（止まる）ってどういうこと？！」をご覧ください。

@media (min-width: 707px) { ... }
@media (min-width: 1087px) { ... }

03html, CSS の基本構造

このメディアクエリを適用する html と css の基本構造は次のようになります。

個別記事ページ

<body class="single-page">
<div id="pagetop" class="site-container">
	<header class="site-header">
	</header>
	<nav class="primary-nav">
	</nav>
	<div class="featured-image-wrap">
	</div>
	<div class="main-sidebar-wrap">
		<main class="main-container">
			<article class="entry">
			</article>
		</main>
		<aside class="sidebar-container">
		</aside>
	</div>
	<div class="footer-widget-area">
	</div>
	<footer class="site-footer">
	</footer>
	<nav class="secondary-nav">
	</nav>
</div>
</body>
.main-sidebar-wrap {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}

@media (min-width: 1087px) {
  .main-sidebar-wrap {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 650px 300px;
    column-gap: 50px;
  }
}

フロントページ

<body class="front-page">
<div id="pagetop" class="site-container">
	<header class="site-header">
	</header>
	<nav class="primary-nav">
	</nav>
	<div class="main-sidebar-wrap">
		<main class="main-container">
			<div class="main-visual">
			</div>
			<section id="latest-articles" class="front-page-articles">
				<h2 class="section-title">最新映画レビュー</h2>
				<article class="entry">
				</article>

				<!-- <article></article> を繰り返す -->

			</section>
       			<section id="recommend-articles" class="front-page-articles">
       				<h2 class="section-title">おすすめ映画</h2>
				<article class="entry">
				</article>

				<!-- <article></article> を繰り返す -->

			</section>
   		</main>
	</div>
	<div class="footer-widget-area">
	</div>
	<footer class="site-footer">
	</footer>
	<nav class="secondary-nav">
	</nav>
</div>
</body>
.main-sidebar-wrap {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
}

@media (min-width: 707px) {
  .front-page-articles, .category-page-articles {
    display: grid;
    grid-template-columns: 300px 300px;
    grid-auto-rows: min-content;
    column-gap: 50px;
  }
  .category-title, .section-title, .see-more, .pagination {
    grid-column: 1/3;
  }
}

@media (min-width: 1087px) {
  .main-sidebar-wrap {
    max-width: 1000px;
  }
  .front-page-articles, .category-page-articles {
    grid-template-columns: repeat(3, 300px);
  }
  .category-title, .section-title, .see-more, .pagination {
    grid-column: 1/4;
  }
}

CSS はアーカイブページ共有です。

アーカイブページ

<body class="archive-page">
<div id="pagetop" class="site-container">
	<header class="site-header">
	</header>
	<nav class="primary-nav">
	</nav>
	<div class="main-sidebar-wrap">
		<main class="main-container category-page-articles">
			<article class="entry">
			</article>

			<!-- <article></article> を繰り返す -->

		</main>
	</div>
	<div class="footer-widget-area">
	</div>
	<footer class="site-footer">
	</footer>
	<nav class="secondary-nav">
	</nav>
</div>
</body>

04ページにより読み込む CSS を変える

この HTML でいけば、個別記事ページを除くその他のページの CSS はほぼ共通できます。ですので、ページによって読み込む CSS を変えればファイル容量も下げられ（大したことはないけど…）、混乱も避けられます。

functions.php でページにより読み込む CSS を変えます。

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );
function theme_name_scripts() {
    if ( is_single() ) {
        wp_enqueue_style( 'style-single', get_template_directory_uri() . '/style-single.css' );
    }else{
	wp_enqueue_style( 'style-all', get_stylesheet_uri() );
    }
}

次は SEO 関連の自作に入ります。

イチゴ 苺 いちご 練乳 ショートケーキ ケーキ デザート ギフト スイーツ プレゼント 【お届け日指定可（最短当日出荷・13時締切）】

イチゴ 苺 いちご 練乳 ショートケーキ ケーキ デザート ギフト スイーツ プレゼント 【お届け日指定可（最短当日出荷・13時締切）】

Amazon

#CSS, #WordPress

Twitter
Facebook
ブックマーク
LINEで送る