インターネットビジネスで自由に生きる!早期退職して海外移住したJINのブログ

Simplicityのカスタマイズ!iPadでもPC表示のようにサイドメニューを横に配置したい!

  2016/07/14   あとで読む

約 3 分で読めます

2016-06-23_193918

ワードプレスの人気テーマで、無料でシンプル、見やすくカスタマイズも簡単に沢山できる、となると「Simplicity」でしょう。

私もとても気に入っていていくつかのブログで使ってますが、それでもiPadの横向きで表示するとモバイル表示(縦1列の表示)になるんですね。

うーん、普通にPCで見えるような2列の表示がしたいんですけど...

このSimplicityというテーマの作りから「iPadの横表示でも一列の表示になる」(モバイル表示になる)ようになっています。

ということから今回は、私と同じように(笑)「iPadでも横表示ではPCと同じように表示したい!」という場合のカスタマイズの仕方などを見てみましょう。

Simplicityを構成しているファイル(responsive-pc.css)を編集する基本の方法と、あまりカスタマイズしてない場合にはこれで大丈夫かな、といったザックリ実現の2点のご紹介です。

今回の目標

では今回のSimplicityのカスタマイズでは、以下を実現します。

  • (変更前)オリジナルのSimplicityの表示
    • 1)横1111ポイント以上はPC表示
    • 2)横1110ポイント以下はモバイル表示(縦1列に表示される)

iPadの縦横のポイントは 764(縦)x 1024(横)となっていることから、

  • (変更後)カスタマイズ後の表示
    • 1)横1024ポイント以上はPC表示
    • 2)横1023ポイント以下はモバイル表示(縦1列に表示される)

オリジナルから変更となる「横1110ポイントから今回の1024ポイントの間」は、サイトの横幅は1024ポイントに固定とするようにカスタマイズします。

ポイントを簡単にまとめれば、

  • 1)横1111 → 横1024に変更(PC表示)
  • 2)横1110 → 横1023に変更(モバイル表示)
  • 3)横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」では以下の記述を変更します。

1)横1111 → 横1024に変更(PC表示)(4行目あたり)

↓↓↓↓↓↓(変更後)

2)横1110 → 横1023に変更(111行目あたり)

↓↓↓↓↓↓(変更後)

3)横1024~横1110 → サイトの横幅1024ポイントに固定(最後に追加)

一番最後に以下を新たに追記します。

※)右横にサイドのメニューを表示するため、記事の横幅を少し狭めてPC表示にしてます

以上で「responsive-pc.css」の編集は終わりです。
iPadで表示を確認してみてくださいね。

CSS設定用のプラグインでPC表示する方法

そもそもオリジナルのテーマからカスタマイズしてないし、ファイルのアップロードは良くわからないし、となればCSSで修正です。

以下をCSSに設定すれば、とりあえず、という形でiPadの横表示でPCと同じように表示されます。

ただ、暫定的なものなので、表示がどうもうまくいかない、となれば、上で見た「responsive-pc.cssの編集」を試してみてくださいね。

CSSを追加設定できるプラグインをインストールして、そこに以下をベタッと貼ってみてください。

(CSSのプラグインは以下の記事を見てみてください。
 WordPressのCSSカスタマイズ!読み込み用プラグインとCSS反映の具体例!

今回のまとめ

  • iPadの横表示でPC表示をするには「responsive-pc.css」を編集
  • ファイルの場所は、simplicity/css/responsive-pc.css
  • 編集ポイントは以下4点
    • 横1111 → 横1024に変更(PC表示)(4行目あたり)
    • 横1110 → 横1023に変更(111行目あたり)
    • 横1024~横1110 → サイトの横幅1024ポイントに固定(最後に追加)
    • 編集をする前に、ファイルのバックアップは必ずとっておく

どの横幅からモバイル表示にするか、というのは好みの分かれるところです。

それでもiPadの横表示でSimplicityを見てみると、両側に結構隙間ができるため「むむー、これはPCみたいにサイドバーも表示させたい!」という気持ちがムクムク沸き起こってくるんですね(笑)

そんなあなたのために、この記事がお役に立てれば幸いです。

またネットで収益を図りたいぞ!という場合には、是非以下のメルマガにも登録してみてくださいね。

早期退職して海外で奮闘する JIN のメールマガジン

時間や場所に縛られず稼いだJINが教える

~ 最短最速で月収10万円を手に入れる方法 ~

苗字(必須)

隣のあの人にも、思わず教えたくなる秘密

配信停止は、いつでもできます

お預かりした情報は保護されます

迷惑メールは一切配信されませんので、ご安心くださいね

この記事を読んだ人はこんな記事も読んでます

Message

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