空にかざした水晶

WEB

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

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

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

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

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

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

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

このブログの場合、下の画像のように 340 x 40 で表示させたいので、680 x 80 でロゴ画像を作成しました。

ロゴ画像のサイズを確認

② 画像のアップロード

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(高さ)は、適宜変更してください。

最後に

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

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

 

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

パンMAGでトップページのみ、パンくずリストを非表示にする方法前のページ

アメブロの見出しをカスタマイズする方法次のページ3匹のカエル

関連記事

  1. 404

    WEB

    Broken Link Checker でリンクエラーになってしまう?その対処法について

    Broken Link Checker というプラグインで、リンクエラ…

  2. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法

    せっかく取得したドメインですが「もう使わないから削除したい!」そう思っ…

  3. Google Search Console
  4. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!

    全くの初心者さんでも分かるように、WordPress でブログを始める…

  5. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法

    私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『M…

  6. コントローラー

    WEB

    WordPress でレイアウトが崩れる自動整形を回避する方法

    WordPress で固定ページを作成しようと思い、コードを記述して表…

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

wordpress

よく読まれている記事

  1. ペンを持つ手
  2. 緑のドア
  3. ドメイン
  4. チェーン
  5. シャットダウン
  6. カメラ
  7. 3匹のカエル
  8. いいえ、結構です。
  9. ドメイン
  10. タイプライター

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

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

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

パソコンを覗き込む二人の女子
  1. mistake

    WEB

    『FileZilla』で転送に失敗した場合の操作方法について
  2. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールし…
  3. ガネーシャ

    コラム

    大きな病気を抱えていても、他人のことを応援できる人
  4. 海を背景にフレームを持つ女性の手

    WEB

    Photoshopで簡単!!画像に枠線を作る方法
  5. 郵便受け

    WEB

    『WP Mail SMTP』のテスト送信でのエラー表示(Could not au…
PAGE TOP