wordpressの記事内にレズボンシブルの枠を用意する方法

最近PCでのFV離脱が激しくなってきました。

考えられる理由は、

画像がスマホ向けで、正方形だからでしょうね。

私だって、

女性向けのスマホサイトをPCで見ると離脱したくなりますもん!

そこで、スマホでみると、画面いっぱいの「アイキャッチ」になり、

PCだと画像と説明文になるcssを突っ込んでみました。

まぁ

本音を言うと、Amazonの物販用CSSをリニューアルするついでに記事にしておきます。

PC50%、スマホ100%のボックスを作る

HTML&CSS初心者にぜひおすすめしたい本の一冊です。

図をふんだんに使い理解しやすいようにしており、つまずきにくくなっています。
また、実際にコードを打たなくてもどういった表示がされるのか写真でわかるのでありがたいです。
他の本だと文字のみの説明が多く理解できなかったのですが、これなら続けられます。

HTML&CSSとWebデザインが 1冊できちんと身につく本

こんな感じ。

最近のサイトの

Amazon物販用リンクはこういうの流行ってますよねー。

スマホ表示で100%表示、PCで左右50%表示です。

こうしておけば

PCの時は横並びで購入用リンクが表示され、

スマホの時は縦に購入用リンクが表示されます。

アフィンガー4にはデフォルトで入っている機能です。

でも、

Simplicity2には入っていないんですよねー。

うちもかっこ良くて、機能的(レスポンシブル)な物販用CSSを作ってみま

ちなみに今までは

テキストリンクがメインでした。

ほら、デザインよりもコンテンツじゃん?

 

classつけるのが面倒くさいだけでしょ

今回は

Bootstrap非対応テーマでも動くようにinline-blockだけで簡単に動かします。

単純なソースコードはこう。

ブラウザ

左のコンテンツです
右のコンテンツです。

HTML

CSS

それぞれ簡単に解説すると、

PCやタブレットの場合は、

width:49%;

で横幅を半分にし、

(49%の理由はdivでpadding入ってる可能性あるから。)

display:inline-block;

で、文字として扱って横並びにしているだけです。

あとは

vertical-align:top;

は高さを上で揃えているだけですね。

display:inline-block;を使っている理由は、

floatだとリセット用のボックスを用意しないと行けないからです。

え?

leftとrightで分ける必要ないって?

その通りなんですが、

ビジュアルエディタで書く時に色分けできたほうか楽かなって?

ビジュアルエディタのcssに色をつけたバージョンのものを追加しておきます。

simplecity2の場合はちゃんと用意されているので、ここに書くだけです。

こうしておけば、ビジュアルエディタで作業中に、

色分けされた状態で、表示されて便利かなって。

後はせっかくなので、クイックタグの設定もしておきます。

親テーマのlib>qtags.php

の中に以下のように追記します。

こうしておけば、

テキストエディタにショートカット用のタグを用意できますよ。

というわけで、簡単なよく見る物販用CSSの紹介でした。

では、

基本を抑えたところで、本格的に物販用デザインを作っていきます。

枠とボタンのCSSを作る

このレスポンシブルをベースに枠とボタンを追加して、

購入用のデザインにしていきます。

完成予定はこんな感じ。

画像を入れる左のボックスです。
商品のタイトルと購入ボタンを書く右ボックスです。
ボタンですよ!

枠とボタンはセンスないんで、適当にパクってきました。

HTMLとCSSのコピペで使えるボタンデザイン例を100個まとめました。立体的なものや、フラットWebデザインで使えるもの、SNSボタンまで。
HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

HTML

CSS

追加したのは、

枠線にtext-align:center;に中央寄せ。

ボタンにtext-align:center;の中央寄せとwidth:100%;のサイズ調整だけです。

同様に、クイックタグも設定しておきました。

完成品はこちらです!

HTML&CSSとWebデザインが 1冊できちんと身につく本

実際に手を動かして作りながらサイト制作のきほんが学べる!

Amazonで購入する
楽天で購入する