はじめに
先日、「steemitの記事で赤い文字を使用する方法」に関する記事を読みました。
https://steemit.com/japanese/@yoshiko/how-to-use-red-letters-in-steemit
これ、目からウロコな記事でした。
なにげに、僕はHTMLとかCSSを書けるので、ちょっといろいろいじってみたことがあるのですが、無理やり自作のCSSを読み込もうとすると、セキュリティ上はじかれるんですよね~(^^;
この方法の面白いところは、自作のCSSを作るのではなく、もともとあるCSSを適応させているところです。
つまり、もともと「phisyクラスを赤字にする」というCSSがある。その上で、「赤字にしたい部分をphisyクラスにする」という処理をしているワケです。
「phisy」の意味から考えて、おそらくフィッシング詐欺に関する警告文か何かを赤字にするためのCSSなのでしょう。
さて、……ということは、「他にも使えるCSSがあるのではないか?」と思ってしまうのは当然ですよね。
そこで、steemitの個別記事で読み込まれているCSSをじっくりと読み、いろいろ実験してみることにしました。
ちなみにCSSファイルはこちらです ⇒ https://steemit.com/assets/app-0b4ca86c83a58a7da3d2.css
phishyクラスに関する記述は9614行目にあります。
以下実験した記述とその結果
<div class="phishy">phishyテスト</div>
<div class="is-invalid-label">is-invalid-labelテスト</div>
<div class="buy-color">buy-colorテスト</div>
<div class="sell-color">sell-colorテスト</div>
<div class="error">errorテスト</div>
<div class="warning">warningテスト</div>
<div class="darkred">darkredテスト</div>
<div class="info">infoテスト</div>
<div class="theme-original ChangePassword__rules">theme-original ChangePassword__rulesテスト</div>
<div class="theme-dark ChangePassword__rules">theme-dark ChangePassword__rulesテスト</div>
<div class="Market__ticker-pct-up">Market__ticker-pct-upテスト</div>
<div class="Market__ticker-pct-down">Market__ticker-pct-downテスト</div>
<div class="foundation-mq">foundation-mqテスト</div>
……と、表示させてみると、phishy以外、何も起こらない(><;
原因を探るためにソースコードを見ると、phishy以外のclassはすべて削除されていることが分かります。
う~ん……謎だ。なんでこんなにもphishyだけが特別扱いされているんだろう。
最終的に何の役にも立たない記事ですいませんm(__)m
突破口が見つかったら、何か追記するかもしれません。
はじめまして^^
あ~そうそう、これ、私も疑問に思って、いろいろやってみましたが、この赤字しか反応しないんですよね。赤があるならCSSに青とかあってもいいのにな?って思いますよね(笑)
突破口探しに期待してます^^
はじめまして~^^
その後もいろいろやってみたんですが、全然ダメでした(T-T)
GitHubのSteemitのソースも見てみたんですが、僕が理解するには時間がかかりそうです。
(……というか、サイト自体のソースも含まれているんでしょうか?ブロックチェーンだけ?(^^;)