Twitter 아이콘을 둥근 사각형으로 되돌리는 방법

2551 단어 트위터CSS

경위



Twitter의 아이콘이 둥글게 된 지 벌써 2년 반.
"지금은 예를 들면 아이콘이 둥글다는 것에 아무도 위화를 안지 말아라"
라는 주장을 보지만, 불행히도 나는 아직 위화감을 느낀다.

라는 것도 원래 둥근 아이콘 전제의 디자인이라면 좋지만,
분명히 사각 전제의 아이콘도 있어 위화감 밖에 없다.

자신의 아이콘도 사각형 디자인으로, 이 Qiita의 표시대로.
Twitter에서 사용하는 아이콘도 같은 사각형의 원본 이미지를 사용하고 있다.
우연히 둥글게 들어가 있기 때문에, 그대로 방치하고 있을 뿐. 귀찮고 (ぁ

지금 생각하면, 변경 당시는 상당히 힘들었던 공식 아카도 있었던 것이다.
예를 들어, 타카라 토미 (아이콘 메이커)
htps //w w. 아니. 이. jp / 네 ws / archi c ㎇ s / 1707/18 / 네 ws026. HTML
그 외는 matome가 상세하다.
htps // 정리. 나오 r. jp/다이/2149758066866700401
이굴에서는 아이콘이 둥글어져 잃어버린 정보량은 최대 21.46%인 것 같다.
htps : // 가시 r. 코m/ぃ/1120825

그렇다고 생각해 낸 이상, 둥근 사각형으로 되돌리고 싶어지는 것.

절차


  • 브라우저에서 Twitter 페이지를 엽니다. (Windows × Firefox에서 확인)
  • F12 키를 눌러 "개발 도구"를 표시합니다.
  • 개발 도구의 맨 왼쪽 상단에서 ""을 눌러 요소 선택 모드로 들어갑니다.
  • 임의의 아이콘에 커서를 맞추어 클릭.

  • 개발 도구에서 <div class="css-...가 강조 표시되어 있는지 확인합니다.
  • 둘 위에 <a class="css-...가 있는지 확인하고 클릭하십시오.
  • 스타일 영역에서 border-radius: 9999px를 포함하는 .r-sdzlij를 찾습니다.
       
  • 9999px를 두 번 클릭하여 0.3em로 다시 씁니다.
       

  • 이제 열린 화면뿐만 아니라,
    「홈」이나 「통지」로 이동해도 둥근 사각형의 스타일이 계승된다.

    결과



    둥근 사각형 아이콘을 즐기자.

    좋은 웹페이지 즐겨찾기