ディーエムガジェット

WordPressのTips備忘録を中心にComputer全般やデジモノ、ガジェット、アプリ紹介など

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

      2015/02/16

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

先日、一刻も早くやりたかった「さくらサーバー」から「エックスサーバー」へのサーバー移転を行いました。噂通りかなりサクサク動くようになって現状とても満足しています。移転理由はアクセス増でブログが重くなって困ったからと言う訳でもなく、PCとかでもそうなんですが、編集してる時とか動きが遅い状態が自分的にストレスになるので、

「あと月500円でストレスフリーなブログライフが待っているならエックスサーバーに移転してしまおう。」

と思ったのがきっかけです。結果、CloudFlare使わなくても満足出来るスピードにまで安定しました。サーバー移転で色々勉強になったことも多いので移転記事でも書こうかなと思っていますが、さくらサーバーからエックスサーバーへの移転記事結構多いのでどうしようか迷っています。エックスサーバーについては詳しくはこちら、



スポンサーリンク

子テーマ導入とトラブル

dmgadget(ディーエムガジェット)の方はすでに子テーマを導入しての運営をしていますが、管理ブログの方はまだ子テーマを導入していませんでした。それでサーバー移転を機に管理ブログの方も子テーマを導入してみました。導入が終わってからスマホ用ページを見てみると、

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

ヘッダー画像のサイズが最適化されずはみ出してしまっています。smart.cssのデータを移動してなかたのが原因っだったんですが、この修正方法をここのブログに備忘録として残してなかったので記事にしてみました。

スマホ用ページでヘッダー画像がはみ出ないように最適化

まず注意が必要なのは「Stinger3のデフォルト設定ではsmart.cssは親テーマの物が読み込まれる設定らしく、子テーマのsmart.cssを読み込むには設定が必要です」とのことですので、smart.cssも子テーマとして扱いたい方の為にこのページの一番下に記載しておきます。

修正は簡単で、管理画面から外観 → テーマ編集 → 右上の「編集するテーマを選択」から子テーマではなく親テーマを選択

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

そして右の「選択」をクリックすると親テーマのテンプレート一覧が表示されるので、たぶん一番下にある「smart.css」を開きます。

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

又は、transmitのようなFTP&編集アプリで編集を行います。

スポンサーリンク

Transmit
カテゴリ: ユーティリティ
現在の価格: ¥3,400

開いたsmart.cssの一番下などわかりやすいところへ下記のコードを貼付けます。

わかりやすくタイトルも付けてみました。transmit上の編集画面はこんな感じです。

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

WordPressで編集を行ってる方はこのように表記されているはずです。

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

コードを貼付けた後は保存して閉じてください。スマホページのヘッダー画像がリサイズされているか確認してみましょう。

WordPress[Stinger3] スマホ用ページでヘッダー画像がはみ出る問題

画面の幅に合うように自動でリサイズされました。

スポンサーリンク

smart.cssも子テーマ化したい場合

header.phpを開き以下のコードを探します。

transmitを使っている自分の場合大体44行目ぐらいにありました。こちらのコードを以下に変更します。

これで問題なく使用出来るはずです。読んで頂いてありがとうございました。

 - WORDPRESS

Comment

  1. Mitsuko より:

    はじめまして。WP始めたばかりです。新鮮な記事が多くて、いろいろ拝見させていただきました。初めてなのに恐縮なのですが、デフォルトテーマのtwelveを利用しており、ヘッダーの画像がi phone と i padだけ画像が縦横逆に表示されてしまうのを解消する方法を探しています。Mac上のsafariブラウザーでは普通に表示。Winのsafari,googlecrome,IEでも,モバイルはAndroidでも普通に表示されます。i pad で修正してみようと思ったところ、修正画像のところまでは横縦に表示されるが、保存ボタンを押したら縦横に戻ってしまいます。解消する方法をご存じでしたらご教授いただけるでしょうか?(WPtouchというプラグインでモバイル表示をする方法を現在は選択しています。)

Message

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

CAPTCHA


  関連記事

WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress クリック率3倍 記事本文中センターにショートコードでアドセンスを表示
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[Stinger3] RSSフィードにアイキャッチ画像を表示
WordPress[SEO Friendly Images] 画像のaltやtitleに文字列を自動的に追加
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress サイドバーにFacebookのいいねボックスを表示する方法
WordPress[Stinger5] めちゃ便利スマホ固定式フッターメニュー
WordPress[Stinger5] スマホ固定式フッターメニューを導入
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPressテーマ「Stinger3」のフォントを変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPress「Stinger3」サイドバーの背景色を変更する方法
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPressのテーマ「Stinger3」のサイト名を画像に変更する方法
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPress[Preserve Editor Scroll Position] エディターのスクロール位置を記憶
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法
WordPressテーマ「Stinger3」の「続きを読む」を右側へ移動する方法