Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@foooomio

Twitterの丸くなったアイコンを元に戻すUserScript(&Chrome拡張機能)

追記 (16:40)

右上の自分のアイコンが丸になっていると報告を受けたので修正しました。

追記 (10:48)

Chrome拡張機能のほうが便利という声があったので、拡張機能として公開しました。インストールは以下のリンクから。

Twitter Icon Come Back - Chrome ウェブストア

ただし、Chrome拡張機能ではrun-atをdocument-bodyにできないので、document-endに変更しています。この関係で、UserScript版より若干反映が遅れます。UserScriptの導入に抵抗がない方は、以下のUserScript版をおすすめします。

リポジトリはここです。UserScript版もここに置きました。
foooomio/twitter-icon-come-back: Google Chrome extension for reverting the old-style icons for Twitter Web and Tweetdeck

追記 (02:48)

※ run-atの指定についてはdocument-startが最速ですが、bodyを変更するこのスクリプトにおいて、document-bodyが最速という意味です。

これでだいぶ安定して動くはず。上記問題は解決済み。しれっとタイトル変えました。ライセンス明記してなかったので書きました。MIT Licenseでお願いします。

(追記) 最新版は随時ここにアップしてます。
twitter-icon-come-back/userscript.js at master · foooomio/twitter-icon-come-back

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://foooomio.net
// @match        https://twitter.com/*
// @author       foooomio
// @run-at       document-body
// @grant        none
// @license      MIT License
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace('edge-design');
    new MutationObserver(function(mutations) {
        if (!mutations.some(function(mutation) {
            return mutation.oldValue.indexOf('edge-design') !== -1;
        })) return;
        document.body.className = document.body.className.replace('edge-design');
    }).observe(
        document.body,
        { attributes: true, attributeOldValue: true, attributeFilter: ['class'] }
    );
})();

無限ループしたらごめんなさい(>_<)
ちなみにアロー関数使ってないのは、TampermonkeyのLinterが認識してくれなくてな・・・

追記 (02:13)

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://twitter.com
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace('edge-design');
})();

追記 (02:07)

これが一番早くて確実。GreaseMonkeyやTamperMonkeyに以下のjsを打ち込みましょう。(@ArcCosine@githubさん、ありがとうございます!!)

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://twitter.com
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace(/edge-design/);
})();

本文

取り急ぎ。

.edge-design .Avatar,
.edge-design .DashboardProfileCard-avatarImage,
.edge-design .DashboardProfileCard-avatarLink,
.edge-design .Gallery.is-tweetless .Gallery-content,
.edge-design .Gallery.is-tweetless .Gallery-media,
.edge-design .MomentCapsuleCover .MomentUserByline-avatar,
.edge-design .MomentCapsuleItemTweet--withText .MomentUserByline-avatar,
.edge-design .MomentCapsuleSummary .MomentUserByline-avatar,
.edge-design .MomentMakerRecommendedTweetsSearch--users .MomentMakerRecommendedTweetsSearch-userContainer .avatar,
.edge-design .ProfileAvatar,
.edge-design .ProfileAvatar-image,
.edge-design .ProfileAvatar-placeholderImage,
.edge-design .ProfileAvatarEditing,
.edge-design .ProfileAvatarEditing-button,
.edge-design .ProfileAvatarEditing-overlay,
.edge-design .ProfileCard-avatarImage,
.edge-design .ProfileCard-avatarLink,
.edge-design .ProfileCardMini-avatarImage,
.edge-design .ProfileListItem-avatar,
.edge-design .ProfileUserList .Avatar {
    border-radius: 7px;
}

.edge-design .avatar {
    border-radius: 7px;
}

StylishとかStylebotとかの拡張機能を使うと良いです。漏れがあったら編集リクエストください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
10
Help us understand the problem. What are the problem?