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で送る

関連記事

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

photo credit: Nikolay Bachiyski via photopin cc

WordPress 記事本文のHTMLタグ・文字列を置換する方法

タイトルどおり WordPressで記事本文内に記述したHTML(CSS)タグを検索・置換する方法で

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

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

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

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

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

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

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

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

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

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

WordPressで誤って削除してしまった記事を復活・復元させる方法

とてもまぬけなお話なのですが、他で運営しているブログのとある記事(1ページ)を誤って削除してしまい、

STINGER3のSNS(ソーシャル)ボタンの種類を追加して増やす方法

この記事では、当サイトで使用しているWordPress用テーマSTIGER3(スティンガー3)におい

WordPressで画像挿入時にリンク先の設定をデフォルトで「なし」にする方法

WordPress(ワードプレス)で文章内に画像を入れ込む場合は「メディアを挿入」ウィンドウで対象の

Message

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑