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完了。

2.header-logo.phpに追記

「でたー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を載せておきます。コピーの際は下記をご利用ください。
環境によっては、記事本文からコピーすると、半角の「”」が全角になってしまったりと「アブナイ要素」が満載です

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";
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_linkcardrt

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

実は…のお話

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

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

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

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

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

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

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

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

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

今回ご対応頂けたのはあくまで運が良かったのだと思っています。この話は、いつも同じように対応して頂けることを保証するものではありません。
 関連記事

【保存版】知ったら戻れない、美しさの極みへ。WordPress画像のRetinaディスプレイ対応方法

魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MAG】の有効的な活用方法とカスタマイズまとめ

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

Requ.log | レク.ログ

スポンサーリンク
スポンサーリンク
WordPressテーマ「MAG(TCD036)」

ピックアップ記事

  1. 仕事に時間をとられ、何もやる気がでない時。がんじがらめ感をスカッ!と解消するモチ…
  2. “知っているつもり”の拡張子、jpg gif png。画…
  3. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  4. アレ?Chromeの表示文字、汚なくなった!? キレイなフォントを1分で取り戻そ…
  5. あっという間に仕事効率化。ブログにも使えるMac定型文ツール「Dash」の設定方…

関連記事

  1. tcd-mag_ecmg
  2. retina-weight-saving_ecmg
  3. browzer-extension_ec

    ワードプレス

    ”WEBサイズマスター”へ。Chrome拡張「Page Ruler」「View Image Info…

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

  4. backwpup-japanese_ec

    ワードプレス

    アップデートで英語化された!?BackWPupをサクッと日本語化する方法

    アップデートしたら、設定画面が英語化された!? 2…

  5. show-title-tag_ecmg

    マーケティング

    もっと・・見せてくれませんか?タブに隠れた見えないタイトル。Show Title Tagを使って全表…

    ちょっと見せてるぐらいなら・・全部見せてください。誤解しないで。ブ…

  6. todoist-constitution_ec

    マネジメント

    ブロガー以外も知っておきたい。ブログ記事の書き方と、頭を整理する構成方法

    ストレスフリーで効率的な下準備。いざ記事を書こうとしても、すぐに手…

スポンサーリンク
魅力的なブログを、今すぐ作る。
tcd-mag

Requ.Sound Lab. | レク.サウンドラボ

レク.サウンドラボ

音に、景色と”振る舞い”を。

特集記事

  1. todoist_ec
  2. valuable-content-from-image_ec
  3. tcd-theme-selection_ecmg
  4. improvement-flow_ecmg
  5. extension-tools-for-bloggers_ec
  6. adjust-the-button_ecmg
  7. business-books_ecmg
  8. tcd-mag_ecmg
  9. display-speed_ec
  10. todoist-extension_ecmg

ピックアップ記事

  1. media-setting_ec
  2. restriction_ecmg
  3. dash_ecmg
  4. phrase-express_ecmg
  5. original-share-button_ecmg
  6. blog-contents_ecrt
  7. todoist-constitution_ec
  8. sns-count-cache_ecmg
  9. tcd-theme-widget_ecmg
  10. child-theme_ecmg

強みを見つけて、活かしていくために。

business-books

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

todoist

おすすめ記事

  1. Screenpresso(スクリーンプレッソ)を使うなら、や…
  2. 自分のアクセス痕は残さない。アナリティクスのフィルタで自宅の…
  3. 【Retinaディスプレイ対応2】スリムで美しいブログを実現…
  4. 「Mailboxの代わりは・・?」代替メールアプリ最有力。S…
  5. feedlyのフォロワー数が表示されないっ!?SNS Cou…

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

tcd-mag

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

retina-os-solution

最近の記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. タスクに、日時や曜日が勝手に反映される・・!?Todoist…
  3. 魅力的なブログを今すぐ作れる。ワードプレステーマTCD【MA…
  4. MAGのデザインをフル活用。PCとスマホの広告設置枠を自由に…
  5. 移動したいデスカ?TCDテーマMAGでダブルレクタングル広告…

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

特集記事

  1. 【小技特集】もっと使いこなす!おすすめタスク管理ツールTod…
  2. 【徹底検証】乗り換えたいでしょ?WordPressTCDテー…
  3. 【作業順まとめ】ブログを彩る!記事作りが捗る!クオリティー底…
  4. TCDテーマ導入前に知っておきたい、2つの注目機能とユーザー…
  5. 目指せ軽量化!今から始める、WordPressサイトの表示ス…

Requ.log | おすすめビジネス書

コンテンツの秘密-ぼくがジブリで考えたこと 「言葉にできる」は武器になる。
プロフェッショナルは「ストーリー」で伝える 日本人の知らなかったフリーエージェント起業術

Requ.log | おすすめ物語

モモ マリコ/マリキータ
なんくるない たったひとつの冴えたやりかた

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」
  1. tcd-theme-selection_ecmg

    ワードプレス

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

    マネジメント

    最低限習得しておきたい自己管理術。忙しくても、頭と心は軽くしておく生活改善フロー…
  3. theme-change_ecrt

    ワードプレス

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

    ワードプレス

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

    ワードプレス

    『伝わりやすいブログ』を作るには?画像で届ける価値あるコンテンツ
PAGE TOP