アミアンインターナショナル

貴社の売り上げアップをとことん支援します。オンラインショップ専門コンサルタント

CMS css 新着情報

レスポンシブ対応のロゴを表示する ⇒ STINGER8設定その11

投稿日:2019年5月5日 更新日:

ロゴを表示する

STINGER8にして、アミアンインターナショナルのロゴが表示されなくなった。

これは少々まずい。

そこで、背景画像として表示させるようにした。

スマートフォン

スマートフォンでは、現状は右上隅にハンバーガーメニューが表示されており、その左は空白となっている。

この位置にロゴを持ってこよう。

#headbox-bg{
background-color: white;
}
#headbox {
background: url(https://amiens.jp/wp-content/uploads/2019/05/logo-1x-300x30.gif) no-repeat  top 5px left 10px;
background-size:70% auto;
}

ビューポートサイズに合わせてロゴが伸張するのがポイント。

タブレット

2x用のロゴを表示する。


@media screen and (min-width: 600px) and (max-width: 961px) {
    #headbox {
        background: url(https://amiens.jp/wp-content/uploads/2019/05/logo-2x-600x60.gif) no-repeat top 0 left 10px;
        background-size: 70%;
    }
}

PC

PC表示の時は、現在テキストで表示されている「アミアンインターナショナル」を右にずらし、その左に背景画像を表示させることにした。

サイズは、スマートフォンと同じでいいだろう。


@media screen and (min-width: 960px) {
    #headbox {
        background: url(https://amiens.jp/wp-content/uploads/2019/05/logo-1x-300x30.gif) no-repeat top 18px left 10px;
        background-size:auto;
    }
    #header-l{
        position: static;
        width: 800px;
    }
    .sitename a{
        display: block;
        padding-top: 3px;
        padding-left: 320px;
    }
}

背景画像とテキストの高さ合わせが微妙。

背景サイズが伸張しないように、設定をクリアする必要がある。

retina

背景に置くロゴをx2画像で差し替える。

ビューポートが600px以上だと、x4画像で差し替える。


@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 601px), only screen and (min-resolution: 192dpi) and (max-width: 601px) {
    #headbox {
        background: url(https://amiens.jp/wp-content/uploads/2019/05/logo-2x-600x60.gif) no-repeat top 18px left 10px;
        background-size: 70%;
    }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 961px), only screen and (min-resolution: 192dpi) and (max-width: 961px) {
    #headbox {
        background: url(https://amiens.jp/wp-content/uploads/2019/05/logo-4x-1200x129.gif) no-repeat top 18px left 10px;
        background-size: 70%;
    }
}

x3はとりあえずパス。

これでいいだろう。

-CMS, css, 新着情報
-, , ,

執筆者:

関連記事

domo Todo+

iPhoneの神アプリをおすすめ【3】domo Todo+

私のiPhoneのホーム画面1画面目に鎮座する神アプリを紹介するシリーズ。 1画面目のヘビーに使い込んでいるiPhoneアプリ 第3回目は、domo Todo+を紹介する。 domo Todo+ do …

ナナコ

日本のキャッシュレス決済の先行きは怪しい

現金→nanacoでは払えない 先日セブンイレブンを利用した時に、ちょっとしたトラブルがあった。 現金とnanacoを併用して支払おうとしたら、拒否されたのだ。 ちなみに、セブンイレブンとしてはこの可 …

ホーム画面に入れておきたいiPhoneアプリ

2011年にホーム画面入りした新しいiOSアプリ5選

あっという間に大晦日。 最近特に月日の経つのが早くなってしまい、焦り気味である。 一年を振り返ってみると、俺のiPhoneのホーム画面に入れているアプリも大きく様変わりしている。 今年最後のブログ更新 …

pagespeed insight

STINGER8でwordpess構築しpagespeed insightで満点を取る方法 ⇒ カスタマイズの手順と方法を順番に解説

STINGER8とは STINGER8は国産wordpressテーマであり、SEOに強いことで知られる。 現在STINGER8の系統のテーマは4つあり、そのうち2つが無料テーマだ。 STINGER8は …

iphone4s

Siriちゃんで話題沸騰のiOS5.1の本当のキモはバッテリーの長寿命化だった

iOSが5.1にアップデートされたのが3月8日。 それからというもの、iPhone4Sユーザーの間ではもっぱらSiriの日本語化の話題で持ちきりだった。 今まで英語、フランス語、ドイツ語でしか使えなか …