×
~ご契約初月無料キャンペーン~  2018年10月18日 ~ 10月26日9:59まで お申込はこちら >>> 1MF1008
  • 楽天
  • Yahoo!

コピペで完了!楽天ショップの味気ない「カレンダー」をこなれデザインに変更するTips

コピペで完了!楽天ショップの味気ない「カレンダー」をこなれデザインに変更するTips

電車でペットボトル開けたときの「プシュッ」が恥ずかしいオガリア中村です。そ、そろ、そろ~っと開けます。「…っぷ…ぷす…ううぅぅぅ」くらいに収めます。

楽天市場の「RMS」で提供されている営業カレンダーのデザインって、MSPゴシックばりばりでちょっとアレじゃないですか?ねぇ?「ほーむぺーじ」って感じじゃないですか。

なので本日はそのカレンダーにCSSを充て、「ちょっと垢抜けたカレンダー」にデザインを変更してみます。高校デビューして2年目くらいの垢抜けた感じにします。

デモ

▼芋っぽいカレンダー

calendar

▼高校デビュー2年目のカレンダー

%e5%90%8d%e7%a7%b0%e6%9c%aa%e8%a8%ad%e5%ae%9a-6

▼変更点

  • MSPゴシックだめ。ぜったい。メイリオに変更。
  • 枠線が窮屈な印象なのでやめ。
  • 文字間の余白を充分にとって洗練された印象に。
  • 2月分のカレンダーの境界線が分かり辛いのでハッキリと。
  • 「営業カレンダー」タイトルの背景に画像を充ててみる。

くっそー…本当はもっと弄りたかったんですが…ここらへんが限界でした。無念、、
次のCSSをコピペしてお使いくださいませー!

このCSSをコピペ!

店舗様によって調整が必要そうな箇所には注釈を加えました(注釈ごとコピペして大丈夫です)。

<!-- ↓カレンダーの装飾CSS↓ -->
<style type="text/css">
<!--
table.calbase_rakuten {
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  border: none !important; /*枠線の削除*/
}
th.caltitle_rakuten {
  background: url("画像URL") no-repeat; /*タイトルの背景画像*/
  height: 40px !important; /*タイトル部の高さ*/
  padding: 0 !important;
}
table.calframe_rakuten {
  margin: 12px 0 !important;
  width: 200px !important; /*全体の幅*/
}
table.calframe_rakuten th {
  text-align: left !important;
  border-bottom: 1px solid;
}
table.calbase_rakuten td {
  width: 24px !important;
  height: 28px !important;
  font-size: 11px !important;
}
tr.weektitle_rakuten td {
  background: none !important;
  font-weight: bold;
  font-size: 10px !important;
}
table.calbase_rakuten .event_rakuten td {
  height: 14px !important;
}
-->
</style>
<!-- ↑カレンダーの装飾CSS↑ -->

「営業カレンダー」タイトルの背景画像は、お好きな画像をご用意くださいね。デモで充ててみたのは↓の画像です。お好きにお使いください-。

calendar-bg

CSSをコピーしたら、RMS内の共通表示部分(ヘッダーとかレフトナビとか共通説明文大とか)どこか一箇所に貼り付ければOK!どうでしょう、垢抜けました?

RMS側のカレンダー設定方法はこちら

そんなカレンダーあるの?って方はこちらから設定できます。

RMSメインメニュー > 基本情報設定 > 営業日カレンダー設定

休業日の文字色もここでコントロールできるので、ピンクと青じゃヤダ!って方は「カレンダーデザインを設定する」欄からご調整ください。ではではー!

この記事を書いた人

中村 茉実

中村 茉実ディレクター

元楽天ショップ店長やってました。歩くときに他人との距離感が掴めないところがあり、よくオジサンのかかとを踏んでしまいます。

この記事のあとによく読まれています!

繁盛レシピの人気記事3選!

コメントはお気軽にどうぞ

セキュリティチェック *

内容をご確認の上、送信してください。