さぺログ

インターネットで話題のモノ、コト、イベント、役立つ情報や商品レビューを発信中

WordPress プラグイン「WPtouch」の「メニュー」レイアウト崩れ修正方法

      2014/08/26

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

WPtouchの「メニュー」表示のレイアウト修正方法

スマホ(iPhoneで確認しています)で、さぺログを開くとこうなります。

wptouch menu

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 menu

WPtouch メニューが正常に表示されました。

「WPtouch」が更新されるたびに、立て文字表記に戻ってしまうので、更新時には注意が必要になります。バグなのか、早く正常表示されるようになって欲しいですね。

 - WordPress, プラグイン ,

 

スポンサードリンク

 

スポンサードリンク

  関連記事

no image
初めての WordPress アップデート。

先日より、「WordPressの管理画面にアップデート」の表示が出ていたので、ア …

WordPressのスマホ最適化プラグイン WPtouch がシャレオツでオススメです

最近ではレスポンシブデザインが必須となっています。今回の自作テーマではスマホ画面 …

no image
お気に入りのアイコン「ファビコン」をWordPressでセットしてみた。

あまり気にした事ないけど、よく設定されているのを見るファビコンが、結構簡単にセッ …

wordpress
[追記あり] WordPress 4.1.2 が公開、複数プラグインにも脆弱性が見つかっているので早めのアップデートを!

※この記事の翌日、4月24日にWordPress4.2 “Powel …

WordPress プラグイン「PS Auto Sitemap」がおかしくなった件

さぺログコンテンツの1つ「サイトマップ」ページをクリックすると、「sitemap …

no image
WordPress プラグイン 「WordPress Popular Posts」を導入。

よく他ブログサイトで「人気の記事」など記事のアクセスランキングを見ます。その「人 …

wordpress
WordPressのアップデート中に止まったので、再インストールを試してみました

自作テーマに変えてから初めてのWordPressのアップデート作業を行いましたが …

stinger3でiPhoneのファビコンが変わらない時の確認

新しいさぺログのロゴもでき、ブログやTwitterはじめ、様々なサービスのロゴ画 …

WordPress 自作テーマを補うプラグイン3つを紹介します。

さぺログ自作テーマを適用しましたが、テーマ内だけでは対応できなかった機能などはプ …

no image
SEO対策含め、パーマリンクの設定を変更しました。(その1:変更方法)

SEO対策などの面から、パーマリンク設定を変更しました。その変更方法(その1)と …