複数ユーザー登録タイプポータルサイト向けその他WordPressテーマフォームプログラムフリープログラム「スマホレイアウト」を、ボタンクリックで「パソコンレイアウト」にチェンジレスポンシブWEBデザインとは、スマートフォンやパソコンなどの各端末に合わせてレイアウトをcssで変更するものですが、スマホからあえてPC画面を見たい人もいると思います。今回はクリタス様制作のjavascriptを使って、ウィンドウ幅800px以下の端末を対象にPC画面に変更できるボタンを設置してみましょう。動作環境について※古いスマホ機種など、一部の端末ではボタンを押してもレイアウトが変更しない場合があります。フリープログラムにつき全ての端末での動作保証はできませんので、予めご了承下さい。スクリプト利用規約【※必ずお守り下さい】レイアウト変更スクリプトのjavascript(viewport.js)はクリタス様に所有権があります。許可なく改造・再配布する事を禁止します。Party)のテンプレート「以外」に使う場合は必ず必ずこちらをお読みください。使い方viewport.jsのダウンロードこちらよりダウンロードして、お手元のテンプレートのjsフォルダに移動して下さい。画面切り替え用のボタンとスクリプトの読み込みタグを追加します。貼り付け場所は邪魔にならない一番最後あたりでいいでしょう。↓以下のタグをコピペして下さい。src="js/viewport.js"></script>cssを追加cssフォルダのstyle.cssのパソコン用の設定内に以下を追加します。設定内容は好きに変更してもらって構いません。スマートフォンなどの実際の対象端末からプレビュー確認してみて下さい。(※PCでウィンドウ幅を狭くしても動作確認できないのでご注意下さい。)画面の一番下に以下のようなリンクテキストが出ていると思いますのでクリックして動作確認して下さい。※冒頭にも記載していますが、古いスマホ機種など、一部の端末ではボタンを押してもレイアウトが変更しない場合があります。フリープログラムにつき全ての端末での動作保証はできませんので、予めご了承下さい。800という文字列があるのでここの数値を変更して下さい。上記の場合、801px以上のスクリーンサイズである場合にボタンを表示しないという意味になります。レスポンシブテンプレートで使っている開閉ブロック(openclose.js)はスクリーンサイズでなくウィンドウ判定になっていますのでここを合わせても条件が異なって動作する場合があります。iPhoneやiPadの場合、横に倒して見た場合も「縦画面」で見た場合のスクリーン幅の判定となります。縦横画面を切り替えた場合のjavascript判定はブラウザの「再読み込み時点」となります。cssのようにリアルタイムではないのでご注意下さい。通常のhtmlとcssファイルで構成された無料のホームページテンプレートです。システム開発業者様にCMSを開発依頼。弊社の無料テンプレートをセットしました。外したい方マニュアルよく頂く質問サポート掲示板お問合せ返信メールが届かない方へ。