WordPress プラグイン「WPtouch」の「メニュー」レイアウト崩れ修正方法
2014/08/26
WordPressのサイトを、スマホ用に自動でレイアウトを変換してくれる、代表的なプラグインの「WPtouch」において、トップ画面の「メニュー」という項目が、レイアウト崩れを起こしてました。WPtouchのスタイルシートを直接修正しないとなおらないようなので、ご説明いたします。
WPtouchの「メニュー」表示のレイアウト修正方法
スマホ(iPhoneで確認しています)で、さぺログを開くとこうなります。

WPtouch メニューの表示
タイトル横の「メニュー」が、立て表示になって、レイアウトが崩れちゃっています。原因としては、メニュー部分の幅を固定していない為に発生しているようで、WPtouchのスタイルシートを修正することで対処できるそうです。対象のファイルを以下になります。
/wp-content/plugins/wptouch/themes/default/style.css
ダウンロード後ファイルを開き、「#header-menu」を検索し、下記赤文字の1文を追加してください。
width: 70px; (「幅を70pxサイズにする。」という意味のコードです。)
スタイルシート上は、下記のようになります。
#headerbar-menu { position: absolute; top: 0; right: 0; margin: 0; padding: 0; width: 70px; }
それで表記は、正常に表示されます。こんな感じです。

WPtouch メニューが正常に表示されました。
「WPtouch」が更新されるたびに、立て文字表記に戻ってしまうので、更新時には注意が必要になります。バグなのか、早く正常表示されるようになって欲しいですね。
スポンサードリンク
スポンサードリンク
関連記事
-
-
WordPressのスマホ最適化プラグイン WPtouch がシャレオツでオススメです
最近ではレスポンシブデザインが必須となっています。今回の自作テーマではスマホ画面 …
-
-
twitterと連携、その他ソーシャル系サービスのボタンを追加してアクセスアップ!
さぺログを初めて、1ヶ月が経とうとしています。ついにサイドバーの「アーカイブ」に …
-
-
WordPressプラグインのインストール、設定方法
WordPressのプラグインについて結構記事を書いていますが、インストール、基 …
-
-
SEO対策含め、パーマリンクの設定を変更しました。(その1:変更方法)
SEO対策などの面から、パーマリンク設定を変更しました。その変更方法(その1)と …
-
-
WordPress 自作テーマを補うプラグイン3つを紹介します。
さぺログ自作テーマを適用しましたが、テーマ内だけでは対応できなかった機能などはプ …
-
-
WordPress プラグイン 「WordPress Popular Posts」を導入。
よく他ブログサイトで「人気の記事」など記事のアクセスランキングを見ます。その「人 …
-
-
WordPress 続きを読む(moreタグ)の表示を変える2つの方法
WordPressにインストールや、セットしている機能などで、ちょこっとタグを変 …
-
-
WordPressのアップデート中に止まったので、再インストールを試してみました
自作テーマに変えてから初めてのWordPressのアップデート作業を行いましたが …
-
-
[追記あり] WordPress 4.1.2 が公開、複数プラグインにも脆弱性が見つかっているので早めのアップデートを!
※この記事の翌日、4月24日にWordPress4.2 “Powel …
-
-
WordPress 記事中に表を挿入したい「TinyMCE Advanced」がオススメです。
投稿画面のツールの部分になかったので、使っていなかったのですが、「記事中に表を入 …