この記事をシェアする

WordPressサイトをスマホ対応させる方法

プラグインを使った方法

Multi Device Switcherというプラグインをまずはインストールする。

インストールして有効化すると『外観』⇒『マルチデバイス』をクリックする。

 

 

 

 

 

 

マルチデバイス画面を開くとスマートフォン用テーマにkeitaiと選択できる。

これは、twenty seventeenファルダごとコピーして携帯用として保存しているフォルダを示している。

 

 

 

 

 

 

携帯用ファルダに存在しているスタイルシートのTheme Nameをtwenty seventeenからkeitaiと変更することでマルチデバイス画面のテーマを選択する欄にkeitaiを選ぶことが可能になる。

/*
Theme Name: keitai ←keitaiに変更
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

 

 

 

上記のように選択可能となっている。

 

 

 

 

PC Switcher を追加とデフォルトCSSを追加にチェックしておくとスマホでは以下のように表示される。

 

 

 

 

 

 

 

PCではテーマ『twenty seventeen』を使用し、スマホでは『keitai』を使用することでPCとスマホでテーマを使い分けることができる。

まとめ

PCとスマホのテーマを使い分けるなら、プラグイン『Multi Device Switcher』を使うと簡単にできる。

この記事をシェアする
フォローする

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です