空にかざした水晶

WEB

Retinaディスプレイでもロゴ画像がぼやけないように、クッキリと表示させる方法

一生懸命作ったブログのロゴ画像。残念ながらそのままアップしても、MacのRetinaディスプレイではぼやけてしまいます。

TCDさんのテーマ『MAG』を例に、クッキリと綺麗に表示する方法を説明します。

スポンサードリンク
スポンサードリンク

ロゴ画像をアップロードしよう

1、2倍サイズのロゴ画像を用意

ロゴ画像は、表示させたい大きさの2倍のサイズのものを用意してください。

参考までに私は、下の画像のように 340 x 40 で表示させたいので、680 x 80 でロゴ画像を作成しました。

ロゴ画像のサイズを確認

 

2、画像のアップロード

WordPressの 管理画面外観TCDテーマオプションロゴの設定 の『ステップ1』で、ロゴ画像をアップロードします。

 

バックアップを取ろう

次に、2倍の大きさのロゴをギュッと圧縮するコードを追記するのですが…その前に、必ずバックアップを取っておきましょう。

FTPソフトを使って、サーバーからダウンロードしても良いですし、該当するファイル(今回は『header-logo.php』)だけ、コピーしておくのも良いでしょう。

 

FileZillaを使用して、バックアップする方法はこちらをご参照ください。

 

header-logo.php に追記しよう

WordPressの 管理画面外観テーマの編集 をクリックし、 編集するテーマ を選択します。

ズラッと並んだテーマファイルの中から『functions』をクリックすると、『header-logo.php』が見つかります。

 

クリックすると拡大します。
header-logo.phpの該当箇所

上の画像の赤い矢印で指したところ( ” と / の間)に、下記のコードを追記します。

width=”340″ height=”40″

widthの前は、必ず半角スペースを空けてください。

数字の部分は、表示させたいサイズを入力します。widthは幅、heightは高さです。

 

追記後は、下の画像のようになります。
widthの前“40”の後ろの黒いアンダーラインは、半角スペースです。)

クリックすると拡大します。
header-logo.phpの追記箇所

 


ソースコードも載せておきます。

【追記前】

 

【追記後】

上記をコピペされる場合、width(幅)とheight(高さ)は、適宜変更してください。

 

最後に

実は、私も難しそうだなと思って放置していたのですが、やってみたら簡単でした。

ぜひ、あなたもチャレンジしてみてください。

 

 
スポンサードリンク
 
スポンサードリンク

関連記事

  1. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の使い方

    データベース内の文字列の書き換えに便利な『Search Replace…

  2. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法

    「画像に枠線を作りたい。だけど、どうやって作ればいいの?」そん…

  3. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

  4. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!

    ワードプレス(WordPress)でブログを始める際にまず必要となるの…

  5. 子猫をのせた乳母車を押す親猫

    WEB

    とっても簡単!!WordPress(ワードプレス)の子テーマの作り方

    ずっと面倒だと思っていた WordPress(ワードプレス)の子テーマ…

  6. wordpress,ワードプレス

    WEB

    エックスサーバーで WordPress をインストールする方法

    WordPress(ワードプレス)でブログを始めるために、ドメインとサ…



== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. 郵便受け
  2. ブランコに乗る女の子
  3. ドアに差し込まれた封筒
  4. cyclists
  5. カメラ
  6. wordpress,ワードプレス
  7. 海に浮かぶ男性
  8. crayon,クレヨン
  9. ペンを持つ手
  10. ドメイン

カテゴリー

当サイトで使用しているテーマはこちら!!

アフィリエイトサイトにはDiverもお勧め!!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. crayon,クレヨン

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
  2. fontAwesome

    WEB

    超簡単!!Font Awesome(Version 5)の使い方
  3. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します
  4. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法
  5. ドメイン

    WEB

    お名前.com でドメインを取得する方法
PAGE TOP