このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Sublime Text 3:厳しすぎるCSSLintのエラーを見逃してもらう (03/01)
  • CSS: body の height を100%にしても上下に広がらない (02/27)
  • Windows:動画のフレームサイズ等をエクスプローラーに表示 (02/24)
  • エクセル:テーブルの「フィルター」「並び替え」ボタンが消えた (02/22)
  • jQuery:追加した「ボタン」をクリックしてもイベントが発火しない (02/20)
  • 管理人より
    2100万アクセス突破!ありがとうございます。

    拡張機能「Stylish(CSS)」を使ってサイトのテキストを書き換える

    このエントリーをはてなブックマークに追加
    イメージ


    こんにちは、さち です。

    普段、Firefox でサイトのテキストを書き換えたい時には
    拡張機能「Greasemonkey」を使い JavaScript で行なっています。

    しかし、ふと思ったんです。
    ほんの少しテキストを書き換えるだけなら
    拡張機能「Stylish」を使って CSS でもできるんじゃないかと。

    ということで、やってみました。




    「CSS」でテキストを書き換える

    実は、CSS にはテキストを書き換える機能はありません。
    そこで、既存のテキストを隠した上で
    新しいテキストを追加することで擬似的な書き換えを行います。

    例えば、こんな HTML があるとすると…
    <div class="class">
    ここのテキストが隠れる
    </div>

    このような CSS を書きます。
    .class {
    font-size: 0 !important; /*サイズを0にしてテキストを隠す*/
    }

    .class::after {
    font-size: 13px !important; /*もとの大きさに戻す*/
    content: "ここに表示されるcontentが見える";
    }

    仕組みを簡単に図解すると下記のとおり。
    .class」は、フォントサイズが「0」になりテキストが見えなくなります。
    さらに、「.class::after」で疑似要素を作り「content」の内容を表示。
    これらの CSS によりテキストが書き換えられたように見えます。
    イメージ




    実際に Amazon のテキストを書き換えてみた

    1. Amazon の購入ボタンの下には「お届け先住所」があり、本名と住所が丸出しです。
      ブログで関連記事を書くときにいつか隠し忘れるのではないかと少し心配……。
      失敗をする前に、今回の方法を使って隠してしまいましょう。
      操作画面

    2. この部分を調べると、「.lux-location-label」というクラスを持っています。
      このクラスを使ってテキストを書き換えてみます。
      操作画面

    3. Stylish でこのような CSS を書いて保存。
      @-moz-document domain("www.amazon.co.jp") {

      .lux-location-label {
      font-size: 0 !important;
      }

      .lux-location-label::after {
      font-size: 13px !important;
      content: "いつものところ";
      }

      }


    4. テキストが書き換えられました。
      操作画面

    5. 実際は、書き換えられているわけではなく
      既存のテキストを隠して、「::after」でテキストを追加しています。
      操作画面

    サイト上のテキストをちょっと書き換えるだけなら
    JavaScript を使うより手軽なのでこれで十分かもしれません。

    ちなみに、この方法は Stylish 等の ユーザーCSS だけで使いましょう。
    ウェブサイト製作においては ブラックハットSEO と見なされ
    検索エンジンからペナルティを受ける可能性があります。

    余談ですけど
    CSS の「after」と jQuery の「after」は場所がまったく違っていて
    jQuery で同じ場所なのは「append」というのが地味にややこしいですね。



    以上、ものすごく個人的な備忘録でした。









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ