楽天 スマホ コピペで簡単!疑似要素「:before」「:after」を使ったcss裏技テクニック

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

楽天のスマートフォンページで簡単にコピペで簡単♪
疑似要素と呼ばれる「:before」「:after」を利用した
裏ワザテクニックをご紹介します。

 

疑似要素の「:before」「:after」要素とは?

疑似要素の「:before」「:after」は名前の通り、

:before 要素の直前
:after 要素の直後

にエレメント(文字列・画像など)を追加することが出来ます。

これを使えば楽天市場のスマートフォンサイトの今まで手が付けられなかった

部分に、文字列や画像等を挿入する事ができ、デザインの幅が広がります。

幾つか使用例を挙げますので、ぜひやってみてください!
 

大バナー・小バナー・目玉商品にタイトルバーを設置しよう

楽天のスマートフォンページを編集していて、なんで共通バナー(大バナー・小バナー)や

目玉商品にタイトルバーが無いんだろうと思ったことはございませんか?

その「大バナー」「小バナー」「目玉商品」にタイトルバーを設置してみたいと思います。

変更方法

[html] ※RMSの商品ページ共通説明文などにGOLD領域の作成したCSSを読みこませる

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加

大バナーの場合

大バナーを変更したイメージ

小バナーの場合

小バナーを変更したイメージ

目玉商品の場合

目玉商品を変更したイメージ

タイトルバーを入れることにより、各コンテンツの境目がわかりやすくなります。

また、タイトルバーの見た目は、お好みで見た目を変更してください。

※楽天の仕様変更により、うまく表示されない場合がございます。

参考にしたいタイトルバー一覧

下記のリンクには、スマートフォンに合うシンプルなタイトルバーの一覧がありますので、

参考にしてみるのもよいかもしれません!

【シンプルなHTMLとCSSコピペで実装できるタイトルのデザインサンプル 50】
http://www.nxworld.net/tips/50-css-heading-styling.html

買い物かご周りにお知らせ・注意書きを追加してみよう

注意書きを追加したイメージ

実は、こんなことも出来るんです。やり方はこちら↓

変更方法

[html] ※RMSの商品ページ共通説明文などにGOLD領域の作成したCSSを読みこませる

[css] ※楽天GOLDにCSSファイルを作成後、以下を追加

まとめ

いかがでしたでしょうか?

今回紹介したものは、楽天の方で推奨されているものではありませんので、

やり過ぎには注意してください。

みなさまのお役に立てばいいなと思います!

【楽天スマホまとめ】
[第1回]フローティングバナー設置編
[第2回]カテゴリページ(商品一覧ページ)をカスタマイズ編
[第3回]css裏ワザテクニック(看板画像・共通バナー)編
[第4回]疑似要素「:before」「:after」を使ったcss裏技テクニック←今ここ
[第5回]楽天スマートフォン施策まとめ 編

 
 

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す