ワードプレスの人気テーマで、無料でシンプル、見やすくカスタマイズも簡単に沢山できる、となると「Simplicity」でしょう。
私もとても気に入っていていくつかのブログで使ってますが、それでもiPadの横向きで表示するとモバイル表示（縦1列の表示）になるんですね。
うーん、普通にPCで見えるような2列の表示がしたいんですけど．．．
このSimplicityというテーマの作りから「iPadの横表示でも一列の表示になる」（モバイル表示になる）ようになっています。
ということから今回は、私と同じように（笑）「iPadでも横表示ではPCと同じように表示したい！」という場合のカスタマイズの仕方などを見てみましょう。
Simplicityを構成しているファイル（responsive-pc.css）を編集する基本の方法と、あまりカスタマイズしてない場合にはこれで大丈夫かな、といったザックリ実現の２点のご紹介です。
今回の目標
では今回のSimplicityのカスタマイズでは、以下を実現します。
- （変更前）オリジナルのSimplicityの表示
- １）横1111ポイント以上はPC表示
- ２）横1110ポイント以下はモバイル表示（縦1列に表示される）
iPadの縦横のポイントは 764（縦）x 1024（横）となっていることから、
- （変更後）カスタマイズ後の表示
- １）横1024ポイント以上はPC表示
- ２）横1023ポイント以下はモバイル表示（縦1列に表示される）
オリジナルから変更となる「横1110ポイントから今回の1024ポイントの間」は、サイトの横幅は1024ポイントに固定とするようにカスタマイズします。
ポイントを簡単にまとめれば、
- １）横1111 → 横1024に変更（PC表示）
- ２）横1110 → 横1023に変更（モバイル表示）
- ３）横1024～横1110 → サイトの横幅1024ポイントに固定
となります。
基本に忠実、レスポンシブのCSSファイルを編集する
まずは基本に忠実に、SimplicityのCSSファイルを編集する方法です。
iPadで表示すると、iPadの横表示でもSimplicityが縦一列になって表示されるのは、以下のファイルで指定されています。
- responsive-pc.css
この「responsive-pc.css」は「Simplicity」フォルダーの下の「CSS」フォルダー内にあります。
simplicity/css/responsive-pc.css
※）元のファイルはどこかにコピーを保存して、何かあったら直ぐ元に戻せるようにしておいてくださいね。
responsive-pc.cssの編集
「responsive-pc.css」では以下の記述を変更します。
１）横1111 → 横1024に変更（PC表示）（4行目あたり）
|
1 2 3 4 |
/************************************ ** PC用のレスポンシブデザインスタイル読込 ************************************/ @media screen and (max-width:1110px){ ← この1110の数値を1023に変更 |
↓↓↓↓↓↓（変更後）
|
1 2 3 4 |
/************************************ ** PC用のレスポンシブデザインスタイル読込 ************************************/ @media screen and (max-width:1023px){ |
２）横1110 → 横1023に変更（111行目あたり）
|
1 2 3 |
/* 画面幅が1111px以上の時 */ @media screen and (min-width:1111px){ ← この1111の数値を1024に変更 /*#navi ul{display:block}*/ |
↓↓↓↓↓↓（変更後）
|
1 2 3 |
/* 画面幅が1111px以上の時 */ @media screen and (min-width:1024px){ /*#navi ul{display:block}*/ |
３）横1024～横1110 → サイトの横幅1024ポイントに固定（最後に追加）
一番最後に以下を新たに追記します。
|
1 2 3 4 5 6 7 8 |
@media screen and (min-width: 1024px) and (max-width: 1110px){ div#header-in, div#navi-in, div#body-in, div#footer-in { width: 1024px; } #main { width: 690px; } } |
※）右横にサイドのメニューを表示するため、記事の横幅を少し狭めてPC表示にしてます
以上で「responsive-pc.css」の編集は終わりです。
iPadで表示を確認してみてくださいね。
CSS設定用のプラグインでPC表示する方法
そもそもオリジナルのテーマからカスタマイズしてないし、ファイルのアップロードは良くわからないし、となればCSSで修正です。
以下をCSSに設定すれば、とりあえず、という形でiPadの横表示でPCと同じように表示されます。
ただ、暫定的なものなので、表示がどうもうまくいかない、となれば、上で見た「responsive-pc.cssの編集」を試してみてくださいね。
CSSを追加設定できるプラグインをインストールして、そこに以下をベタッと貼ってみてください。
（CSSのプラグインは以下の記事を見てみてください。
WordPressのCSSカスタマイズ！読み込み用プラグインとCSS反映の具体例！）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
/* ---------------------------------------------------- iPad横表示をPC表示にざっくり対応 ----------------------------------------------------*/ @media screen and (min-width: 1024px) and (max-width: 1110px){ div#header-in, div#navi-in, div#body-in, div#footer-in { width: 1024px; } #main { width: 690px; } div#sidebar { clear: none; float: right; padding: 5px 8px; width: 300px; } #navi ul { display: block; } #navi ul li { float: left; display: inherit; height: inherit; } #mobile-menu { display: none; } #header .alignright { display: block; } } @media screen and (max-width: 1023px){ div#header-in, div#navi-in, div#body-in, div#footer-in { width: 740px; } div#sidebar { clear: both; float: none; padding: 15px; width: auto; position: static !important; } #navi ul { display: none; border: 0; } #navi ul li { float: none; display: block; height: auto; } #mobile-menu { display: block; position: relative; } #header .alignright { display: none; } } |
今回のまとめ
- iPadの横表示でPC表示をするには「responsive-pc.css」を編集
- ファイルの場所は、simplicity/css/responsive-pc.css
- 編集ポイントは以下４点
- 横1111 → 横1024に変更（PC表示）（4行目あたり）
- 横1110 → 横1023に変更（111行目あたり）
- 横1024～横1110 → サイトの横幅1024ポイントに固定（最後に追加）
- 編集をする前に、ファイルのバックアップは必ずとっておく
どの横幅からモバイル表示にするか、というのは好みの分かれるところです。
それでもiPadの横表示でSimplicityを見てみると、両側に結構隙間ができるため「むむー、これはPCみたいにサイドバーも表示させたい！」という気持ちがムクムク沸き起こってくるんですね（笑）
そんなあなたのために、この記事がお役に立てれば幸いです。
またネットで収益を図りたいぞ！という場合には、是非以下のメルマガにも登録してみてくださいね。
