【Simplicity】タイトル名(画像・ロゴ)がボヤけてしまうときの解決方法

Simplicity

SimplicityはWordPressの無料テーマの1つです。

Simplicityのカスタマイズ機能を用いて、タイトルを画像(ロゴ)として設定した場合、画像のサイズによってはボヤけてしまうことがあります。

パソコン表示では綺麗に表示されていますが、モバイル端末では、ボヤけてしまうケースがあるようです。

そこで、レポ部は・・・
【Simplicity】タイトル名(画像・ロゴ)がボヤけてしまうときの解決方法
をレポートしたいと思います。
スポンサードリンク

タイトル名(画像・ロゴ)がボヤける

Simplicityのタイトル名に画像ロゴを設定した場合、何故か、端末によっては、下の画像のようにタイトル名がボヤけてしまう現象が起きてしまいます。

ブラウザが原因なのか、端末が原因なのかは、定かではありませんが、このまま放置してしまうと、インターフェース or 訪問者の観点からの双方で、見にくいWebサイトだと判断されてしまい、訪問者数に影響がありそうなので、解決することにしました。

iphone1

解決方法

解決方法は至って簡単です。

  1. 画像ロゴとして表示したい画像を作成する(大きい画像に設定)
  2. パソコン・モバイル用のスタイルシートにソースコードを指定

画像ロゴを製作する段階での画像のサイズは大きめに作成します。

表示する画像ロゴの縦幅/横幅を倍ほどに作成するのが理想です。

カスタマイズ機能を使ってタイトルロゴを設定する

Simplicityのカスタマイズ機能を使って、画像ロゴをタイトルロゴとして設定します。

  1. WordPress左メニューの「外観」から「カスタマイズ」を選択
  2. ヘッダー内の「ロゴ画像」にタイトルとして表示させる画像を設定
  3. 「ロゴを画像にする」にチェックを入れる
  4. 設定内容を保存する

この状態でプレビューをすると、画像幅によっては、タイトル画像が盛大に表示されてしまいます。

ただ、盛大に表示された状態では、画像がボヤけてしまう現象は起きていないはずです。

画像にボヤけを出さないためには、スタイルシートを用い、タイトル画像に適したサイズへと縮小すると、綺麗に表示することができます。

503

スタイルシートの編集

スタイルシートを使って、タイトル画像(ロゴ)を縮小し、綺麗に表示させる作業を行います。

  1. Simplicityの「外観」から「テーマの編集」を選択
  2. 「style.css」にソースコードを追加し、「ファイルを更新」をクリックする
  3. 「mobile.css」にソースコードを追加し、「ファイルを更新」をクリックする

各スタイルシートに、追加するソースコードは、以下のとおりです。

ソースコードの内容は、

  • サイトタイトルに使われている画像ロゴの横幅を表示したい画像の横幅に設定する

といった単純なソースコード内容となります。

予め用意しておいた大きめの画像に、ブラウザ本来の機能を用い、ブラウザに合った表示方法(縮小方法)で、画像を適正化させています。

問題解決後

これまでの解決法を実装した結果は以下の画像のようになります。

画像自体のボヤけが無くなり、ブラウザに合った縮小方法で、タイトルが適正化されています。

項目「タイトル名(画像・ロゴ)がボヤける」で解説した画像と、照らし合わせて見てくださいね。

iphone(4s)の端末で縦方向から撮った画像

iphone3

iphone(4s)の端末で横方向から撮った画像

iphone4

まとめ

いかがでしょうか。

意外と簡単に修正できました。

タイトルロゴがボヤけてしまうと訪問者から「いい加減なサイトだ」との認識が強まります。

それに、タイトルロゴがボヤけてしまっていたら、何だか気持ち悪いですよね。

是非、同様の現象でお困りの方は、上記の解決方法を試してくださいね。