採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

レスポンシブのブレイクポイントを調整する

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

レスポンシブデザインのブレークポイントを調整することはできますか?

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


編集するファイル:functions/head.php
編集する箇所:

<link rel="stylesheet" media="screen and (max-width:●●●px)" href="<?php echo get_template_directory_uri(); ?>/responsive.css?ver=<?php echo version_num(); ?>">

※max-widthの値「●●●px」を調整ください。

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

function mediaQueryClass(width) {

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

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

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

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

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

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事