Wordpress

タイトルロゴがぼやけるときの対処方法 TCD MAG

タイトルロゴがなんかぼやけるんだよなぁ…

画質をあげて画像を置き換えてみても、ぼやけているのは変わらない。

こんな感じ。

いや、読めるといえば読めるのですが、なんかくもっているんです。やはりタイトルですからきれいにしたいではないですか。

ずーっと分からなかったのですが、こちらで解決できました。

ロゴ画像をretinaディスプレイ対応にする

タイトルロゴをくもらせずにキレイにする

方法は2ステップ。

1.大きめサイズのロゴ画像をアップロードする
2.表示されるロゴ画像のサイズを規定する

2でサイズを規定する際に、テーマを編集する作業が必要になりますが、そんなに大きな手間はかかりません。

やってみましょう。

1.大きめサイズのロゴ画像をアップロード

外観⇒TCDテーマオプション⇒ロゴの設定

でいつものようにロゴ画像をアップロードします。

表示させたいサイズの2倍程度あればいいでしょう。私は「518×196px」の画像を使用しました。アップロードしたら「設定を保存」。

この時点でサイトには大きなタイトルロゴが表示されています。あせらず次に進みましょう。

2.表示されるロゴ画像のサイズを規定する

表示されるロゴサイズの設定は「テーマの編集」から行います。

外観⇒テーマの編集⇒header-logo.php

「header-logo.php」は「functions」の中にあります。

書き換えるのは「echo」ではじまる青色背景の以下の部分。

以下のように書き換えます。

「任意の縦幅」「任意の横幅」の部分が、実際に画面上に表示されるサイズになります。

私はアップロードした画像サイズの1/2、「横259」「縦98」で記入しました。

キレイになった!

完了です。これでタイトルがキレイに表示されるようになりました。

BEFORE

AFTER

View Image InfoというGoogle Chromeのツールで確認してみると、「518×196px」の画像が「259×98px」で表示されていることがわかります。

ロゴがきれいに表示されているとやっぱり気持ちがいいですね。

関連記事

  1. Wordpress

    タグの説明にURLリンクをいれたいとき@TCD MAG

     そろそろ記事も増えてきたし、タグを整理しようかな。スラッグも英語…

  2. Wordpress

    タイトルのサイズが小さい?TCD MAGでスマホロゴを大きくする方法

    スマホサイトのタイトル、小さくて読めないんですけど・・・MAGでブ…

  3. Wordpress

    TCD MAGのアイキャッチが白い…一体どうしたのWordPress?解決方法

    うーん、真っ白でよく見えない…!ある日のこと、突然ブログのトップペ…

  4. Wordpress

    H2タグの前に広告を表示する方法 TCD MAG

    目次の上に広告をのせたいな調べていると、記事下よりも本文の中、目…

  1. Wordpress

    H2タグの前に広告を表示する方法 TCD MAG
  2. Wordpress

    タイトルのサイズが小さい?TCD MAGでスマホロゴを大きくする方法
  3. Wordpress

    TCD MAGのアイキャッチが白い…一体どうしたのWordPress?解決方法
  4. Wordpress

    タイトルロゴがぼやけるときの対処方法 TCD MAG
  5. 文章

    伝わるのに重要なのは、言葉じゃない
PAGE TOP