使用可能タグが限られた楽天スマホで使える！classを使わず、属性値に任意の値を指定してcssを適用する裏技
楽天Tips関連記事
楽天スマホで使える！classを使わずにcssを適用する裏技
指定時間に自動タイマーで切り替わる！楽天のバナーをcsvで管理する【jQuery】
jQueryで現在の日付で判別し、対象期間中だけテキストを表示する
cssだけ！jQueryを使わないスマホでよくある横から出てくるドロワーメニュー
【RMS】楽天スマホに禁止タグのiframeを入れる裏技
【jQuery】営業日・定休日カレンダーを簡単に管理する
jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける
jQueryで現在の時刻を判別し、表示するバナーを切り替える
jQueryでiframe内から親ページをリダイレクトさせる
楽天スマホで使用可能なタグ
使用可能なタグはとても少なく、aタグやpタグ、table関連程度しか使えません。
divやiframeも使えません。
iframeは【RMS】楽天スマホにiframeを入れる裏技で入れるとしても、
divなどの多用するタグをいちいち裏技で入れていたらhtml自体の可読性が著しく低下するのでコーディングする側としてはやりたくないですよね？
そんなときに重宝する裏技を紹介します。
cssは外部cssを読み込んでくださいね。
方法1 タグを重ねて他の要素とかぶらないようにする
html
<font>
<p>
<b>
<a href="#">解説文章</a>
</b>
</p>
</font>
css
font p b a {
color: red;
}
aタグを変更したい場合です。
htmlをこんな感じにして他の箇所とかぶらなくし、影響が出ないようにしています。
css側ではfont p b aのように指定し、要素に適用します。
これでも問題ないのですが、これもそんなに可読性がよくないのが難点です。
方法2 タグに使用可能な属性値を任意の名前で作成する
html
<font size="review_box">
<p align="rev_data">解説文章</p>
</font>
css
font[size="staff_review_box"]{
width: 100%;
margin: auto;
display: block;
}
font[size="staff_review_box"] p[align="rev_data"]{
font-size: 0.95em;
line-height: 1.3em;
}
まるでclassを使うかのように、属性値に任意の値を付けていきます。
<font size="review_box"></font>そうすることで、cssでの要素の指定ができるようになるのでスタイルを個別に変更させることができます。
これなら可読性を下げずにRMSに登録することができます。
cssのようにclassを二つ付けることはできない
<font class="review_box men"></font>のように、複数の属性を付けることができません。
できなくはないですが指定した属性値にしかcssが効かないのであまり意味がありません。
そんなときは別の属性を付けてあげます。
まるでclassを使うかのように、属性値に任意の値を付けていきます。
<font size="review_box" color="men"></font>のようにします。
そうすることで、下のcssのような記述で、共通cssと個別cssのどちらも指定ができるようになります。
ただし、使用可能なタグの中で複数属性をが使えて、ほかに影響が出なさそうなタグが1つしかないので必然的にfontを使うことになりそうです。
css
font[size="review_box"]{
background-size: 100% auto;
background-repeat: no-repeat;
}
font[color="men"]{
background-image: url(./men.jpg);
}
コメント