STINGER3でスマホ閲覧時にロゴ画像の右端が切れてしまうのを修正する方法

公開日: : WORDPRESS , , , , , , ,

当サイトでも使用させていただいているワードプレスの無料テーマ「STINGER3」では、ページ上部のサイトタイトルをロゴ画像に変えて使用することができます。

smart_css1

ただ、デフォルトの状態だと、ロゴ画像のサイズによってはスマホで閲覧した際に右端が切れてしまいます。下の画像はわたしの使用しているiphone4Sで表示したさいの見え方(ロゴサイズ320×60)です。

smart_css2

この右切れ状態を修正しようとして大分手間取りましたのでここに備忘録をメモしておきます。

サイトタイトルをロゴ画像に変換する

まずはロゴ画像の設定方法を説明します。設定自体をご存知の方はここは読み飛ばして次に進んでください。

1:ロゴ画像を用意する

事前にロゴ画像を用意しておきましょう。作者様の公式ページでは幅320px以下で作成することが推奨されていますが、これだとihone4sなどの画面の小さいスマホでは右端が切れてしまいます。後述のサイズ自動調整をしない状態で、小画面スマホでも右端がきれないように表示するためには280px以内が妥当なようです。

ロゴを作成したらアップロードして、URLをひかえておきましょう(あとでこのURLにリンクします)。

2:headre.phpを修正

サイトタイトルをロゴ画像に変換するには、テーマ編集にてヘッダー(header.php)をいじります。
まずは下記の記述部分を見つけましょう。

5-6行目部分がサイトタイトルの表示に関する記述です。
現状はサイト名(TXT)をリンクする形()になっているので、これをロゴ画像のimgタグに差し替えてあげます。

画像のURLは先ほどアップしたロゴ画像のURLですね。以上で、ロゴ画像が表示されるようになります。

参考:STINGER3公式ページ
http://stinger3.com/mokuzi/rogo/

ただ、このままだと280ox以上で作成したロゴ画像はスマホ閲覧時に右端が切れて表示されてしまいます
(※この辺はスマホ自体の画面サイズに依拠するので、大きい画面サイズのスマホだと切れないと思いますが・・・)。iphone4sを利用している、わたくしの環境では先日のとおりです。

280px以下で作成すれば問題ないのですが、これで作ってしまうと、PC閲覧時にロゴ画像が小さくなりすぎてしまう・・・
そこで、スマホ用CSSを修正して、ロゴ画像のサイズを自動調整するように設定しました。

スマホ閲覧時にロゴ画像のサイズが自動調整されるように設定する

スマホ閲覧時に、ロゴ画像を自動リサイズさせるためにはsmart.cssに以下を追記します。

これで、スマホ表示も最適化(自動サイズ調整)されます。
わたくしのiphone4Sで確認してみると、以下のようにちゃんとサイズ調整が行われるようになりました。

smart_css3

参考:「えけこのくるる」さん
http://equeko.info/wordpress/stinger3-for-lady/

サイズ調整が行われない方へ

もしかして子テーマのsmart.cssに追記していませんか?
これはサイズ調整ウンヌン以前の知識として知っておくべきことなのですが、STINGER3ではデフォルト状態だとsmart.cssを子テーマから修正できないようになっています。

基本的にスマホのCSSに関しては親テーマが読み込まれる用に記述されているので、ここを修正してあげないと、自分でsmart.cssの子テーマを作成していてもまったく反映されません。わたくしこのことを知らなかったため数時間悩みました…

子テーマのsmart.cssを有効化する方法

header.php内のCSSの読み込み設定部分を書き換えます。

[変更前]

[変更後]

以上で、smart.cssの子テーマが利用できるようになります。

参考:「最近,気になったこと…」さん
http://azur256.com/archives/9492
  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

wp_error_001

WordPressで記事の公開/更新ボタンがグレーアウトしてしまう問題の対処方法

当ブログはWordPressで作成しているのですが、記事の作成中(編集中)、たまに 公開(更新)ボタ

side_bar

STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり幅を調整したりする際のCSS設定

STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり、幅を調整したりす

scroal_001

WordPress4.xでPreserve Editor Scroll Positionがうまく機能しない問題の解決方法

※2016年6月追記:下記の方法を行ってもFireFox(ファイアフォックス)ではPreserve

medium_3036254720

自分的に便利だから入れておきたいWordPressのプラグインのメモ

photo credit: zetson via photopin cc 自分的に便利だから入

thum_001

ShareHtmlメーカーで作成したタグのCSSを調整できるように設定する方法

リンク先のサムネール画像を自動取得してくれる便利なツール「ShareHtmlメーカー」。当サイトでも

code_001

QuickAdsenseで挿入するアドセンスコードをPCとスマホで切り替える方法

WordPressの記事内に自動でGoogleアドセンスのコードを挿入してくれる便利プラグイン「Qu

stinger_ads001

STINGER3でアドセンスのPC版表示を横並びのレクタングルにする設定

※注意:2014年4月現在、当ブログのアドセンス配置は必ずしもこの記事の内容と一致していませんが、同

quickads_001

QuickAdsence(クイックアドセンス)の文字化けを修正する方法

WordPressの定番プラグイン、QuickAdsence(クイックアドセンス)。 私の場合

table_error_04

Table of Contents Plusが表示されない時の対処方法! WordPress(ワードプレス)のプラグイン情報

WordPress(ワードプレス)のプラグインで、投稿記事内に自動的に目次を生成してくれるプラグイン

medium_2536017020

WordPress(ワードプレス)のURL(パーマリンク)を任意に設定できるプラグイン”Custom Permalinks”について

photo credit: Nikolay Bachiyski via photopin cc

Message

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

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先

ashi_c_008
足元の冷え解消!足温グッズレビュー(3) ホットマルチヒーター

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

ashi_b_002
足元の冷え解消!足温グッズレビュー(2) 山形電気あんか*参考

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

ashi_a_006
足元の冷え解消!足温グッズレビュー(1) デュアルヒータースリッパ

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

futa_001
掃除機にペットボトルの蓋が詰まってしまった場合の対処方法

部屋を掃除していたところ、掃除機でペットボトルのフタを吸い込んでしまい

→もっと見る

PAGE TOP ↑