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

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

CMS css 新着情報

メニューとフッターのレスポンシブ対応css装飾 ⇒ STINGER8設定その12

投稿日:

見出しと同じイメージを使う

H2タグの装飾とイメージを同じにするため、メインメニューとフッターの背景画像を設定する。

H2タグを修飾 ⇒ STINGER8設定その9

最初は単純に背景画像を設定するだけでいいと思っていたが、意外と苦戦。

メニュー

スマートフォンやタブレットだと、メインメニューはハンバーガーメニューに変化するので、今回いじるのはPC表示の場合のみでよい。

@media screen and (min-width: 960px) {
#st-menubox{
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-1x-600.jpg) 0 40%;
background-size:cover;
margin-top: 5em;
padding: 0.5em 2em 0.5em 1em;

}
#st-menubox a{
color: white;
}
}

これで背景に画像が敷かれたのだが、PCなのでホバーでのアクションも追加する。

#st-menubox a:hover{
background-color: rgba(255,255,255,0.2);
}

これでいいと思っていたが、どうも画像のにじみが気になる。

H2タグの時は表示部分が狭いので気にならなかった画像のぼやけが、妙に気になるのだ。

そこで、2xの画像を作って、urlを差し替えた。

メニューとロゴとの間の空白も広すぎるので、詰める。

#st-menubox{
margin-top: 30px !important;
}

フッター

フッターはスマートフォンなども作業しないといけない。

まず、背景画像を指定する。

footer{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-1x-600.jpg);
background-size:cover;
}

色を調整する。

#footer a,#footer .copy,#footer .rcopy{
color: white;
}
#footer .footermenust a{
color: white;
}

フッターメニューの上下に線を引く。

STINGER8はフッターがコンテンツ幅に設定されてるので、それをクリアせねばならず、少々ややこしい。

またfootermenuboxの上部にmarginをとると親要素まで下がってしまうので、beforeで無理やり線を引く。

footer,#footer{
padding: 0 0 2em 0;
}
#footer-in{
max-width: none;
}
.footermenubox{
border-bottom: 1px solid white;
}
.footermenubox:before{
content: " ";
display: block;
width: 100%;
border-bottom: 1px solid white;
}
#menu-main-menu-2{
padding: 0;
}
#menu-head-navi-2{
    padding: 5px 30px;
}

あとは、サイト名とコピーライト部分の調整だ。

.footer-c p{
line-height: 18px;
padding: 0 1em;
}
.footerlogo{
color: white;
padding-top: 2em !important;
}

レスポンシブ対応

ここまでやって次に、メインメニューの時と同じく画像のぼやけ対策をしていく。

タブレット用に

@media screen and (min-width: 600px) and (max-width: 961px) {
footer{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-2x-1200.jpg);
background-size:cover;
}
}

PC用に

@media screen and (min-width: 960px) {
footer{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-2x-1200.jpg) 0 50%;
background-size:cover;
}
}

幅広ディスプレイ用に

@media screen and (min-width: 1200px) {
footer{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-4x-2400.jpg);
background-size:cover;
}
#st-menubox{
box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-4x-2400.jpg) 0 40%;
background-size:cover;
margin-top: 5em;
padding: 0.5em 2em 0.5em 1em;

}
}

retina用に

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 601px), only screen and (min-resolution: 192dpi) and (max-width: 601px) {
footer{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-2x-1200.jpg);
background-size:cover;
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 961px), only screen and (min-resolution: 192dpi) and (max-width: 961px) {
footer{
background: url(https://amiens.jp/wp-content/uploads/2019/05/back-4x-2400.jpg);
background-size:cover;
}
}

意外と長くなった。

-CMS, css, 新着情報
-,

執筆者:

関連記事

Googleリアルタイム検索の「上位順の最新情報」にはユーザーのオーソリティが関係している

Amplify’d from www.suzukikenichi.com 「上位順の最新情報」に表示するユーザーは何を基準に選んでいるのだろうかと疑問に思っていたのですが、ツイートしたユーザーの“Au …

ロゴを表示する

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

ロゴを表示する STINGER8にして、アミアンインターナショナルのロゴが表示されなくなった。 これは少々まずい。 そこで、背景画像として表示させるようにした。 スマートフォン スマートフォンでは、現 …

Eストアーアワード2010フルーツ部門の年間第一位

武田青果がEストアーアワードのフルーツ部門で日本一に

武田青果がEストアーアワードのフルーツ部門で日本一に Eストアーアワード2010フルーツ部門の年間第一位 有限会社武田青果(高知県高知市弘化台19-14 電話088-882-5323 FAX088-8 …

二科展

弊社専属デザイナーが第98回二科展で特選を受賞しました

弊社専属デザイナーが第98回二科展で特選を受賞しました。 弊社のデザインにおけるレベルの高さを証明する受賞であると、謹んでご報告申し上げます。 関連

プロカメラ/iPhoneアプリ

iPhoneの神アプリをおすすめ【1】プロカメラ

私がiPhoneユーザーとなって15ヶ月経った。 この間にインストールしたアプリは250種類以上。まさにiPhone無しにはいられない程の依存度かもしれない。 昨日、大阪から道端さんが来られていたので …