WordPressテーマTCDのカスタマイズを研究するサイト

TCDテーマNEXTAGEのモバイルサイトのブレークポイントを調整する

Q.PC用レイアウトとモバイル用レイアウトのブレークポイントを調整したい

640px付近にレスポンシブデザインのブレークポイントがあることがわかりましたが、この値を調整することはできますか?

A.下記ファイルの該当箇所を編集します


編集するファイル:header.php
編集する箇所:

<link rel="stylesheet" media="screen and (min-width:641px)" href="<?php bloginfo('template_url'); ?>/style_pc.css<?php version_num(); ?>" type="text/css" />
<link rel="stylesheet" media="screen and (max-width:640px)" href="<?php bloginfo('template_url'); ?>/style_sp.css<?php version_num(); ?>" type="text/css" />

    ↓

<link rel="stylesheet" media="screen and (min-width:●●●px)" href="<?php bloginfo('template_url'); ?>/style_pc.css<?php version_num(); ?>" type="text/css" />
<link rel="stylesheet" media="screen and (max-width:○○○px)" href="<?php bloginfo('template_url'); ?>/style_sp.css<?php version_num(); ?>" type="text/css" />

※min-widthの値(●●●px)がmax-width(○○○px)の値より1px大きくなるように調整ください。

編集するファイル:js/jscript.js
編集する箇所:

function mediaQueryClass(width) {
 if (width > 641) { //PC

    ↓

function mediaQueryClass(width) {
 if (width > ●●●) { //PC

※数値は①のmin-widthで設定した値と一致するようにしてください。

尚、jsファイルはワードプレス管理画面からは直接編集することができませんので、ご利用中のサーバ会社のコントロールパネルから操作していただくか、FTPソフトを使用し、指定ファイルをダウンロードし、編集後アップロードしていただく形になります。

ファイルの格納場所は通常以下にございます。
wp-content>themes>テーマフォルダ>js
・jscript.js

また、スマホやタブレットはキャッシュが残りやすい傾向にありますので必ず確認前にキャッシュを手動で削除してから確認して頂くようお願い申し上げます。

The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。