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アニメーションも設定可能なので、ぜひチャレンジしてみてください。

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

実は…のお話

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

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

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

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

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

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

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

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

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

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

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

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

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

Requ.log | レク.ログ

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

ピックアップ記事

  1. ゆっくり、フシギな色変化。GIFアニメを使った目を引くサイトロゴの作り方
  2. 【応用編】スケジュール・タスク管理の大黒柱。万能ツールTodoistの使い方を徹…
  3. サイトを彩る直感設定。WordPressTCDテーマ「オリジナルウィジェット…
  4. ”ブログにおいしい”、注釈画像の作り方。矢印や枠線、文字を追加しよう
  5. カッコ美しい、オリジナルシェアボタン。サイトデザインに合わせた作り方と簡単カスタ…

関連記事

  1. retina-os-solution_ecmg

    ワードプレス

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

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

  2. compress-jpeg-png-images_ecrt

    ワードプレス

    きれいにしっかり画像圧縮。WordPressプラグインCompress JPEG & PNG ima…

    どうせ圧縮するなら、きれいにしっかり。WEBサイトで表示されている…

  3. blog-theme-mag_ecmg-ps

    ワードプレス

    【使用者レビュー】WordPress初心者にこそおすすめのブログテーマ、TCD「MAG」のデフォルト…

    本当のことを話します。ワードプレスのブログテーマ【MAG】。このサ…

  4. todoist-constitution_ec

    マネジメント

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

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

  5. browzer-extension_ec

    ワードプレス

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

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

  6. annotation-image_ecmg

    ワードプレス

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

    注釈画像も、自由自在。前回までの記事では、Screenpres…

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

特集記事

  1. display-speed_ec
  2. improvement-flow_ecmg
  3. todoist_ec
  4. valuable-content-from-image_ec
  5. tcd-mag_ecmg-ps
  6. business-books_ecmg
  7. extension-tools-for-bloggers_ec
  8. theme-change_ecrt

ピックアップ記事

  1. tcd-css-customize_ecmg
  2. gif-animation_ec
  3. phrase-express_ecmg
  4. compress-jpeg-png-images_ecrt
  5. todoist-basic_ec-ps
  6. like-button-card_ecmg-ps
  7. tcd-theme-options_ecmg
  8. todoist-productivity_ecmg

強みを見つけて、活かしていこう。

business-books

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

todoist

掘り出し記事

  1. analytics-ip-filter_ecmg
  2. retina-text-widget_ecrt
  3. screenpresso-initial-setting_ec

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

tcd-mag

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

retina-os-solution

ピックアップ記事

  1. annotation-image_ecmg
  2. customized-theme-update_ecmg-1-ps
  3. widgetoon-js-count-jsoon_ecmg

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

gif-animation

とっておきのWordPressテーマ。

tcd-theme-selection

最近の記事

  1. customized-theme-update_ecmg-1-ps
  2. mergely-ecmg
  3. child-theme-mechanism_ecmg-ps

Requ.log | おすすめ書籍

「言葉にできる」は武器になる。 プロフェッショナルは「ストーリー」で伝える

Requ.log | おすすめ物語

モモ マリコ/マリキータ

Requ.log | WordPress Theme

WordPressテーマ「MAG(TCD036)」

思考・価値感系ピックアップ記事

  1. blog-contents_ecrt
  2. restriction_ecmg-ps
  3. reset-button_ecrt
  1. tcd-theme-selection_ecmg-ps

    ワードプレス

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

    ワードプレス

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

    マネジメント

    いつでもどこでも即タスク化。Todoistの便利すぎる拡張機能4選
  4. display-speed_ec

    ワードプレス

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

    ブログ

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