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

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

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

  3. Wordpress

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

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

  4. Wordpress

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

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

  1. Wordpress

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

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

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

    伝わるのに重要なのは、言葉じゃない
  5. Wordpress

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