タイトルロゴがなんかぼやけるんだよなぁ…
画質をあげて画像を置き換えてみても、ぼやけているのは変わらない。
こんな感じ。
いや、読めるといえば読めるのですが、なんかくもっているんです。やはりタイトルですからきれいにしたいではないですか。
ずーっと分からなかったのですが、こちらで解決できました。
タイトルロゴをくもらせずにキレイにする
方法は２ステップ。
１．大きめサイズのロゴ画像をアップロードする
２．表示されるロゴ画像のサイズを規定する
２でサイズを規定する際に、テーマを編集する作業が必要になりますが、そんなに大きな手間はかかりません。
やってみましょう。
１．大きめサイズのロゴ画像をアップロード
外観⇒TCDテーマオプション⇒ロゴの設定
でいつものようにロゴ画像をアップロードします。
表示させたいサイズの２倍程度あればいいでしょう。私は「518×196px」の画像を使用しました。アップロードしたら「設定を保存」。
この時点でサイトには大きなタイトルロゴが表示されています。あせらず次に進みましょう。
２．表示されるロゴ画像のサイズを規定する
表示されるロゴサイズの設定は「テーマの編集」から行います。
外観⇒テーマの編集⇒header-logo.php
「header-logo.php」は「functions」の中にあります。
書き換えるのは「echo」ではじまる青色背景の以下の部分。
以下のように書き換えます。
|
1 |
echo '<h1 id="logo_image" style="top:' . $position_top . 'px; left:' . $option['logoleft'] . 'px;"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" width="ここに任意の横幅（※数値のみ）" height="ここに任意の縦幅（※数値のみ）" /></a></h1>' . "\n"; |
「任意の縦幅」「任意の横幅」の部分が、実際に画面上に表示されるサイズになります。
私はアップロードした画像サイズの1/2、「横259」「縦98」で記入しました。
キレイになった！
完了です。これでタイトルがキレイに表示されるようになりました。
BEFORE
AFTER
View Image InfoというGoogle Chromeのツールで確認してみると、「518×196px」の画像が「259×98px」で表示されていることがわかります。
ロゴがきれいに表示されているとやっぱり気持ちがいいですね。