retina-logo_ec

ワードプレス

【Retinaディスプレイ対応4】サイトの顔も綺麗に。TCDテーマなら3ステップで完了する、ロゴ画像の解像度アップ

このサイトでは最上部にロゴを配置しています。Windowsだけでなく、MacのRetinaディスプレイで見ても綺麗に表示されているのが確認できるでしょう。

requlog_logo

そう、WEBサイトの顔とも言えるサイトロゴだって、Retina対応したい。どんな環境で見られても、綺麗でいてほしい・・・そんな親心だって生まれてくるものです。・・生まれますよね?

というわけで今回は、サイトロゴの解像度を上げ、Retinaをはじめ高解像度化していくディスプレイでも見劣りしない設定方法を紹介します。

今回の設定は使用しているテーマにより対応方法が異なってくるものです。私は「TCDテーマ」を利用していますが、他のテーマをご利用の際はあくまで参考として下さい。

 関連記事

1.テーマオプションでロゴをアップロード

TCDテーマでは直観的にサイトをデザイン出来てしまう、「テーマオプション」を備えています。そこではロゴも簡単に設置できてしまうので助かりますよね。今回は表示させたい大きさより2倍のサイズの画像をアップロードします

WordPress管理画面「外観」→「テーマオプション」→「ロゴの設定」へ。

今回は最終的に幅×高さ=150×74ピクセルで表示させたいので、倍サイズの300×148ピクセルの画像をアップロード。

retina-logo_01

はい、ステップ1完了。

バックアップもしておこう

でたーphpファイル。こーゆーのいじるの、コワイんすよねー・・・

その気持ち、ものすごく分かります。
でも大丈夫。今回は元々あった記述を「消す」ことはありません。「追記」するだけです。しかも見慣れた記述をほんのちょっとだけ。早速いってみましょう。

簡単な記述ですが、バックアップは必ずとるようにしてください。サーバーから現状のものをダウンロード、またはテキストとして全記述をコピーしておくのも気軽な手段です。

 バックアップ参考

2.header-logo.phpに追記

サーバー上にあるファイルに直接追記してもOKですが、ここではもっと気軽な方法で。WordPress管理画面「外観」→「テーマの編集」→右カラムに並ぶテンプレートから「header-logo.php」を選択します。

retina-logo_02

追記箇所

追記をする部分は以下の枠内。(※以降の画像はクリックで拡大されます。)

retina-logo_03

私のテーマの場合は17行目あたりにありました。下記画像のカーソル部分に追記します。

retina-logo_04

retina-logo_05

追記したのは反転させている青色部分。
_width=”150″ height=”74″です。(最初の「_」は半角スペースの意味)
ここで表示させたい幅と高さを指定するだけで終了です。

注意点

(念のため)半角スペースを忘れない 

retina-logo_06

width=”150px”のように「px」を付けない。

ソースコードもBefore & Afterを載せておきます。コピーの際は下記をご利用ください。
環境によっては、記事本文からコピーすると、半角の「”」が全角になってしまったりと「アブナイ要素」が満載です

Before

echo '<h1 id="logo_image" style="top:' . $position_top . 'px; left:' . $option['logoleft'] . 'px;"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" /></a></h1>' . "\n";

After

echo '<h1 id="logo_image" style="top:' . $position_top . 'px; left:' . $option['logoleft'] . 'px;"><a href=" ' . $url . '/" title="' . $title . '" data-label="' . $title . '"><img src="' . $logo['url'] . '?' . time() . '" alt="' . $title . '" title="' . $title . '" width="ここに任意の横幅(※数値のみ)" height="ここに任意の縦幅(※数値のみ)" /></a></h1>' . "\n";

ステップ2完了。

ロゴの位置調整が必要ないテーマではここまでで終了!

3.ロゴの位置を調整する

最初に画像をアップロードした「テーマオプション」内「ロゴの設定」に入ります。

設定画面内「位置の調整」セクションでは、アップロードした2倍サイズの画像がそのまま表示されています。

retina-logo_07

アレ?うまくいかなかった!?
と一瞬不安になるかもしれませんが、実際のサイトでの表示は・・・

retina-logo_08

よしよし。うまくいってますね。半分のサイズにギュッ!と凝縮表示されています。このように「位置の調整」セクションでの表示と実際の表示サイズが違うので、サイト表示と見比べながらの調整が必要ですが、ドラッグで位置調整できる直感操作のおかげであっという間です。

ステップ3完了。

以上です。これでMacでも美しく表示されますね。実際にやってみるとあっという間の作業です。このサイトのロゴのようにGIFアニメーションも設定可能なので、ぜひチャレンジしてみてください。(モバイル閲覧時は静止画を表示させています)

実は・・・のお話

今回、Retina対応の一連記事を紹介するにあたり独自に検証してきた中で、この「ロゴの高解像度化」だけは、実はどうしても行き詰まってしまっていました。ひたすら検索して調べたり、それなりに思い当たる箇所を修正してみたり・・・

随分と試行錯誤をした結果、私がとった行動は…ダメもとで、テーマ制作元のデザインプラスさんに問い合わせてみるという暴挙です。普通に考えれば「テーマをいじる」なんてサポート対象外。本当にダメもとでした。

するとなんと・・・回答してくれたのです!(しかも翌日に…)

TCDテーマ利用者には「TCD LABO 」という力強い味方がいます。「WordPressテーマTCDのカスタマイズを研究するサイト」と銘打った、デザインプラスさんがオフィシャルで運営するWEBサイトです。

「普通ならサポート外でしょコレ…」というカスタマイズ方法まで公開されているのですが、私がモンモンと調べていた当初、今回紹介したロゴのカスタマイズに関してはそこでも触れられていませんでした。

そして後から覗いてみてびっくり。回答を頂いたその日に、もう対策記事がアップされていたのです。【対応】というタグ付きで・・

ロゴ画像をretinaディスプレイ対応にする - TCD LABO

そんな経緯もあり、実際に取り組み成功した証として、今回の「Retina対応化一連記事」にも組み込ませていただきました。

しかし…日々問い合わせに溢れているだろう中、今回のような対応をしてくださったこと、そんな問い合わせたちから拾い上げた対応策までを「TCD LABO」で公開すること。きっと想像を絶する大変な作業ですよね。しかも次々と発表しているテーマごとの対応策を公開しているという…感謝の気持ちとともに、見習うべき姿勢を垣間見た一件でした。

今回ご対応頂けたのはあくまで運が良かったのだと思っています。この話は、いつも同じように対応して頂けることを保証するものではありません。
記事公開当初とは違い、現在では一部のテーマでは設定方法が異なるようです。「AGENT」「LAW」「AMORE」「STORY」をお使いの方は上記TCD LABOより検索下さい。

関連記事

スポンサーリンク

記事が気に入ったら
Requ.logを "いいね!"
Facebookで更新情報をお届け。

Requ.log | レク.ログ

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

ピックアップ記事

  1. 【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「…
  2. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…
  3. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  4. メディア問題さん、さようなら。画像サイズを気ままに追加するプラグイン「Simpl…
  5. TodoistでToDoリスト。プロジェクトやタスクの階層化で頭の中を楽にする

関連記事

  1. tcd-css-customize_ecmg

    ワードプレス

    実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本

    初心者のうちに、実践で学ぶ。初心者にとって避けて通りたい・・避けた…

  2. browzer-extension_ec

    ワードプレス

    なんでも計測!”WEBサイズマスター”へ。Chrome拡張「Page Ruler Redux」「Vi…

    自分のWEBサイトの幅、知ってますか?今自分が見ているページの「あ…

  3. annotation-image-ecmg

    ワードプレス

    ”ブログにおいしい”、注釈画像の作り方。Screenpressoで矢印や枠線、文字を追加しよう

    注釈画像も、自由自在。前回までの記事では、Windows用の万能ツ…

  4. favicon-generator_ecmg

    ワードプレス

    ファビコン表示を一括設定。WordPressプラグイン「Favicon by RealFavicon…

    WEB上で見かける、ハイセンスなアイツ。名前は通称「ファビコン…

  5. meta-seo-inspector_ecmg

    マーケティング

    基本的なSEOチェックに。DescriptionやOGPを確認できるChrome拡張META SEO…

    せっかく設定したなら、チェックしよう。メタタイトル、メタディスクリ…

  6. ad-placement-in-mag_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. adjust-the-button_ecmg
  3. display-speed_ec
  4. retina_ecmg
  5. todoist_ec
  6. valuable-content-from-image_ec

タスク管理で、自己管理。

todoist

人気記事

  1. compress-jpeg-png-images-ecmg
  2. chrome-full-screen-capture-ecmg
  3. child-theme_ecmg
  4. media-setting_ec
  5. child-theme-mechanism_ecmg-ps
  6. chrome-font_ecmg-1

魅力的なブログを、今すぐ作る。

tcd-mag

ピックアップ記事

  1. jpg-gif-png_ecmg
  2. compress-jpeg-png-images-ecmg
  3. facebook-fast-display_ecmg
  4. lightshot_ecmg
  5. todoist-advanced_ec
  6. child-theme_ecmg

ブログのRetina対応、始めませんか?

retina-os-solution

掘り出し記事

  1. analytics-ip-filter-ecmg
  2. screenpresso-initial-setting_ec
  3. unroll-me_ec
  4. backup-all-in-auto_ec
  5. todoist-re-schedule_ec
  6. screenpresso-capture-ecmg

ゆっくり、フシギなGIFアニメ。

gif-animation

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg

とっておきのWordPressテーマ。

tcd-theme-selection

ピックアップ記事

  1. quicktag_ecmg
  2. enlarge-image-ecmg
  3. gif-animation_ec
  4. jpg-gif-png_ecmg
  5. like-button-card_ecmg-ps
  6. spark-tutorial-ecmg

CATEGORIES

Requ.log | Recommend

WordPressテーマ「MAG(TCD036)」
WordPressテーマ「Bloom(TCD053)」

特集記事

  1. retina_ecmg
  2. todoist-tips_ecmg
  3. adjust-the-button_ecmg
  4. theme-change_ecrt
  5. todoist_ec
  6. display-speed_ec

人気記事

  1. compress-jpeg-png-images-ecmg
  2. media-setting_ec
  3. chrome-full-screen-capture-ecmg
  4. screenpresso-initial-setting_ec
  5. chrome-font_ecmg-1
  6. jpg-gif-png_ecmg
  7. child-theme_ecmg

最近の記事

  1. firefox-full-screen-capture-ecmg
  2. chrome-full-screen-capture-ecmg
  3. enlarge-image-ecmg
  4. spark-tutorial-ecmg
  1. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  2. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個の…
  3. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  4. tcd-mag_ecmg-ps

    ワードプレス

    魅力的なブログで収益化。ワードプレステーマTCD【MAG】の有効的な活用方法とカ…
  5. theme-change_ecrt

    ワードプレス

    【徹底検証】乗り換えたいでしょ?WordPressTCDテーマの変更方法と注意点…
PAGE TOP