†でおきしブログ†

ウナギ食べたいヽ(•̀ω•́ )ゝ✧

base64SVG鉄拳コマンドパターン一式

☆この記事の続編

deokisi.hateblo.jp

ボタンと方向キーのパターンをbase64 URIのimgタグでまとめてみました

☆パターン一式

btn_0(ニュートラル)

btn_1(LP)

btn_2(RP)

btn_3(LK)

btn_4(RK)

btn_5(LP+RP)

btn_6(LK+RK)

btn_7(LP+LK)

btn_8(RP+RK)

btn_9(LP+RK)

btn_10(RP+LK)

btn_11(LP+RP+LK)

btn_12(LP+RP+RK)

btn_13(LP+LK+RK)

btn_14(RP+LK+RK)

key_1

key_2

key_3

key_4

key_6

key_7

key_8

key_9

☆使用例

コマンドを右クリックとかで参照してimgタグをコピーしてペタペタ貼り付けます。

☆注意事項(古河渚調)

SVGタグでもbase64でも直接htmlに張り付けてみるとわかりますがテキスト量が膨大です。

はてなブログでは1記事のサイズに制限があるようで、沢山使用すると途中で表示がブツ切りになってしまいます。
多分<div class="entry-content">内部のコンテンツに制限がかかっているように思われます。
実はこのエントリー自体もテキスト量はギリギリな感じです。

スーパーpre記法とか、SNSやgoogleMapとかの埋め込みコードとかもテキスト量が多いので、注意です。

なので、実用的にSVGコマンドパターンを使うなら、css(background-image: url)を使ってコード量を減らす必要があります。
けれど、はてなブログでは、スマフォ表示でカスタムcssを使う場合はレスポンシブデザインかproユーザーじゃないと使えないです。
(>< )