ワードプレスの人気テーマで、無料でシンプル、見やすくカスタマイズも簡単に沢山できる、となると「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行目あたり）
/************************************
** PC用のレスポンシブデザインスタイル読込
************************************/
@media screen and (max-width:1110px){ ← この1110の数値を1023に変更
↓↓↓↓↓↓（変更後）
/************************************
** PC用のレスポンシブデザインスタイル読込
************************************/
@media screen and (max-width:1023px){
２）横1110 → 横1023に変更（111行目あたり）
/* 画面幅が1111px以上の時 */
@media screen and (min-width:1111px){ ← この1111の数値を1024に変更
/*#navi ul{display:block}*/
↓↓↓↓↓↓（変更後）
/* 画面幅が1111px以上の時 */
@media screen and (min-width:1024px){
/*#navi ul{display:block}*/
３）横1024～横1110 → サイトの横幅1024ポイントに固定（最後に追加）
一番最後に以下を新たに追記します。
@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反映の具体例！）
/* ----------------------------------------------------
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みたいにサイドバーも表示させたい！」という気持ちがムクムク沸き起こってくるんですね（笑）
そんなあなたのために、この記事がお役に立てれば幸いです。
またネットで収益を図りたいぞ！という場合には、是非以下のメルマガにも登録してみてくださいね。
コメント