사이트 디자인 변경 파폭 엣지 크롬 확장 프로그램 Custom Style Script

쓸만한 사이트 디자인 변경 확장 프로그램 하나 소개하겠습니다. 사이트 웹페이지를 내 마음대로 변경할 수 있는 확장 프로그램이 있습니다. 이 확장 프로그램을 이용하면 사이트 형태를 내가 원하는 대로 설정할 수 있습니다.

사이트 디자인으로 불편을 주는 경우는 거의 없습니다. 단지 시각 테러를 할 뿐이죠. 그럼에도 불구하고 소수의 사이트들은 디자인으로 사용자들에게 큰 불편을 끼치기도 합니다.

크롬 확장 프로그램 Custom Style Script

디자인으로 사용자들에게 불편을 줄 경우엔 두 가지 방법으로 문제를 해결 할 수 있습니다. 발길을 끊고 더 이상 방문하지 않던가 아니면 해당 사이트의 디자인을 변경하면 됩니다.

 

내 맘대로 사이트 디자인 변경

방문자가 사이트 디자인을 어떻게 변경하냐고요? 소프트웨어를 이용하면 사이트의 디자인을 원하는 대로 변경할 수 있습니다.

많은 사람들이 사이트 디자인 변경 기능을 제공하는 확장 프로그램 또는 부가 기능을 사용하는 것으로 알고 있습니다.

파이어폭스 혹은 구글 크롬 브라우저를 사용한다면 간단하게 부가 기능이나 확장 프로그램을 이용하여 사이트 디자인을 내 입맛대로 변경할 수 있습니다.

 

사이트 디자인 변경 부가 기능 Custom Style Script

Custom Style Script 확장 프로그램을 이용하면 크롬, 엣지, 웨일 브라우저에서 네이버, 구글 등의 사이트 디자인을 변경할 수 있습니다.

크롬 브라우저는 크롬 웹 스토어 Custom Style Script 페이지에서 설치할 수 있습니다.

파이어폭스 브라우저의 경우는 모질라 파이어폭스 확장 기능 사이트의 Custom Style Script 페이지에서 설치할 수 있습니다.

파이어폭스용이나 구글 크롬용이나 사용 방법은 동일합니다.

파이어폭스 부가기능 Custom Style Script

파이어폭스는 mozilla addon 사이트에 크롬, 엣지, 웨일 등의 크로미움 기반 브라우저는 chrome webstore에 방문하여 설치하세요.

 

확장으로 사이트 디자인 변경

Custom Style Script 옵션

  1. 파이어폭스 혹은 크롬 브라우저에 Custom Style Script 확장 프로그램을 설치합니다.
  2. 도구 모음에 </> 모양의 Custom Style Script 확장 프로그램(이하 사이트 디자인 변경) 아이콘을 고정합니다.
  3. 사이트 디자인 변경 아이콘을 클릭합니다.
  4. 작은 팝업 창이 열리면 기능 버튼을 클릭합니다.
    • 몽키 스패너 아이콘을 클릭하면 옵션 페이지로 진입할 수 있습니다.
    • 전원 버튼을 클릭하면 기능 활성/비활성으로 전환 시킬 수 있습니다.

사이트별로 JavaScript와 CSS 설정 가능

  1. 사이트 디자인 변경 확장 프로그램 옵션 페이지 하단의 URL, JavaScript, Style (CSS) 영역을 이용하여 웹사이트의 디자인을 입맛대로 변경할 수 있습니다.
    • 물론 변경이 가능한 요소들만 디자인을 변경할 수 있습니다.

딴지일보 개편된 디자인

사이트 디자인 변경 확장 프로그램 사용 예를 들자면, 지난 연말 딴지일보가 사이트 개편을 하였습니다.

사이트를 리뉴얼하고 개편 하는 것은 좋은데, 방향이 다소 어긋났습니다. 보시다시피 사이트의 머리 부분이 중복 되어 겹겹이 쌓였고, 몸통은 짜리몽땅하게 짧아져 버렸습니다.

몸통이 짧은 것은 아닌데요. 간격을 두껍게 설정하여 결과적으로 짧은 몸통이 되어 버렸습니다. 과유불급이라 했습니다. 마진 값도 적당히 주어야 합니다.

여튼 일단 빨간 색과 파란 색으로 표시한 요소의 크기를 잘 기억해 두시고요.

사이트 스킨에 사용자 CSS 설정

도메인 입력하고 Style 항목에 CSS 소스 삽입

  1. 사이트 디자인 변경 확장 프로그램 옵션 페이지에서 URL에 딴지일보 도메인을 입력합니다.
  2. Style (CSS) 부분에 사용자 설정 CSS 값을 입력합니다.
  3. 우측의 플러스 버튼을 클릭하여 입력한 내용을 저장합니다.

딴지일보 사용자 설정 CSS 예시

#categoryWrap {display : none;}
#board_style_list {margin-top : 16px; width: 900px;}
.board_title_display h1 {color: orange;}
table.fz_change tbody tr:nth-of-type(2n-1) {background: #f5f5f5;}
.boardR .read_header h1 {font-size: 14px;}
.talk {color : orange;}
[class*=" xi-"], [class^=xi-] {visibility: hidden;}
.board_title_display {margin: 0px; clear: both; position: relative; display: inline-block; width: 100%;}
#boardWrap {margin: 0px;}
#header {display : none;}
.board_sort {display : none;}
.add_display.mt_0 {display : none;}
.board_con .list_style table tbody tr td {padding: 3px;} /* 글 목록 간격 */
.board_con .list_style table thead {height: 40px; line-height: 40px;} /* 글 목록 - 헤더 */
.fa-thumbs-o-up {color: blue !important;} /* 추천 */
.fa-thumbs-down {color: red !important;} /* 비추천 */
#ddanzi_sub_display {clear: both; width: 1230px !important; box-sizing: border-box;}
.pagination {float : left; width : 80%; line-height: 24px; padding : 12px 0px 0px 0px; margin : 0px;}
.board_page {padding : 4px 0px 0px 0px;}
.feedback form textarea {width: 980px !important}
#cmt_list ul li {position: relative; border-bottom: 1px solid #d9d9d9; padding: 4px; display: block; width: 100%;}
#cmt_list ul .re_comment {background: #fafafa; padding: 4px;}
#cmt_list ul li .fdComment {width: 680px; height: auto; font-size: 13px; line-height: 8px; margin : 8px;}
.xe_content {color: #000; font-size: 12px; line-height: 24px;}
.boardR .read_footer {position: relative; border-top: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; padding: 8px; height: auto; margin: 0px; overflow: hidden;}
.boardR .voteWrap.buttons {margin: 8px; text-align: center;}
.add_display.center {display : none;}
#cmt_list ul li {position: relative; border: 1px solid #d9d9d9; padding: 4px; display: block; width: 100%;   background-color: #f5f5f5;}

딴지 게시판에 공유된 CSS를 제가 사용하는 2560 x 1440 모니터 환경에 맞게 살짝 수정한 CSS입니다.

모니터 하나에 창을 2개 띄워 사용하기에 1280 x 1440이라 해야 맞겠네요. 저와 같은 모니터 해상도로 딴지일보를 이용하신다면 CSS 내용 복사하여 사용하세요.

도메인 별로 입력한 내용 저장하여 사이트 디자인 변경

참고로 여러 사이트를 등록하여 목록으로 관리할 수 있습니다.

딴지일보 Custom Style Script 적용 후 사이트 디자인 변경

다이어트 시킨 CSS 소스가 적용되면 딴지일보 자유 게시판 목록은 위와 같은 모습으로 보여지게 됩니다.

사이트 및 웹페이지 디자인 요소 변경

사이트나 블로그를 운영해 보신 분들은 잘 아시겠지만 폭이나 넓이, 색상, 폰트 등 거의 대부분의 디자인 요소들은 입맛대로 변경할 수 있습니다.

JavaScript에 jQuery나 Bootstrap 소스를 추가하면 보다 미려한 디자인으로 변경할 수 있습니다.

사실 Custom Style Script 같은 부가 기능은 이미 오래전부터 존재했었습니다. 더 많은 기능을 이용할 수 있는 그리스몽키 같은 것들이 있습니다.

이 Custom Style Script은 간단한 기능을 제공하는 만큼 사용 방법이 쉬운 장점이 있습니다. 특정 사이트의 외형을 살짝 변경하기에는 부족함이 없는 부가 기능입니다. 문제는 CSS 수정하는 것이 엄청난 노가다라는 것이 문제이지요.

파이어폭스, 크롬 등의 웹 브라우저에서 F12키를 누르면 개발자 도구가 실행 됩니다. 검사기에서 잘 살펴보면 사이트의 구조와 CSS 스타일을 살펴 볼 수 있습니다. 마음에 안 드는 곳의 넓이, 높이, 색, 글꼴, 배경색 등을 찾아 입맛대로 변경해 주면 됩니다.

사이트 웹페이지 내의 링크는 크롬 새 탭 열기 확장 프로그램 등을 이용하면 열리는 방식을 변경할 수 있습니다.

구글 계정 여러개 사용하고 있다면 크롬 사용자 계정 추가 글에서 설명한 방법으로 크롬 브라우저에서 필요한 만큼의 프로필을 만들어 사용하세요. 크롬 브라우저는 프로필 마다 환경을 달리 설정하여 사용할 수 있습니다. 크롬 바로가기 만들기 글을 참고하여 바탕화면에 바로 가기를 등록해 놓고 사용하면 정말 편합니다.

Leave a Comment