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

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

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

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

子テーマ導入とトラブル

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

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

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

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

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

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

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

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

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

/*-----------------------------------
header画像自動リサイズ設定
------------------------------------*/
.sitename img {
height: auto;
max-width: 100% !important;
width: 100%;
} 

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

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

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

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

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

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

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/smart.css" type="text/css" media="all" />

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

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/smart.css" type="text/css" media="all" />

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