空にかざした水晶

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

最後に

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

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

 

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

関連記事

  1. wordpress,ワードプレス

    WEB

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

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

  2. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールしてみよう

    エックスサーバーでサブドメインを設定して、WordPress をインス…

  3. コントローラー

    WEB

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

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

  4. タイプライター

    WEB

    font-weight プロパティについて

    font-weight とは、フォントの太さを指定する際に使用するプロ…

  5. ドメイン

    WEB

    エックスサーバー(エックスドメイン)でドメインを取得しよう

    エックスサーバー(XSERVER)でサーバー契約を済ませたら、次はドメ…

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

    WEB

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

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



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

wordpress

よく読まれている記事

  1. チェーン
  2. 郵便受け
  3. mistake
  4. 洗濯物
  5. ドメイン
  6. 黄色い壁を背に喜ぶ女性
  7. 腕を交差させる草原に座った男性
  8. local by flywheel
  9. カレンダー
  10. 海を背景にフレームを持つ女性の手

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

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

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

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

    WEB

    横並びさせた要素の端のマージンを調整する方法
  2. 黄色い壁を背に喜ぶ女性

    WEB

    画像圧縮なら『TinyPNG』、使い方とその実力を検証します
  3. 腕を交差させる草原に座った男性

    WEB

    データベース内の文字列の書き換えに便利な『Search Replace DB』の…
  4. 空にかざした水晶

    WEB

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

    WEB

    記事内にソースコードを表示する『Crayon Syntax Highlighte…
PAGE TOP