楽天スマホで使える!classを使わずにcssを適用する裏技

プロモーションが含まれています

楽天スマホで使える!classを使わずにcssを適用する裏技

使用可能タグが限られた楽天スマホで使える!classを使わず、属性値に任意の値を指定してcssを適用する裏技

楽天Tips関連記事

関連記事をもっとみる

楽天スマホで使用可能なタグ

使用可能なタグはとても少なく、aタグやpタグ、table関連程度しか使えません。
diviframeも使えません。

iframeは【RMS】楽天スマホにiframeを入れる裏技で入れるとしても、
divなどの多用するタグをいちいち裏技で入れていたらhtml自体の可読性が著しく低下するのでコーディングする側としてはやりたくないですよね?
そんなときに重宝する裏技を紹介します。

cssは外部cssを読み込んでくださいね。

【RMS】楽天スマホに禁止タグのiframeを入れる裏技
楽天スマホで使える!禁止タグが多い楽天スマホ(RMS)にiframeなどを入れる裏技のまとめ。 楽天Tips関連記事 情報が古い場合があるので、自己責任でご利用ください。 禁止タグをすり抜ける裏技 ...

方法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);
}

コメント

タイトルとURLをコピーしました