ロード中...
amazonインスタントストア

amazonインスタントストア レスポンシブ化

前回ご紹介したamazonインスタントストア。

これをレスポンシブ対応にするCSSをご紹介いたします。

CSSソースは以下の通りです。

body {
    width: 100%!important;
    margin:0;
    min-width:auto;
}

#wrap {
    width: 100%;
}

#mainwrap{
    float:none;
}

#main{
    width:100%;
    overflow: display!important;
}

div#contentsubheader {
    overflow: display;
    width: 100%;
}

table.products {
    width: 100%!important;
}

table.sidebarproducts,
table.sidebarproducts td.text {
    width: 100%;
}

div#footer{
    display:none;
    width: 100%;
}

#sidebar{
    float: none;
    overflow: display;
    width: 100%;
}

li.widget {
    width: 50%;
}

/*モバイル対応*/
@media (max-width: 640px) {

#header{
    max-width:100%;

}

#mainheadertitle{
    width:100%;
}

img#mainlogo {
    max-width:100%;
}

li.widget {
    width: 100%;
}

table.products .imagerow a img{
    width: 100%!important;
}


table#detailheader {
    width: 100%!important;
}

table#detailheader td{
    display:block;
}

table#prices td{
    display:table-cell;
}

#detailOfferPrice{
    display:block;
    width:100%;
}

}

不要な部分もあるかと思いますが、基本的に上記のCSSソースを以下の例に沿って張り付ければOKのはずです。

CSS適用手順

1.インスタントストアの”カラーとデザインを編集する”のページのCSSを編集するとクリック。

カラーとデザインを編集する

2.”あなたの最優先するCSSを入力”の欄に上記CSSを貼り付け。

CSSを編集する

ご興味ある方は是非試してみてくださいね~。

追記:

当サイトにしては珍しく、この記事に関するコメントを許可してみました。

「もっと良い方法があるよ」

「この部分はこう変えたらいいよ」

等アドバイスがございましたら、是非コメント欄にお書きください。

追記2:

2017年6月28日にamazonからアナウンスがあり、2017年10月27日をもってインスタントストアのサービス提供は終了となるそうです。

カテゴリー:NEWS

コメントはこちらから.

メールアドレスは公開されませんのでご安心ください。
また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

私たちも応援しています。

システムブレイン株式会社はアスルクラロ沼津のスタジアムスポンサーです。

外部サイト

当サイトでのブログ公開時、自動的に以下のブログ等に当サイトのブログ記事へのリンクが表示されます。


主な対応可能地域

〔静岡県東部〕
沼津市、三島市、富士市、富士宮市、裾野市、御殿場市、伊豆市、伊豆の国市、熱海市、伊東市、田方郡函南町、駿東郡清水町、駿東郡長泉町、駿東郡小山町

〔その他静岡県下〕
静岡市、浜松市、島田市、磐田市、焼津市、掛川市、藤枝市、袋井市、下田市、湖西市、御前崎市、菊川市、牧之原市、賀茂郡東伊豆町、賀茂郡河津町、賀茂郡南伊豆町、賀茂郡松崎町、賀茂郡西伊豆町、榛原郡吉田町、榛原郡川根本町、周智郡森町

〔その他都道府県〕
日本全国対応可能
※静岡県以外のお客様でお打ち合わせご希望の際は、ご相談ください。

ABOUT US


システムブレイン社屋外観

システムブレイン株式会社
〒411-0903
静岡県駿東郡清水町堂庭238-4
TEL : 055-975-4141
FAX : 055-975-7080
https://www.sysb.co.jp/
instagram公式アカウント:@systembrain4141
facebook公式アカウント:@sysb.web
twitter公式アカウント:@sysb_web

主な業務内容
システム開発、ネットワーク構築、事務機器・事務用品販売、コピー機リース・レンタル、ホームページ制作、パソコンサポート、建築CAD支援

↓