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. 実践あるのみ!TCDテーマで学ぶ、記事装飾の簡単カスタマイズとCSSの基本
  2. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…
  3. 「忙しくてやりたいことができない・・!」に効く。マイペースに習慣を変えるタスク管…
  4. アレ?Chromeの表示文字、汚なくなった!? 変わったフォントを1分で取り戻そ…
  5. ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方…

関連記事

  1. gif-animation_ec

    WEBデザイン

    ゆっくりじわじわ、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方

    色が変わるサイトロゴを簡単に。休むことなく働き続ける、一生懸命な画…

  2. feedly-count-problem_ecmg

    ワードプレス

    feedlyのフォロワー数が表示されないっ!?SNS Count Cacheのキャッシュ進捗「部分的…

    怪奇現象と、ある研究者の記録。私は街はずれの湖のさらに奥にある…

  3. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方

    記事を見栄えよく、伝わりやすく。ブログ記事を書き始めると、分からな…

  4. description-video_ec
  5. analytics-ip-filter-ecmg
  6. switch-by-the-device_ecmg
【Requ.log記事】魅力的なブログを、今すぐ作る。
tcd-mag
【Requ.log記事】魅力を活かす、カスタマイズまとめ。
tcd-mag

特集記事

  1. display-speed_ec
  2. todoist-extension_ecmg
  3. tcd-mag_ecmg-ps
  4. valuable-content-from-image_ec
  5. retina_ecmg
  6. tcd-theme-selection_ecmg-ps

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

todoist

人気記事

  1. todoist-basic_ec-ps
  2. child-theme_ecmg
  3. jpg-gif-png_ecmg
  4. chrome-font_ecmg
  5. chrome-full-screen-capture-ecmg
  6. compress-jpeg-png-images-ecmg

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

tcd-mag

ピックアップ記事

  1. dash_ecmg
  2. annotation-image-ecmg
  3. chrome-full-screen-capture-ecmg
  4. todoist-routine_ecrt
  5. enlarge-image-ecmg
  6. child-theme_ecmg

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

retina-os-solution

掘り出し記事

  1. LightShot-Screenpresso_ecmg
  2. meta-seo-inspector_ecmg
  3. browzer-extension_ec
  4. todoist-design_ec
  5. mailbox-goodbye-newapp_ec
  6. mergely-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. like-button-card_ecmg-ps
  2. lightshot_ecmg
  3. annotation-image-ecmg
  4. phrase-express_ecmg
  5. todoist-basic_ec-ps
  6. spark-tutorial-ecmg

CATEGORIES

Requ.log | Recommend

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

特集記事

  1. todoist-tips_ecmg
  2. todoist_ec
  3. tcd-theme-selection_ecmg-ps
  4. tcd-theme-user-review_ecmg
  5. improvement-flow_ecmg
  6. theme-change_ecrt

人気記事

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

最近の記事

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

    ワードプレス

    TCDテーマの強みとは?他テーマとの違いと基本機能をユーザー目線でレビュー
  2. tcd-theme-selection_ecmg-ps

    ワードプレス

    【目的別】とっておきのWordPressテーマ比較。TCDテーマのおすすめメンバ…
  3. display-speed_ec

    ワードプレス

    目指せ軽量化!今からでも始めるべき、WordPressサイトの表示スピード改善計…
  4. valuable-content-from-image_ec

    ワードプレス

    「わかりやすいブログ」に必須の「伝わりやすい画像」の作り方
  5. adjust-the-button_ecmg

    ワードプレス

    【実例集】細部の余白まで美しく。オリジナルシェアボタンのデザイン変更と調整方法
PAGE TOP