WPtouch メニューの縦書き表示を直す3つの方法

2013年4月21日

※本ページはプロモーションが含まれています

WPtouchのメニューボタンがv1.9.42より「▼」表示から縦書き表示になりました。本日は縦書き表示を直す3つの方法をご紹介します。

こんばんは！みかです。

WorePressのスマートフォン向け表示用プラグインとして
人気のWPtouchですが、v1.9.42以上にバージョンアップすると、
メニューボタンが「▼」から縦書き表示になってしまいました。

こんな感じで、検索ボタンと重なっている上に、
はみ出て表示されてしまいます(;^_^A

これはさすがに見栄えが悪いということで、
メニューボタンの縦書き表示を直す3つの方法を紹介します。

1.スタイルシートを調整する

最もオススメの対処法がこちら。

「メニュー」という文字を表示するエリアが小さいため、
WPtouchのスタイルシート（style.css）を調整します。

style.cssファイルは下記の場所に格納されています。

/wp-content/plugins/wptouch/themes/default/style.css

スタイルシートの中にある
「#headerbar-menu」を検索し、
「width: 70px;」を追加します。

#headerbar-menu {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
width: 70px;
}
※WPtouch v1.9.6.1の場合

これだけだと、タイトル名が長い場合に、
メニューボタンと重なってしまうため、
「#headerbar-title」のwidthを85%→77%に変更します。

このように修正すると、次のような表示になります。

横書きメニューになりました(*´∀｀*)

次の対処法がこちら。

メニューが縦書き表示になってしまうのが、
WPtouchの設定画面で言語設定を「Japanese」にした場合です。

言語設定を「自動選択」に戻して上げることで、
メニューボタンを「▼」表示に戻すことができます。

ただし、WordPressのブログを見た時に、
コメント入力欄の文言などが英語になってしまう欠点があります。

WPtouchのメニューボタンの表示が
縦書きになったのが、v1.9.42からです。

2013年4月21日時点の最新バージョンがv1.9.6.1ですが、
メニューボタンは縦書き表示のままです。

この対処法では、WPtouchのバージョンを
「▼」表示されていたv1.9.41に戻します。

ただし、現在、WPtouchのダウンロードサイトでは、
v1.9.41をダウンロードできないようなので、
ローカルに保存している方でないと出来ない対処法ですね(;^_^A

WPtouchのメニューボタンの縦書き表示を直す方法としては、
「1.スタイルシートを調整する」が最もオススメです。

ただし、WPtouchのバージョンアップをすると、
スタイルシートのファイルも上書きされてしまいます。

WPtouchのバージョンアップ時には
必ずバックアップを取っておき、後で反映させましょう！

以上、WPtouch メニューの縦書き表示を直す3つの方法でした（＾＾

よかったらシェアしてね！