• Topページのタブ一覧から、新着記事及び各カテゴリーの最新8記事が閲覧できます(過去記事はブログ全記事または、カテゴリーからご覧くださいませ☆)
  • [広告](補足

【WordPress】TCDテーマオプションを利用したロゴ画像のRetinaディスプレイ対応手順 [IT備忘録]

IT・ブログ関連

こんにちは。ふわりです♪
IT備忘録「WordPress」編。今回はTCDのWordPressテーマ「Muum」オプションを利用したロゴ画像のRetina(レティナ)ディスプレイ対応手順です。
私の環境はPCがWindows & スマートフォンがAndroidのため、現段階ではRetinaディスプレイでの表示確認はできておりませんが、同環境ではキレイに表示されるようになりましたので、ヘッダーロゴ画像(モバイル用)の例で手順を書きます。
同テーマやRetinaディスプレイ対応のTCDテーマをご利用中の方、TCDテーマの利用を検討中の方の何か参考になれば幸いです(^^)

はじめに:私のPC & スマートフォン環境

1. ウェブサイトの画像やロゴがぼやけて見える原因

通常等倍で表示されていた画像が、2倍のピクセルを持つRetinaディスプレイでは画像の縦横が2倍に引き伸ばされて表示される
出典:ワードプレステーマTCD > Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法

※ Retinaディスプレイについて詳しくは出典元のTCDサイトをご覧くださいね

2. 対策

Retinaディスプレイ対応のTCDテーマを利用している場合

avatar

2ステップのみ♪

  1. 縦横のサイズを旧ロゴ画像の倍にした新ロゴ画像を用意
  2. 用意した画像をサーバーにアップロードし、TCDテーマオプション「レティナディスプレイ用の画像を利用する」にチェックを入れて設定を保存すればOK!

※ 私が使用しているTCDのWordPressテーマ「Muum」には、オプション機能としてこちらの機能がついています

その他の対策方法

TCDサイト「Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法:Retina対応のWebサイトを制作する際の対策」や、その他のサイトをご参照ください。

3. 手順(モバイル用画像)

ではここから、姉妹ブログ「日本酒に愛された女」のヘッダーロゴ画像(モバイル用)の例で手順を書きます♪

(1) ロゴ画像を用意

A. ロゴ画像のファイル形式

ロゴ画像のファイル形式は、背景透過PNG画像が推奨されています。
※ 今回から私も「JPG」ではなく「背景透過PNG」に変更しました

B. ロゴ画像サイズ

Retinaディスプレイ対応を行うため、縦横のサイズは旧ロゴ画像の倍にします。
例)旧ロゴサイズ:280*50px → 新ロゴサイズ:560*100px

旧ロゴサイズ:280*50px(JPEG)
新ロゴサイズ:560*100px(PNG)
ご参考:グレーのキャンバスに新旧ロゴを左寄せ・上下に並べた際の見え方

avatar

新ロゴだけ透過して背景色のグレーが見えますね

(2) 画像をサーバーにアップロードし「レティナディスプレイ用の画像を利用する」にチェック

  1. WordPressのTCDテーマを開き、TCDオプション:ヘッダー > ヘッダーロゴをクリック

  2. ロゴのタイプ:画像を使うを選択

  3. ロゴ画像

    • 画像(モバイル用):画像を選択するをクリックし、用意した画像をサーバーにアップロード
    • レティナディスプレイ:レティナディスプレイ用の画像を利用するにチェックを入れる
    • 設定を保存をクリック

avatar

これで設定完了ですっ(^^)/

ご参考)新旧ロゴの見え方比較:ビフォアアフター

ご参考まで、Androidスマートフォンのスクリーンショットで新旧ロゴの見え方を比較してみますね♪

補足
後日、iPhoneやMacを持っている人に会った時に、実際どのようにRetinaディスプレイでは見えるのか確認させてもらう予定です。

ビフォア:旧ロゴ

アフター:新ロゴ

avatar

わぁ!全然違う~♪

ぼんやりしていたロゴがクッキリしました☆
ヘッダーロゴ画像(PC用)もRetinaディスプレイ対応しました。よろしければそちらもご確認くださいね♪
日本酒に愛された女

余談:以前一度設定しようとして失敗しました(^^;

2023年春にブログ引っ越し & TCDテーマも変更。なんだかロゴ画像がぼんやりしていることに気付き、TCDテーマのオプションで出来そうなので設定したところ、スマートフォン上で画像がはみ出し慌てて戻しました(^^;
今回Retinaディスプレイの意味を調べてからもう一度ゆっくり記事を読んだところ、「レティナディスプレイ用の画像を利用する」にチェックを入れていなかったのが原因でした(^^; ちゃんと仕組みを理解して落ち着いて対応しようと反省っ!

さいごに

クッキリハッキリ見えるロゴが嬉しくて、無駄に何度もブログのトップページを開いてしまいます(笑)こういうオプション機能があるとほんと助かりますね☆
もし、WordPressテーマ「Muum」やその他TCDの対応テーマでまだ対応されていない方がいらっしゃいましたら、とても簡単でしたのでぜひトライしてみてくださいね♪ 
では、また~(^^)/

参考サイト

ワードプレステーマTCD > Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法

関連記事

WordPressに関する記事一覧

関連ブログ

姉妹ブログ「日本酒に愛された女

ふわり

ふわり

お花大好きふわりです♪ SONY 7IIで撮ったお花や自然の写真、ナチュラルライフ、ガーデニング、国内旅行etc... についてつづります(^^)

関連記事

ピックアップ記事

カテゴリー

週間ランキングTop10

  1. 1

    Microsoft Wordで文章を入力中に文字が少し下がる時の解決方法 [IT備忘録]

  2. 2

    手作り化粧水:グリセリンと水だけで作れます♪【ナチュラルライフ】

  3. 3

    予算5万円で缶コーヒーより軽い高級コンデジを発見!Canon PowerShot G9 X MarkII

  4. 4

    白色ワセリンとエッセンシャルオイル(精油)で作るハンドクリーム

  5. 5

    【カメラバックパック探し】一泊二日撮影旅行用 オールシーズン快適に背負えるものはあるかしら?

  6. 6

    ヤマハぷりんと楽譜:すぐに1曲から楽譜を購入しダウンロードできて便利♪(レビュー)

  7. 7

    手作りのクエン酸柔軟剤で合成香料の不快感とさようなら♪ 【ナチュラルライフ】

  8. 8

    ヨーグルトメーカー ビタントニオ [VYG-11] はオシャレで簡単にヨーグルトが作れて魔法使いになった気分が味わえます♪【レビュー】

  9. 9

    【CyberLink】すんなりアカウントを削除できなかった原因と2つの解決方法、アカウント削除手順 [IT備忘録]

  10. 10

    ヨーグルトメーカーで初めての豆乳ヨーグルト作り

最近の記事 Natural Life モンステラ
  1. 【お散歩写真】新井薬師梅照院:しだれ梅と早咲きの桜 [2024年2月](東京都新宿区)

  2. 精油(エッセンシャルオイル)木製収納ケース[6本用]【レビュー】

  3. 【お散歩写真】染の小道2024 [2024年2月](東京都新宿区)

  4. 【レンズ作例】SEL50F14GM:感覚確認用として13分間でサクッ!と撮影した作例15枚 (12月の山手イタリア山庭園)

  5. 染の小道2019:染め物で彩られた中井の街をお散歩しながら撮った写真17枚 [2019年2月](東京都新宿区)

  6. 山下公園の林で咲くユキヤナギの写真6枚 [2022年3月] 機材:SONY α7II + SEL90M28G(神奈川県横浜市)

  7. 池上梅園はいろんな角度から梅を楽しめるステキな場所(東京都大田区)

  8. 【イタリアンパセリ】栽培記録3. 植え替え1か月後から初収穫まで [2024年1月-2月]

  9. 国営昭和記念公園の2種類の原種シクラメン:2018年春と2019年秋に撮影した写真10枚

  10. 山下公園で出会えたクリスマスローズの写真9枚 [2022年3月] 機材:SONY α7II + SEL90M28G

  1. ミヨシ石鹸 無添加お肌のための洗濯用液体せっけん:これ1つで食器も体も洗っています【ナチュラルライフ】

  2. パックスナチュロンオイル:化粧水のあとはこれ1本でOK!全身に使えます【ナチュラルライフ】

  3. インセントのアロマシャワーは安全な芳香消臭アロマスプレー【ナチュラルライフ】

  4. 【レビュー】ナチュラグラッセ メイクアップクリームN:つややかで肌が楽なUVカット下地クリーム

  5. コジット カッサリフトプレートで顔のコリをほぐしてリラックスしましょ【フェイスケア】【ナチュラルライフ】

  6. アルカリ電解水クリーナー(激落ちくん)でレンジフード掃除が楽にキレイに♪【ナチュラルライフ】

  7. 3年8か月続いている手作りアロマスプレー:精油と無水エタノールで簡単に作れて体に優しくコスパ良し【ナチュラルライフ】

  8. 手作りの炭酸入浴剤でゆっくり疲れを癒やしませんか?【ナチュラルライフ】

  9. 【ナチュラルフード】マルドン シーソルト:まろやかな旨味が美味しくミネラルも摂れます♪ソテーの仕上げにオススメ☆

  10. 手作り化粧水:グリセリンと水だけで作れます♪【ナチュラルライフ】

  1. モンステラの挿し木と茎伏せに初挑戦(8) 約7カ月半後に行った親株の植え替え [2022年5月]【栽培記録】

  2. モンステラの挿し木と茎伏せに初挑戦(7) 約7カ月半後に行った挿し木と茎伏せの鉢上げ [2022年5月]【栽培記録】

  3. モンステラの挿し木と茎伏せに初挑戦(6) 67日目~植え替え直前の212日目までの栽培記録:親株と茎伏せ編 (2021年11月~2022年4月)

  4. モンステラの挿し木と茎伏せに初挑戦(5) 67日目~植え替え直前の212日目までの栽培記録:挿し木編 (2021年11月~2022年4月)

  5. モンステラの挿し木と茎伏せに初挑戦(4) 2か月間の栽培記録:親株編(2021年9月~11月)

  6. モンステラの挿し木と茎伏せに初挑戦(3) 植え付け後2か月間の栽培記録:茎伏せ編 (2021年9月~11月)

  7. モンステラの挿し木と茎伏せに初挑戦(2) 植え付け後2か月間の栽培記録:挿し木編 (2021年9月~11月)

  8. モンステラの挿し木と茎伏せに初挑戦(1) モンステラのカットから植え付けまで [2021年9月]【栽培記録】

楽天トラベルのバナー
フェリシモ「コレクション」

ブログ作成環境

TOP