ロゴ画像が「ぼやける・鮮明に表示されない」場合の対応方法【WordPressテーマ】

以下の問題を解決します

• WordPressのロゴ画像がぼやけて表示されてしまう

ロゴ画像が「ぼやける・にじむ・鮮明に表示されない」場合の対応方法

 

WordPressヘッダーのロゴ画像が鮮明に表示されない場合の対処方法を２つご紹介します。

1. ロゴ画像のサイズを大きくする（初心者向け）
2. svgファイルでロゴ画像を置き換える

順番に解説していきます。

①ロゴ画像のサイズを大きくする（初心者向け）

ロゴ画像がぼやけて見えのは、画像の解像度が低い・iPhone、iPad等のRetinaディスプレイによるものです。簡単な解決方法として「サイズ（解像度）の大きいロゴ画像に置き換える」方法があります。

例えば画像の表示エリアが縦100ピクセル、横100ピクセルだと仮定します。

ロゴ画像を鮮明に表示させる為に、縦200ピクセル、横200ピクセルの画像で置き換える方法です。

表示エリアのサイズって何？という方は、単純にアップロードしているロゴ画像を2倍の大きさに加工したもので置き換えてください。

用意する画像サイズ

• オリジナルのロゴ画像：　縦150ピクセル×横200ピクセル
• 用意するロゴ画像：　縦300ピクセル×横400ピクセル (縦2倍、横2倍)

 

サイズの大きいロゴ画像を用意できたら、テーマに沿った方法でロゴ画像を置き換えてみましょう。
この方法でロゴ画像を置き換えると以下どちらかの表示になります。

• うまくいった！　→ 追加作業無し
• 画像がでかく表示されてしまった　→ 追加作業あり（以下「ロゴ画像のCSS調整」作業を行いましょう）

ロゴ画像サイズのCSS調整

先ほど紹介した大きいロゴ画像を設置後、ロゴ画像が大きく表示されてしまった際のサイズ調整方法です。画像サイズの調整はCSS、ｊQueryで行えますが、一番簡単な方法はCSSです。

ロゴ画像の要素に以下のようなCSSコードを追加します。追加する場所はお使いのCSSです。テーマ内のstyle.cssか、追加CSS（外観→カスタマイズ→追加CSS）からサンプルコードを設置しください。

サンプルコード

.logo img{
width: 200px;
height:auto;
}

サンプルコードの「.logo」部分は、お使いのテーマにより異なります。
ブラウザの開発ツール（ディベロッパーツール）で確認するのが確実です。

「width」部分の数字は、任意です。表示させたいサイズに調整してください。
もしロゴ画像をレスポンシブ対応にしたい場合は、画像の横幅（width）を固定値ではなく、最大値（max-width）にします。以下、レスポンシブ対応のサンプルコードです。

サンプルコード

.logo img{
max-width: 200px;
height:auto;
}

 

CSSのコードが反映されない場合？

サンプルのCSSコードを設置後、ロゴサイズが思うように小さくならない場合は、以下を確認しましょう。

• 他のCCSのコードが優先されている可能性があります（「!important」を試しましょう）
• ブラウザのキャッシュ（ブラウザでキャッシュを読み込まず、ページをリロードしましょう）

 

以上で作業終了です。

②.svgファイルでロゴ画像を置き換える

.svgはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略です。写真などのjpeg拡張子のファイル同様に、ウェブサイトに利用できるファイルの一種です。ロゴ画像を.svgに変換することで、ぼやけず鮮明なロゴ画像を表示させることができます。

以下の方向けの解決方法です。

• .svgファイルのロゴ画像が手元にある（または依頼して入手できる）
• .png、.jpgなどのロゴ画像を.svgに変換できる

ファイル形式の変換は、Photoshop等の画像加工ソフトを持っている方なら容易な作業かもしれませんね。
初心者の方なら、インターネット上で画像を.svgに変換するサービスがありますので利用してみましょう。

以下は無料のオンラインサービスです。jpgファイル等を、.svgに変換するサイトです。

無料オンラインサービス

• https://www.vectorizer.io/
• https://image.online-convert.com/convert-to-svg
• https://svgcreator.com/

.svgファイルをアップロードするには事前設定が必要です

WordPressは標準で.svgファイルをアップロードすることが出来ません。
もし画像をアップロードしても　「セキュリティ上の理由によりこのファイル形式は許可されていません」とエラーが表示されます。

.svgファイルをWordPressで利用するには、事前の設定が必要です。

.svgファイルアップロード前の事前設定

1. プラグインを使う（初心者向け）
2. functions.php（中級者向け）
3. wp-config.php（お勧めしません）

①プラグインを使う

WordPressで.svgファイルを利用可能にする為の無料プラグインを利用する方法です。
難しい操作がなく、テーマファイルのソースコードを編集する必要がないので初心者向けです。
SVGファイルをWordPRessで利用可能にしてくれる無料プラグインは公式ディレクトリーに公開されています。

適当なものを選んで有効化しればOKです。
もしどのプラグインをインストールして良いかわからない場合は、煩わしい設定がない「SVG Support」をお勧めします。

 

「SVG Support」プラグインのインストール

SVG Supportプラグインは無料です。WordPress公式ディレクトリーに公開されていますので、以下の方法でサイトにインストール可能です。

プラグインインストール方法

1. ダッシュボードにログイン　→　プラグイン　→　新規追加　→「SVG Support」で検索　→インストール
2. 公式ディレクトリーからzip形式のプラグインファイルをダウンロード、ダッシュボード上からzipファイルをアップロード

SVG Supportプラグインはインストールするだけで、.svgがサポートされるシンプルなプラグインです。
管理画面上に専用の設定メニューが表示されますが、特に何の設定をする必要はありません。

adminだけ、.svgのアップロードを許可するか（Restricts SVG upload privileges to Administrators.）？といった類の設定が行えます。（興味と必要性がある方は、ダッシュボード内「設定」→「SVG Support」を確認しましょう。）

②functions.phpに.svgをサポートするコードを追加

テーマファイル内のfunctions.phpにコードと追加し、.svgファイルをサポートさせる方法を紹介します。

追加するコード

function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

③wp-config.php

WordPressコアファイルのwp-config.phpを編集する方法です。
このファイルへ.svgファイルのサポートに関するコードを書く方法ですが、以下の方法お勧めしません。

• うっかりミスでサイトに障害が発生する（サイトが真っ白になる）
• WordPress本体のバージョンアップでファイルが上書きされ、設定が消える

 

wp-config.phpの保存場所

WordPressをインストールしたディレクトリーに保存されています。
wp-contentや、wp-adminといったフォルダと同じ階層です。FTPツールや、レンタルサーバーの提供しているファイルマネージャーツールを使ってファイルを編集します。

以下のサンプルコードで.svgを利用可能になります。

サンプルコード

define( 'ALLOW_UNFILTERED_UPLOADS', true );

 

＜備考＞管理画面からロゴ画像が変更できない？

「そもそもどうやってロゴ画像を変更するのか分からない！」という方向けです。

WordPressは有効化しているテーマによりロゴ画像の変更方法が異なります。テーマによっては管理画面からロゴを変更できないものもあります。以下一般的なテーマのロゴ画像変更方法です。

• ダッシュボード→ 外観 → カスタマイズ → 「サイト基本情報」

「サイト基本情報」でなければ、「ヘッダー」、「ロゴ」、など「カスタマイズ」で表示される設定内容を確認しましょう。有料のテーマの場合は、テーマ購入元のサイトにマニュアルが掲載されている場合があります。または購入時にダウンロードしたファイル内に、マニュアルがないかを確認しましょう。

外部の制作会社にオリジナルデザインでテーマを依頼すると、まれにロゴ画像を管理画面から変更できない仕様となっていることがあります。そういった場合は、画像のアップロード先を調べて、サイズの大きいロゴ画像をFTPツールで上書きアップロードしましょう。
 

「ロゴ画像の変更が出来ない！」「ロゴがぼやけて自己解決できない！」という方は、当方へご連絡ください。
ロゴ画像の設置代行を行わせていただきます。

 

まとめ

いかがでしたか？
ロゴ画像は、鮮明に表示されるようになりましたか？
今後紹介した方法は、WordPressページ上部のロゴ画像に限らずコンテンツエリア等の画像を鮮明に表示させる仕組みです。

iPad、iPhone等のスマートフォンで画像がぼやけて困っている！という場合にぜひお試しください。

人気記事　初心者でも可能なSEO対策って何？

人気記事　【ゼロから始める】副業ブログで月5万円を稼ぐ！当社スタッフが試してみた方法と成果を公表

この記事の関連記事

新着コラム