• 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

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

  4. 4

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

  5. 5

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

  6. 6

    【Windows11】スクロールバーを常に太い状態で表示する方法

  7. 7

    【暑さ対策】屋外編:バルコニーにサンシェードを取り付けて窓から入る日差しと熱を遮ろう!

  8. 8

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

  9. 9

    重曹とアルミホイルでシルバーアクセサリーの黒ずみを落とす方法【ナチュラルライフ】

  10. 10

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

最近の記事 Natural Life モンステラ
  1. 【レビュー & 開封の儀】Loop Quiet 耳栓で工事と睡眠時の騒音が軽減され楽になりました♪

  2. 【お散歩写真】本土寺の紫陽花:清々しい空気の中で紫陽花を愛でる [2019年6月](千葉県松戸市)

  3. 【お散歩写真】山下公園の紫陽花 [2024年6月](神奈川県横浜市)機材:SONY α7II + SEL90M28G

  4. 【お散歩写真】多摩川台公園の紫陽花 [2016年5月](東京都大田区)

  5. 【お散歩写真】多摩川台公園のビヨウヤナギ(未央柳) [2016年5月](東京都大田区)

  6. 【お散歩写真】多摩川台公園の猫じゃらしやお花 [2016年5月](東京都大田区)

  7. 【栽培記録】レウイシア(3) 季節外れの開花(2021年8月~2022年2月)

  8. 【関口シンゴ】「tender」発売記念 インストアライブ+サイン会(2023年12月)

  9. 【徒然】多摩川を眺めていたらメッセージを受け取ったような気がしたお話し(自問自答)

  10. 【ガジュマル】3鉢目のガジュマル:2022年9月に挿し木した様子から2024年6月の植え替えと剪定までの栽培記録

  1. 粉石けんと精油で作る食器用洗剤【ナチュラルライフ】

  2. 手作りハンドクリームの詰め替え容器3mlは携帯に便利【レビュー】

  3. 12年間で使用してきたナチュラル洗濯洗剤7点 [2011年~2023年]【ナチュラルライフ】

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

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

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

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

  8. 【UVケア】ナチュラグラッセ UVプロテクションベースN:オールシーズン肌を守ってくれる強い味方☆【レビュー】

  9. 重曹とアルミホイルでシルバーアクセサリーの黒ずみを落とす方法【ナチュラルライフ】

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

  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