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. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…
  2. 「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡…
  3. 便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cac…
  4. ポチッ、でビョイーン。クリックで画像を拡大表示させるワードプレスプラグイン「Ea…
  5. WordPressで子テーマを作る際に知っておくべき仕組みと注意点

関連記事

  1. retina-os-solution_ecmg

    ワードプレス

    【Retinaディスプレイ対応1】Macで綺麗に。Windowsでサクサク。ブログ画像をOSごとに適…

    簡単に、美しく。ページ表示速度の観点で考えると、画像においてはでき…

  2. lightshot_ecmg

    ブログ

    Windows?Mac?なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightSh…

    ”気軽な”先輩をウマく使おう。それなりに融通のきくMacのスクリー…

  3. sns-count-cache_ecmg2

    ワードプレス

    便利すぎて、もうヤミツキ。WordPressプラグインSNS Count Cacheの設定方法と有効…

    必要な設定だけにフォーカス。「ページを表示するたびに、今のシェア数…

  4. extension-tools-for-bloggers_ec

    ブログ

    【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底上げに役立つ10個のツール

    知らなきゃもったいない。先日、とある交差点で信号待ちをしていた時の…

  5. chrome-full-screen-capture-ecmg

    ブログ

    ChromeでWEBページ全体をフルスクリーンショット!見ているページの全画面キャプチャー画像をダウ…

    上から下までの、全体像をゲット。たった今見ている「WEBページ全体…

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

特集記事

  1. tcd-mag_ecmg-ps
  2. adjust-the-button_ecmg
  3. todoist-tips_ecmg
  4. tcd-theme-user-review_ecmg
  5. retina_ecmg
  6. improvement-flow_ecmg

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

todoist

ピックアップ記事

  1. gif-animation_ec
  2. unroll-me_ec
  3. original-share-button_ecmg-ps
  4. annotation-image-ecmg
  5. todoist-constitution_ec
  6. media-setting_ec

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

tcd-mag

掘り出し記事

  1. pushbullet_ec
  2. favicon-generator_ecmg
  3. screenpresso-capture-ecmg
  4. retina-weight-saving_ecmg
  5. backup-all-in-auto_ec
  6. insert-card-link_ecmg

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

retina-os-solution

ピックアップ記事

  1. quicktag_ecmg
  2. firefox-full-screen-capture-ecmg
  3. chrome-full-screen-capture-ecmg
  4. tcd-css-customize_ecmg
  5. enlarge-image-ecmg
  6. gif-animation_ec

ゆっくり、フシギな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. lightshot_ecmg
  2. annotation-image-ecmg
  3. child-theme-mechanism_ecmg-ps
  4. sns-count-cache_ecmg2
  5. intuitive-custom-post-order_ec
  6. todoist-routine_ecrt

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. tcd-theme-selection_ecmg-ps
  2. improvement-flow_ecmg
  3. adjust-the-button_ecmg
  4. retina_ecmg
  5. valuable-content-from-image_ec
  6. extension-tools-for-bloggers_ec

ピックアップ記事

  1. spark-tutorial-ecmg
  2. sns-count-cache_ecmg2
  3. todoist-productivity_ecmg
  4. todoist-routine_ecrt
  5. todoist-basic_ec-ps
  6. tcd-theme-options_ecmg

最近の記事

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

    ブログ

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

    ワードプレス

    【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetina…
  3. tcd-theme-user-review_ecmg

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  4. todoist-tips_ecmg

    マネジメント

    【小技特集】もっと使いこなす!おすすめタスク管理ツールTodoistの活用法12…
  5. tcd-mag_ecmg-ps

    ワードプレス

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