楽天RMSでCSSを使ってデザインする方法！styleタグのscoped属性を活用する！

楽天の店舗ページをデザインするという仕事をいただきまして、初めて「楽天RMS」というCMSを触りました。

かなり制限のある仕様になっていて、コーディングするのにコツが必要なんですが、特にCSSの当て方が独特すぎたのでそのやり方についてまとめます。

楽天RMSでCSSをクラス指定して適用する方法

楽天RMSではCSSのファイルを置く場所がありません。全体にCSSを適用させる手段がないんです。

ヘッダーだけとか、フッターだけとか、個別にHTMLを格納する場所があってそこにHTMLを入れていく仕様になっているため、仕方がないのでそこにstyleタグを書いてCSSを使っていきます。

その際に注意したいのは、「scoped属性」をつけないと適用されないということです。

理屈が全くわからないのですが、ネットで拾ってきた情報を元に試したところ無事クラス名を指定してCSSを書くことができるようになりました。

例えば下記のように書きます。

<style scoped>
.header {
  background-color: #f0f0f0;
}
</style>

HTMLタグの中に直接CSSを書くことを「HTMLにインラインでCSSを書く」という言い方をします。こちらの方法も楽天RMSで使うことができます。

というか、多くの方はこっちの方法を使ってると思われます。クラス指定するよりも追加するにも修正するにも作業工数が増えてしまうので、ちょっと手間なんですよね。

やり方は下記のような感じです。

<table style="width:100%; border-top: 5px solid #f90; margin: 0 0 10px;">
  <tr>
    <td></td>
  </tr>
</table>

上記の記述を楽天RMSのヘッダーの1行目に入れると、ヘッダー上部にオレンジ色のボーダーを引いたデザインになります。

楽天RMSはtableレイアウトを使うのが基本なので、こういう書き方が普通にあるんですよね…。

楽天RMSが独特すぎてCSSを書くのも一苦労でしたが、コツさえ掴んでしまえばなんとかなりますね。

楽天GOLDを使うともう少し簡単になると思いますが、楽天RMSだけでページ作ってる方はぜひ参考にしてみてください。