LoginSignup
6
0

More than 5 years have passed since last update.

Qiitaの「いいね」を「ハラショー!」に変える

Posted at

Qiitaの「いいね」を「すごーい!」に変えるを見て,これはいい!と思い流用しようとしたものの,残念ながら参考元のソースが古いのか,manifest.jsoncontent_scripts.matchesのURLが古かったりそもそもセレクタが無かったりしたので,なんやかんやでアイデアだけ拝借,今のQiitaに合わせました.
とは言ってもCSS使える人じゃないので,一部できずに挫折してます
というわけで本題!

ハラショー!(エリチ派)

Qiitaの「いいね!」を「ハラショー!」に変えるChrome拡張を作りました.
自分が投稿した記事は↓
image.png
他ユーザーが投稿した記事は↓
image.png

コメント部分も変えてます.
image.png

ソースは↓

harasyo.css
div.it-Footer_actions > div.it-Footer_like > div > button > span {
    font-size: 0px;
}

div.it-Footer_actions > div.it-Footer_like > div > button > span::after {
    font-size: 1.6rem;
    content: "ハラショー!";
}

div.commentHeader > div.commentHeader_metadata.pull-right > div.LikeButton.LikeButton--small > button > span:nth-child(2) {
    font-size: 0px;
}

div.commentHeader > div.commentHeader_metadata.pull-right > div.LikeButton.LikeButton--small > button > span:nth-child(2)::after {
    font-size: 11px;
    content: "ハラショー!";
}

div.it-Footer_actions > div.it-Footer_like > div > span.LikeLabel__text {
    font-size: 0px;
}

div.it-Footer_actions > div.it-Footer_like > div > span.LikeLabel__text::after {
    font-size: 16px;
    content: "ハラショー!";
}
manifest.json
{
    "manifest_version": 2,
    "name": "Qiitaハラショー!",
    "description": "Qiitaのいいねをハラショー!に変えます。ハラショー!",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["https://qiita.com/*"],
            "css": ["harasyo.css"]
        }
    ]
}

使い方

  1. harasyo.cssmanifest.jsonのファイルを保存したディレクトリを用意します
  2. ChromeのURIにchrome://extensions/と入力して,拡張機能を開きます
  3. 右上にあるディベロッパーモードをオンにします
  4. 1.で保存したディレクトリをドラッグ&ドロップ
  5. ハラショー!

やりこみ要素

  • CSSにあるdivとか多分消せると思いますが,そこまでの熱意がないのでやめました(Chromeの開発者ツールを使ってセレクタ抽出するという手抜き工事しました)
  • マイルストーンにあるやつと自分がコメントしたいいね!ですが,数字といいねが同一タグ内にあるので,harasyo.cssの内容(元のフォントサイズを0にしてその後に文字を追加するやり方)をそのまま使ったら数字ごと消えて駄目でした
  • この拡張機能を追加すると,右上の拡張子ボタンQのアイコンが追加されたので,そこで表示する内容を設定できたらと思いましたが,そこまでの熱意がないのでやめました(再燃したらするかもしれない)
6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0