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

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

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

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

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

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



Advertisement

子テーマ導入とトラブル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Advertisement

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

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

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

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

WORDPRESSカテゴリの最新記事