コンテンツページの作成の仕方について

Question

https://shop.marianaocean.com
現在自社サイトのページが上記で、上の「NEWS」という項目を消して、
下記サイトのようなコンテンツページを作りたいのですが、どのようにHTML/CSSを組んだら良いですか？
https://hokuohkurashi.com

イメージとしては、上に横長の画像を貼りその下に文を入れ、2コンテンツずつで改行していきたいです。

Accepted Answer

ECマスターズの田辺です。

「NEWS」の代わりに以下の記述を
入れていただくことで参考サイトのような
レイアウトが可能です。

リンク先URL・画像URL・テキスト・2コンテンツの高さを変更してご利用ください。

■HTML




テキスト




テキスト




テキスト




テキスト




テキスト




■CSS
div.float-contents{
width: 49%;
height: 2コンテンツの高さpx;
float: left;
 }
div.float-contents:nth-child(odd){
margin-left: 2%;
}

Answer

こちらのページのように
http://reedit.jp/

instagramのコンテンツを差し込む設置方法を教えてほしいです。

Answer

ECマスターズの田中です。

いただいたページの見た目と仕組みを確認したところ、
「Instagram」のコーナーは、
画像をべた張りした上で http://reedit.jp/ext/new/index.html へのリンクを貼っているだけで、
特にコンテンツを差し込んでいるわけではないようです。

自社サイト内にInstagramの投稿を埋め込みたい場合は、
一番基本的な方法として
http://insta-antenna.com/method-picture-display#topic2-1
上記「2-1.Instagramの投稿を埋め込む」という方法がございます。

また、下記「Instawidget」という外部サービスを利用して、
ある程度見た目をカスタマイズして埋め込むこともできます。
https://instawidget.net/?hl=ja

Answer

ありがとうございます。
上記の外部システムを使用して作成したのですが、PC用があまりきれいに反映されません。
レスポンシブで、PC用とスマホ用でサイズを変更したいのですが
どのようにやりますか？
https://www.rakuten.ne.jp/gold/marianaocean/

Answer

ECマスターズの田辺です。

メディアクエリをご利用いただくことで
デバイスごとのサイズを決めることができます。

書き方につきましてはこちらをご覧ください。
https://sole-color-blog.com/blog/71/

サイトにも書かれておりますが、
小さい画面サイズを基準にして大きく指定していく“モバイルファースト”か
PCを基準にして小さく指定していく”デスクトップファースト”にするかによって
書き方が変わってきますのでお好みの方法をお選びくださいませ。


また、今回いただいたページは楽天のページでしたので
https://www.rakuten.ne.jp/gold/marianaocean/
インスタグラムを掲載することは外部サイトへのリンクとなり
楽天のガイドライン違反該当いたします。

取扱禁止商材・禁止行為ガイドライン
https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=navi/rule/guide/10_060.html&s=&param2=0#link-b62
Ⅱ-(6)-2外部リンク、外部サイト誘導(当社が特に認めた場合を除く)
違反点数：35点

そのため、楽天ではインスタグラムのリンクを
外していただきますようお願いいたします。