【業務効率化】RMSの画面を見やすくカスタマイズして、作業効率UPできるChrome拡張機能「Stylist」

楽天
Yahoo!

【業務効率化】RMSの画面を見やすくカスタマイズして、作業効率UPできるChrome拡張機能「Stylist」

2017/02/03

お気に入りに追加する

こんにちは、死んだように眠るオガリア中村です。寝息・寝言・寝返りをせず胸で手を組み眠るので、自分で「棺桶スタイル」と呼んでます。とにかく寝ている時の静けさにおいては自分を評価しています。

しかし最近は疲れからか年齢からか、「いびき」をしてしまう日があります。そんな時は、寝ながら自分でも若干気づいてます。「うわー、これ今いびきかいてるわー…」と、レム睡眠のうっすらした意識下で自らに若干ヒいてます。だけど寝てるからどうしようもないやー、とテンション下がりながら諦めてますけどね。困ったものです。

本日は、楽天のショップページではなく「RMS」をカスタマイズして業務を効率化してみますよー！

デモ

【ポイント】
・デザインがキレイ！
・フォントが「メイリオ」になってキレイ！見やすい！
・入力幅が拡大されて入力しやすい！
・使わない項目は非表示にしておける！

初めて操作するスタッフさんでも取りかかりやすくなりますし、作業ストレスの低減や能率向上につながる事が期待できるのではないでしょーか！

利用するのは次の無料拡張機能です。

Chrome拡張機能「Stylist」

ざっくり言うと、「特定のwebページに、オリジナルのCSSをあてる事ができる！」機能です。

　・google chromeブラウザ専用の”拡張機能”。
　・無料！
　・オリジナルのCSSをあてるのは、全サイト・特定のページなど条件設定できる！

インストール方法

まず、「Stylist」のインストール・利用は、google chromeブラウザで行う必要があります。google chromeブラウザのインストール方法はこちらのヘルプをご確認くださいー！

以下のインストールページにgoogle chromeでアクセスします。
[▶インストールページ]
右上の「Chromeに追加」ボタンを押します。
『「Stylist」を追加しますか？』と聞かれたら、「拡張機能を追加」ボタンを押します。
右上にStylistのアイコンが追加されれば、インストール完了です。

インストールできたら、早速設定してみましょー！

設定方法

新しいルールを作成する

Stylistのアイコンをクリックし、「オプション」メニューを開きます。
「Styles」タブを開き、「Add New Style」を押します。
最上部の黒枠に分かり易いタイトルをつけます。ここでは「RMS」と入れてみます。
「prefix」となっているセレクターを「domain」に変更し、右側の枠へ「item.rms.rakuten.co.jp」を入力して以下の状態にします。

CSSルールをコピペ

「Stylesheet Text」欄に次のCSSをまるっとコピペしましょー！

/* 全体設定
-----------------------------------------------*/

/* 全体のフォント設定 */
body,input,textarea {
  font-family:メイリオ;
}
td font[color="#ff6600"] {
    font-size: 11px;
    color: #aaa;
}
/* 入力枠を広げる */
textarea {
    min-width: 600px;
}
form > table {
  width: 100%;
  max-width: 1200px;
}
a[name="step2"] + table textarea {
  min-height: 300px;
}
/* 入力枠の装飾 */
input[type="text"],textarea,select {
  padding: 8px;
  border-radius: 2px;
  border: 1px solid #ccc;
  line-height: 1.2em;
}
/* ラジオボタン装飾 */
input[type="radio"] {
  position: relative;
  margin-left: 16px;
}
input[type="radio"]:before {
  position: absolute;
  content: "";
  top: 40%;
  left: -6px;
  width: 16px;
  height: 16px;
  margin-top: -10px;
  background: #fff;
  border: 2px solid #ccc;
  border-radius: 50%;
}
input[type="radio"]:checked:after {
  position: absolute;
  content: "";
  top: 40%;
  left: 0;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #bf0000;
}

/* 最後のボタンを大きくする
-----------------------------------------------*/
input#submitButton {
    width: 400px;
    padding: 16px;
    font-size: 16px;
    margin: 0 auto;
    background: #bf0000;
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
}


/* 不要な項目を非表示にする
-----------------------------------------------*/

a[name="step1"] + table table tr:nth-of-type(10), /*「配送方法セット」*/
a[name="step1"] + table table tr:nth-of-type(12), /*「送料区分1」*/
a[name="step1"] + table table tr:nth-of-type(13), /* 「送料区分2」*/
a[name="step1"] + table table tr:nth-of-type(14), /* 「個別送料」*/
a[name="step1"] + table table tr:nth-of-type(15), /* 「代引料」*/
a[name="step1"] + table table tr:nth-of-type(17), /* 「注文ボタン」*/
a[name="step1"] + table table tr:nth-of-type(18), /* 「資料請求ボタン」*/
a[name="step1"] + table table tr:nth-of-type(19), /* 「問い合わせボタン」*/
a[name="step1"] + table table tr:nth-of-type(20), /* 「再入荷お知らせボタン」*/
a[name="step1"] + table table tr:nth-of-type(22), /* 「注文受付数」*/
a[name="step1"] + table table tr:nth-of-type(26), /* 「在庫戻し設定」*/
a[name="step1"] + table table tr:nth-of-type(27), /* 「在庫切れ時の注文」*/
a[name="step2"] + table table tr:nth-of-type(3), /* 「モバイル用商品説明文」*/
a[name="step3"] + table table tr:nth-of-type(7), /* 「サーチ非表示」*/
a[name="step3"] + table table tr:nth-of-type(8) /* 「闇市パスワード」*/
{
  display:none;
}

最後に「save」ボタンを押せば完了です！RMSの商品登録画面をリフレッシュして状態を確認してみてください。どうです？キレイキレイされてますか？？