2020. 2. 20. 20:23
20

크롬, 웨일 확장 프로그램 추천

Skin/스크랩 2020. 2. 20.

추천에 앞서 필자는 웨일을 메인 브라우저로 사용하고, 여기서 부족한 기능만 확장 프로그램을 추가해 사용 중이며, 제가 사용 중인 확장 프로그램을 기록 겸 추천드리기 위해 간단하게 작성합니다.

웨일 브라우저 확장 프로그램 스토어에 있는 확장 프로그램은 웨일 전용이며, 크롬 확장 프로그램 스토어는 크로미움 기반 브라우저에는 공용으로 사용 가능합니다. ( 확장 프로그램 또는 브라우저에 따라 오류가 발생할 수 있음 )

웨일을 네이버 아이디로 로그인해 사용 중인 경우 브라우저를 재설치하거나 다른 환경에서 설치하면 자동으로 이전에 사용하던 확장 프로그램이 설치됩니다.


웨일 브라우저 확장 프로그램 스토어

아래 소개드리는 확장 프로그램 외에도 다양하게 있으니 필요한 프로그램이 있는지 확인해보세요. 없을 경우 저어기 아래 안내드리는 크롬 확장 프로그램 스토어에서도 확인하세요.

 

웨일 스토어

 

store.whale.naver.com


1. 웨않되 - 맞춤법 검사기

네이버 웨일의 사이드바에도 맞춤법 검사기가 기본 내장되어있지만 이 확장 프로그램이 더 특별한 것은 textarea 같은 영역에 글을 작성하면 실시간으로 맞춤법이 틀린 곳을 지적해줍니다.

단점은 이유가 무엇인지 모르겠지만 이 실시간 맞춤법 지적이 싱크가 잘 맞지 않는 경우가 있습니다. 하지만 기능은 정상 작동하므로 우측 사이드바에서 점검하면 됩니다.

 

웨않되 - 맞춤법 검사기

웨일 브라우저용 한글 맞춤법 검사기 (feat. NAVER 맞춤법 검사기)

store.whale.naver.com

 

2. uBlock Origin

광고 차단 프로그램, 유튜브와 네이버 TV 광고도 차단됩니다.
일부 사이트가 비정상 작동하는 경우가 있는데 이럴 경우 우측 상단의 아이콘을 눌러 광고 차단 기능을 끄고 킬 수 있습니다. (저장됨)

 

uBlock Origin

이 부가 기능은 효율적인 차단기입니다. CPU와 메모리에 주는 부담이 적습니다.

store.whale.naver.com

 

3. 웹디자이너에게 추천하는 Browser Sync

우측 사이드바에서 모바일 버전을 실시간으로 확인할 수 있습니다.

 

Browser Sync

PC와 Mobile의 UI를 한 화면에서 동시에!

store.whale.naver.com


크롬 확장 프로그램 스토어

 

Chrome 웹 스토어

Chrome에 사용할 유용한 앱, 게임, 확장 프로그램 및 테마를 찾아보세요.

chrome.google.com


1. uBlock Origin

광고 차단 프로그램, 유튜브와 네이버 TV 광고도 차단됩니다.
일부 사이트가 비정상 작동하는 경우가 있는데 이럴 경우 우측 상단의 아이콘을 눌러 광고 차단 기능을 끄고 킬 수 있습니다. (저장됨)

 

uBlock Origin

이 부가 기능은 효율적인 차단기입니다. CPU와 메모리에 주는 부담이 적습니다.

chrome.google.com

 

2. LastPass

각종 사이트의 비밀번호를 저장해주며 중복되었는지 관리해주는 프로그램입니다.
브라우저 자체에도 패스워드를 저장해주는 기능이 있지만 브라우저끼리 연동이 되지 않기 때문에 여러 브라우저를 사용할 경우 크로미움 기반 브라우저끼리 연동하여 사용할 수 있습니다.

 

LastPass: Free Password Manager

LastPass, an award-winning password manager, saves your passwords and gives you secure access from every computer and mobile device.

chrome.google.com

 

3. 북마크 사이드바

웨일에도 사이드바에 북마크가 있고, 기본 적으로 모든 웹브라우저에 북마크 바가 있지만 접근성과 시인성이 떨어지거나 불편함을 초래하기도 합니다.

이 사이드바는 북마크 바를 별도 생성하여 내가 원하는 위치에 설정할 수 있으며, 사이즈와 색상을 변경할 수 있고 북마크 관리도 수월하며 가장 큰 장점은 내가 설정한 위치에 마우스를 가져가면 북마크 바를 불러올 수 있는 아이콘을 보여주거나, 바로 북마크 바를 볼 수 있게 해 줍니다.

웨일의 경우 사이드바를 숨겨두고 쓰면 상단에 사이드바 버튼 클릭 > 북마크 아이콘 클릭을 해야 북마크를 사용할 수 있는데, 필자의 경우 브라우저의 우측 모서리에 마우스를 가져다 대기만 하면 북마크 바가 나오도록 설정해서 불필요한 클릭 2번을 줄였습니다. 단점이 있다면 스페이스 기능으로 화면을 분할해 사용할 경우 각각의 영역에서 사이드바가 튀어나오네요.

 

북마크 사이드바

브라우저 화면 가장자리에 북마크 목록을 표시하거나 숨길 수 있는 사이드바를 추가하세요.

chrome.google.com

 

4. Save to Pocket

웨일의 스크랩북과 비슷한 기능으로 저장을 원하는 페이지에서 우클릭 > Save to Pocket을 누르면 포켓에 저장되며, 태그 설정을 통해 구분, 우측 상단의 포켓 아이콘 우클릭 > open your pocket list에서 태그별 분리해 저장해둔 사이트, 이미지, 동영상 등을 쉽고 빠르게 확인할 수 있는 확장 프로그램입니다.

여러 브라우저를 사용할 경우 더욱 추천합니다.

 

Save to Pocket

아티클, 동영상 등을 캡처하는 가장 쉽고 가장 빠른 방법.

chrome.google.com

 

5. Keepa - Amazon Price Tracker

해외 직구 유저는 거의 필수로 사용하는 아마존에서 가격 추이를 그래프로 보여주며, 내가 원하는 가격을 설정해두면 메일을 통해 알려주는 기능을 가진 확장 프로그램입니다. 일명 낙타(https://camelcamelcamel.com/)를 이용하시는 분도 많지만 필자는 이 확장 프로그램을 주로 이용하는 편입니다.

 

Keepa - Amazon Price Tracker

Adds price history charts and the option to be alerted on price drops to all Amazon sites.

chrome.google.com

 

6. Checker Plus for Google Calendar™

구글 캘린더를 쉽고 빠르게 관리할 수 있는 확장 프로그램입니다.
설치 후 나오는 창에서 왼쪽 버튼을 클릭해도 무반응일 경우 우측 버튼으로 구글 아이디와 연동하면 됩니다.

 

Checker Plus for Google Calendar™

See your next events, get meeting desktop notifications, add or snooze events without opening the Google Calendar page!

chrome.google.com

 

7. 웹디자이너에게 추천하는 CSS Viewer

우측 상단의 확장 프로그램 아이콘을 누른 후 원하는 곳에 가져다 대면 css 속성 값을 알려줍니다.

 

CSSViewer

A simple CSS property viewer.

chrome.google.com

 

8. 웹디자이너에게 추천하는 ColorZilla

우측 상단의 확장 프로그램 아이콘을 누른 후 원하는 곳에 가져가 클릭하면 바로 클립보드에 색상 코드가 저장되어 붙여 넣기 후 사용할 수 있습니다.

 

ColorZilla

Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

chrome.google.com

2020. 2. 20. 17:50
20

브라우저 추천 ( 크롬 제외, 텍스트 설명 )

Skin/스크랩 2020. 2. 20.

브라우저 추천

크롬은 전 세계에서 사용자가 1위인 브라우저로 이 글에서는 크롬을 제외한 다른 브라우저를 추천합니다.
따라서 이 글은 인터넷 익스플로러에서 벗어나길 원하거나, 크롬이 아닌 다른 브라우저를 사용해보고자 하는 분께서 참고하시면 약간의 도움이 될만한 글입니다.


1. 웨일 브라우저

 

네이버 웨일 브라우저

웨일로 만나는 새로운 인터넷 경험

whale.naver.com

네이버에서 제작한 크로미움 기반 인터넷 웹 브라우저.
전체적으로 귀여우면서도 깔끔한 디자인의 웹브라우저로 다양한 기능과 테마를 지원한다.

웨일 브라우저

- 기능

  • 자체 캡처 프로그램 내장
  • 스페이스 - 1개의 탭에서 화면을 좌우로 분할해 사용할 수 있다. (한 개의 탭에 웹 페이지 2개)
  • 사이드바 - 비발디 브라우저에서 따온 것 같은 디자인과 기능이다.
    퀵 서치(새 탭에 네이버를 띄우지 않아도 검색(모바일 버전), 파파고, 시간, 타이머, 계산기, 달력, 단위 변환, 환율 정보, 뮤직 플레이어, 스크랩북, 북마크 등 제공, 그 외 내가 원하는 사이트를 사이드바에 추가할 수 있다 (모바일 버전으로).

  • 모바일 창
  • 사이트 번역 (다양한 언어를 지원하지는 않음)
  • 스크랩 북 (즐겨찾기와 비슷하지만 다른 기능)
  • 주소 입력 창에서 검색할 시 검색 엔진 선택 가능
  • 주소 입력 창에서 자주 방문한 사이트를 원클릭으로 이동
  • 마우스 제스처 기본 내장

- 장점

  • 새 탭 화면을 시계, 자주 방문한 사이트 등으로 설정할 수 있으며, 배경화면을 마음대로 설정할 수 있다. 덕후로써는 움짤을 배경으로 설정할 수 있는 것이 가장 큰 장점이라고 생각한다.
  • 네이버 웨일 연구소라는 사이트를 통해 업데이트 정보와, 버그 신고, 사용자 의견, 문의 등을 할 수 있다.
    필자의 경우 사용 중 문제가 있어 문의를 했고 원격제어로 통해 버그 제보와 개선이 된 경우가 두 번 있다.
  • 웨일 자체 확장 프로그램 스토어가 있다. 개인적으로는 웨않되 라는 맞춤법 검사 프로그램을 추천한다.
    물론 크롬에서 제공하는 확장 프로그램 스토어도 이용할 수 있다.
  • 모바일용 웨일 브라우저도 있어서 네이버 계정으로 로그인해 동기화할 경우 PC에서 보던 웹페이지를 폰에서 URL을 입력하지 않아도 새 탭에서 쉽게 다른 기기에서 보던 웹 페이지를 불러올 수 있다.

- 단점

  • 아무래도 구글에서 제공하는 크로미움 엔진을 기반으로 제작하는 것이다 보니 구글의 크롬보다는 엔진 업데이트 속도가 늦다.
  • 메모리를 크롬보다 많이 잡아먹는 것 같다.
  • 타 브라우저에 비해 웹페이지 로딩이 약간 느리다.
  • 이 부분은 필자의 경우인데 사용하는 그래픽카드가 라데온 rx570인 점을 먼저 알려드리며, 고화질이나 아이돌 댄스 유튜브 시청 시 상하, 또는 좌우 선이 생기며 잘리는 경향이 있다. 프리 싱크도 켜져 있고, 그래픽카드에서 코덱을 지원하지 않아서 그런다고 보기에는 크롬에서는 그런 현상이 없다.

- 여담

이 글을 작성하게 된 계기가 웨일에서 개인 정보 보호 개정으로 사용자가 입력한 검색어, 검색 엔진, 추천 검색어를 수집하여 활용한다고 하여 연구소에 이를 반대하는 의견을 남겼는데 다음 날 빠르게 개정안이 취소되었다. 이로 인해 필자는 하루라는 시간을 갈아탈 브라우저를 찾고 설정하는 데 사용하고 말았지만 다시 웨일을 지속해서 사용할 수 있게 되었다. 이렇게 타 브라우저와는 다르게 웨일은 국내 사용자와 또 개발자가 소통할 수 있는 것이 장점이라는 것을 한번 더 느꼈지만 여전히 네이버의 아래라는 찝찝함은 남게 되었다.

 

2. 마이크로소프트 엣지 (크로미움)

 

Download New Microsoft Edge Browser

See what's new on the latest version of the Microsoft Edge browser. Explore features, rewards, and more before you download the new browser today.

www.microsoft.com

윈도우10에 기본으로 ie와 함께 설치 되어있으나 불편함으로 인해 외면 받던 엣지를 크로미움 기반 엔진으로 재 개발한 웹 브라우저.

마이크로 소프트 엣지 / 하단에 사이트는 내 티스토리만 내가 입력한거고 나머지는 기본으로 설정되어있다.

아직 윈도우 업데이트를 통해서 자동 업데이트는 되지 않고 위 사이트를 통해서만 업데이트가 가능하며, 세상에 나온 지 얼마 되지 않아서 그런지 정말 깨끗하고 아무것도 없고 빠르다.

크로미움 엔진이기 때문에 크롬 확장 프로그램을 사용할 수 있으며, 자체 확장 프로그램 스토어도 있는 것 같으나 대부분 크롬 확장 프로그램과 동일해 보였다.

출시된 지 얼마 되지 않아 장점보다는 부족한 점이 아직은 더 많이 보이지만 라이트 하게 사용하는 것에는 무리가 없어 보인다. 웹 브라우저가 뭐가 뭔지 모르겠고 타 회사 꺼 쓰기 싫고 그냥 제일 기본적인 것을 원한다면 위 사이트에서 업데이트하거나, 자동 업데이트가 되길 기다렸다 사용하길 권한다.

 

3. 비발디

 

Vivaldi — The browser that puts you in control

Your browser matters. Vivaldi is a new browser with unrivaled customization and control. Fast, secure and flexible – this is a browser made for you.

vivaldi.com

사이트는 영문이지만 브라우저는 한국어 지원.

이 비발디 브라우저는 마찬가지로 크로미움 엔진 기반이며 오페라 브라우저의 창립자가 여러 이유로 회사를 그만두고 나와 제작한 브라우저라고 한다.

비발디 브라우저

- 장점 및 기능

  • 화면 분할 ( 좌우 - 2 , 상하 - 2 , 상하좌우 - 4 지원 )
  • 자체 캡처 프로그램 내장
  • 쉽고 다양한 설정 기능
  • 테마 직접 커스텀 가능
  • 메모리 사용이 비교적 적음
  • 웹페이지 로딩 속도 빠름
  • 이전 페이지, 다음 페이지 버튼 외에 별개로 이전에 보던 사이트, 앞서 보던 사이트를 바로 넘어갈 수 있다.
  • 확대 축소를 단축키가 아닌 우측 하단의 바를 통해 쉽고 빠르게 변경할 수 있다.
  • 자체 광고 차단 기능 ( 유튜브 광고까지 차단이 되는 것 같다 )
  • 그 외 다양한 기능 ( 스크린샷 참고 )
  • 크로미움 엔진 업데이트가 빠른 편
  • 크롬 확장 프로그램 스토어 사용 가능
  • 모바일 웹 브라우저가 있다.
  • 주소 입력창에서 단축키를 통해 검색 엔진을 지정 후 검색할 수 있다.
  • 검색엔진에 기본적으로 네이버가 없다. ( 별도로 추가하면 된다 )
  • 자체 번역 기능이 없다 ( 확장 프로그램으로 대체 가능)
  • 탭 더미로 묶기 ( 여러개의 탭을 하나로 묶을 수 있음 )
  • 마우스 제스처 기본 내장

- 단점

  • 그 외 다양한 기능 ( 스크린샷 참고 )라고 해둔 기능들은 유지가 되지 않고 새 탭마다 설정해야 하는 듯함
  • 자체 확장 프로그램 스토어 없음
  • 초보자에겐 뭔가 복잡함 ( 약간의 탐색 시간 필요 )
  • 사이드바와 하단바가 차지하는 자리가 싫음 ( 물론 없앨 수 있다 )
  • 설치 파일 용량이 그리 크지 않은데 거의 한 시간이 걸려 다운로드하였던 기억이... ( 서버 상태에 따라 다른 것 같으나 타 브라우저에 비해 느리긴 느림 )
  • 확장 프로그램의 순서 변경, 사이드바, 하단바 기능들의 위치나 순서 변경이 불가능

비발디 설정창


이외의 브라우저인 파이어폭스, 오페라, 브레이브 등을 설치해 잠시 동안 사용해보았으나 일반 유저 입장에서는 크롬과 크게 다른 점이 없고, 딱히 해당 브라우저만의 특징이랄 것을 느끼지 못했으며, 크롬에서 넘어와 웨일을 메인으로 사용하던 입장에서는 그나마 비발디가 유용하게 사용할만했습니다.

주소 입력창을 클릭했을 시 자주 사용하는 사이트의 목록만 떠 주었다면........ 옮겨 갔을 것 같아요. (웨일보다 로딩 속도가 빨라서 ㅠㅠ) 이를 대체할 확장 프로그램을 찾아보았으나 찾지 못했습니다.

결론적으로 웨일에서 타 브라우저로 넘어가지 않아도 되게 되었지만 하루 동안 탐색하고 느껴본 바를 정리하고자 글을 남깁니다.

2020. 2. 11. 03:55
11

새 에디터 인용구 적용 되지 않는 문제 해결

Skin/스크랩 2020. 2. 11.

네.. 또 티스토리에서 바꿔서 이런 문제가 생겼습니다.

(아니 쓰잘데기 없이 왜 자꾸 바꾸는지 도통 이해가 안되네)

 


쉽게 설명하면

 

.tx-quote-tistory 는 기존 에디터(구에디터)의 인용구

 

#tt-body-page blockquote[data-ke-style='normal'] 는 기존 새 에디터의 인용구 1

#tt-body-page blockquote[data-ke-style='style2']는 변경된 새 에디터의 인용구 1

 

#tt-body-page blockquote[data-ke-style='box'] 는 기존 새 에디터의 인용구 2

#tt-body-page blockquote[data-ke-style='style3']는 변경된 새 에디터의 인용구 2

 

 

간단하게 normar을 sytle2로, box를 style3으로 바꾸면 적용이 될 것 같겠지만.
기존에 새 에디터로 작성하신 글은 여전히 normal과 box로 적용이 되기 때문에, 기존에 새 에디터로 인용구를 사용하여 작성한 글이 있다면 변경 할 경우 그 글은 적용이 안되게 됩니다. 그러니까 normal과 box 와는 별개로 옆에 콤마를 붙여 추가해주면 됩니다.

 

아래 안내를 참고하여 css 수정을 하세요.

수정 후에는 스킨에 따라 다른 곳에 더 있을 수 있으니 위에 안내드린 주황색 부분을 검색해서 추가로 수정합니다.


(더보기와 마찬가지로 또 수정할지 모르니 어느정도 안정이 되었다 싶으면 기존 스킨들 업데이트 하겠습니다.. 제가... 스킨이 너무 많네요....)

 

/* 인용구1 */
.tx-quote-tistory,
blockquote[data-ke-style='normal'],
#tt-body-page blockquote[data-ke-style='normal'] {
	~
	~
	~
}

/* 기존 소스가 위와 같이 있다면 아래와 같이 수정 */

.tx-quote-tistory,
blockquote[data-ke-style='normal'],
#tt-body-page blockquote[data-ke-style='normal'],
blockquote[data-ke-style='style2'],
#tt-body-page blockquote[data-ke-style='style2'] {
	~
	~
	~
}

.tx-quote-tistory:before,
blockquote[data-ke-style='normal']:before,
#tt-body-page blockquote[data-ke-style='normal']:before {
	~
	~
	~
}

/* 기존 소스가 위와 같이 있다면 아래와 같이 수정 */

.tx-quote-tistory:before,
blockquote[data-ke-style='normal']:before,
#tt-body-page blockquote[data-ke-style='normal']:before,
blockquote[data-ke-style='style2']:before,
#tt-body-page blockquote[data-ke-style='style2']:before {
	~
	~
	~
}

/* :before가 아니더라도 ~~~:after / a / a:hover 등이 있으면 위와 같은 방식으로 추가하면 됩니다 */


/* 인용구2 */
blockquote[data-ke-style='box'],
#tt-body-page blockquote[data-ke-style='box'] {
	~
    ~
    ~
}

/* 기존 소스가 위와 같이 있다면 아래와 같이 수정 */

blockquote[data-ke-style='box'],
#tt-body-page blockquote[data-ke-style='box'],
blockquote[data-ke-style='style3'],
#tt-body-page blockquote[data-ke-style='style3'] {
	~
    ~
    ~
}

/* 마찬가지로 뒤에 :before / :after / a / a:hover 등이 있으면 위와 같은 방식으로 추가하면 됩니다 *
2020. 1. 5. 20:31
05

아마존 파이어 HD8 순정 한글로 변경, 구글 어시스턴트 사용하기 (NO루팅, PC불필요, 재부팅OK, 업데이트OK)

Skin/스크랩 2020. 1. 5.

이 글은 다수의 방문자를 위한 친절한 설명이 아닌 어쩌다 발견한 방법을 나중에 내가 보기 위해서 간략하게 작성하는 점 참고 바랍니다.  (어시스턴트는 설명 미흡) 따라서 질문해도 답변 안줌


일단 결과 부터말하자면

1. 내 아마존 파이어가 구려서인지 재부팅한지 오래되어서인지 매우 느렸다..
2. 파이어 OS가 안드로이드를 커스텀한 것이기 때문에 완벽하게 모든게 한글이 되지는 않아서 기본 OS와 설정들은 완벽하게 한글이 되지는 않지만 설치한 어플이 한글이 지원되는 어플이라면 이건 폰에서 사용하는 것과 동일하게 한글로 나온다.
3. 어시스턴트 매우 버벅거린다. 유튜브에서 음악 틀어달라니까 유튜브 어플은 켜졌는데 오류가 났다. 다시 실행했을 땐 됐다.




준비물  

1. 아마존 파이어 HD8 ( 다른 기기가 없으므로 될지 안될지 모름 )  

2. 구글 플레이 설치 ( 이미 친절하게 설명해주신 분들이 많으니 링크로 대체 )

 

아마존 파이어 HD8 구글플레이 - Google 검색

파이어 HD 10, HD 8, 7 태블릿은 아마존 커스텀 안드로이드 OS를 사용하기 때문에 일반 안드로이드 태블릿과 다르게 구글 플레이 스토어가 설치되어 있지 않습니다.

www.google.com

3. 이건 필요한지 아닌지 모르겠지만 내 파이어 HD 8은 광고 제거 되었음 ( 아마존 라이브챗 통해서 진행함 )

 

아마존 파이어 HD8 광고 제거 - Google 검색

추가적으로, 불필요한 아마존 앱 제거를 해야 진짜 쾌적하게 파이어를 태블릿처럼 사용할 수 있는데, 먼저 기본적인 설정을 마친 후, 이 과정은 따로 포스팅을 하도록 ...

www.google.com


파이어os 한글로 바꾸기

1. 구글플레이에서 구글 어플 설치 (구글어시스턴트 아니다.)
구글 어시스턴트는 안드로이드 6.0이상 지원되기 때문에 파이어 HD8은 5.0기반인가 그래서 검색해도 나오지 않는다. 그러나 구글 어플을 설치하면 어시스턴트 사용이 가능하다

 

Google - Google Play 앱

Google 앱을 통해 내가 관심 갖는 주제에 관한 최신 정보를 확인할 수 있습니다. 질문의 답을 빠르게 확인하고, 관심분야를 탐색하고, 나에게 중요한 주제와 관련된 소식을 피드로 받아보세요. Google앱은 사용하면 사용할수록 더 유용해집니다. 검색 및 탐색: • 주변 상점 및 식당 • 실시간 스포츠 점수 및 일정 • 영화 시간, 출연진, 리뷰 • 동영상 및 이미지 • 뉴스, 주식 정보 등 • 웹에서 찾을 수 있는 모든 정보 맞춤설정 피드 및 알림*:

play.google.com

2. 구글 어플 실행 > more > setting > google assistant > assistant > languages
여기서 언어 설정을 하면 이거는 구글 어시스턴트의 언어를 설정하는 것이고,
밑에 파란색으로 Android language settings가 있는데 이걸 누른다.

Language preferences 페이지가 나오면 여기서 add a language 를 눌러 저어기 아래 한국어 > 대한민국 선택 후 우측 햄버거 버튼을 이용해 한국어(대한민국)이 1순위가 되도록 한다

 

여기까지 하면 파이어 os의 디폴트 언어가 한국어가 된다.
하지만 앞서 적어놓은대로 파이어os는 커스텀os이기 때문에 완벽하게 모든 부분이 한글이 되지는 않고 일부만 한글로 변환되고, 설치한 어플 중 한글이 지원되는 어플은 한글로 나온다.


구글 어시스턴트 사용하기

아까 들어갔던 구글 어시스턴트 설정은 아무리 만져도 어시스턴트 설정이 되지 않았다.
기본 어플이 알렉사로 되어있어서 알렉사를 구글 어시스턴트로 바꾸는 작업이 필요한데 설정과 개발자 옵션 모두 이걸 찾을 수가 없었다. 

그러나 그냥 며칠 냅두다보니 구글 알림이 어시스턴트를 사용해보라고했는지 뭐라했는지 어시스턴트에서 무슨 알림이왔고 만지다보니 음성을 설정해야한다고 했는데 구글 앱에서 눌렀을 땐 아무리해도 안되던게 기본 앱을 바꿔야한다며 리스트를 보여줬고 여기서 알렉사에서 구글 어시스턴트로 설정을 바꾸니 내 음성 설정을 할 수 있었다.

그 이후로는 구글 설정의 어시스턴트 설정과 런처 설정이 다 가능했고 파이어 hd 기본 잠금화면에서 왼쪽 하단에 마이크를 드래그(?) 했을때도 구글 어시스턴트가 나왔다. (안나올때도있다...안나올때가 더 많은 것 같다...) 

폰에서 설정해둔 루틴도 파이어hd8에서 잘되었다. 벅스 실행도 잘 되네.

무튼간 어시스턴트에서 알람을 띄워줘야 기본 어플을 알렉사에서 구글 어시스턴트로 바꿀 수 있다는게 핵심.
어쩌다 다른 방법을 또 발견하면 추가해두겠음


여담

벅스가 원래 기기등록을 해야만 완곡 플레이가 되었는데 정책이 바뀐건지 등록을 안했는데도 완곡 플레이가 되네.;
원래그런건지. 정책이 바뀐건지 암튼 모르겠지만 저장, 다운로드만 등록해야하나보다
어차피 파이어 hd는 늘 와이파이 상태니까 저장 안해도 괜츈

2019. 12. 28. 19:11
28

커미션 스킨 사용 안내 (19.12.28 기준)

Skin/스크랩 2019. 12. 28.

이 글은 커미션 제작 완료 된 스킨의 사용 방법 안내를 위한 글이므로, 커미션 의뢰 안내를 찾으시는 분께서는 링크로 이동하세요.




커미션 스킨은 제작한 시기, 시안에 따라 제작 방법이 다르기 때문에 아래 안내드리는 것과 다르거나 일부가 없거나 더 있을 수 있습니다.
안내되어 있지 않는 부분 중 중요한 부분은 스킨 파일 전달 시 안내드리고 있고 이외의 부분은 참고하시면 어느 정도 도움이 될 것 같습니다.




스킨 기본 사용 안내

  • 저는 주기적으로 컴퓨터를 포멧하기 때문에 스킨 파일이 지워질 수 있습니다. 반드시 스킨 파일을 별도로 백업해주세요!!

  • 단축키 안내 (관리자 페이지, 글 쓰기, 홈, 방명록으로 이동 등)

  • 이전에 제 스킨을 구매하셔서 스킨 옵션을 설정해 사용하신 적이 있다면, 이전 설정 값이 남아있기 때문에 스킨을 변경해도 이전 스킨 설정값이 남아있을 수 있습니다. 이런 경우 제공하신 시안을 토대로 변경하거나, 본인이 원하는대로 커스텀하여 사용하시면 됩니다. 오류가 아닙니다.

  • 크롬, 웨일 등 크로미움 기반 브라우저 외 브라우저에서는 색상등 몇몇 기능을 추가 설정(스킨 옵션) 에서 변경해도 적용되지 않고 기본 설정 값으로만 설정됩니다. 변경을 원하시면 직접 css에서 설정을 해주세요.

  • 대댓글 버튼 / 댓글, 방명록에 자동 html 기능은 댓글 페이지는 첫 페이지에만 적용되며, 다음 페이지, 새 댓글, 새 방명록, 댓글 및 방명록 수정 시에는 적용되지 않습니다 (능력 한계)

  • 댓글 방명록에 자동 html 기능중 유튜브 영상은 주소에 - 와 같은 영숫자가 아닌 다른 기호가 있으면 비정상 작동합니다. (능력 한계)

  • 유튜브 반응형은 기존 에디터, 댓글, 방명록에서만 적용되며, 세로 방향(세로캠)으로 사용 시 iframe 소스에서 width와 height의 수치를 서로 바꿔 입력하시면 반응형 세로캠이 됩니다.

  • 스크립트를 사용하지 않고 부분 목록형 등을 적용하기 위해 기존에 사용하던 소스를 변경하였고 이 변경된 소스는 티스토리에서 보호글 목록에 관한 부분을 제공하지 않아 목록에서 보호글이란 표기가 되지 않습니다.




스킨 설치, 적용, 설정 방법

대부분의 기본적인 사용 방법은 아래 비루한 영상에 설명이 되어있으니, 티스토리 초보이신 분 께서는 꼭 보시길 추천드립니다.




요약 필수 설정

1. 관리 > 스킨 편집 - 홈설정, 기본 설정에서 글 수, 목록 구성 요소 설정 필수
2. 의뢰한 목록 형태가 두가지 이상인 경우관리 > 스킨 편집 > 기본 설정 - 기본 목록 스타일 재설정
   →
 관리 > 콘텐츠 - 카테고리 관리 > 각각 카테고리 마우스 오버 > 관리 클릭 > 목록 스타일 설정 필수
3. 구에디터를 기본 사용하는 경우 관리 > 스킨 편집 > 스킨 옵션 - 넓이 설정
   관리 > 콘텐츠 - 설정 > 에디터 가로 폭은 [ ] px로 설정합니다. 에서 변경한 사이즈의 본문 영역 넓이를 입력
4. 각각의 카테고리 이름이 긴 경우 관리 > 콘텐츠 - 카테고리 관리에서 카테고리 명이 [] 글자까지 표시됩니다. 설정

5. 반응형을 의뢰한 경우 관리 > 꾸미기 - 모바일 > 티스토리 모바일웹 자동 연결을 [ 사용하지 않습니다 ] 설정




목록 설정 방법

목록 형태를 한가지가 아닌 두가지 이상 의뢰하신 분께서는 반드시 아래 안내를 참고하여 목록을 설정하세요.
첫 페이지만 목록이 정상적으로 나오고, 각각의 카테고리를 눌렀을 때 목록이 비정상적인 경우 이 부분을 설정하지 않은 것이니 설정하세요.

  • 홈 화면 글 수, 글 목록 글 수 - 홈 화면은 첫 화면, 글 목록은 각 카테고리 클릭 시의 목록 수를 정합니다. pc버전과 모바일 버전의 썸네일 갯수가 맞도록 설정해주세요
    예 - pc버전 가로 3개, 모바일 가로 2개씩 썸네일이 나온다면 목록 수를 6개나 12개 같이 6의 배수로 설정하시면 됩니다.
  • 목록 구성 요소 - 목록만 나오거나, 내용만 나오거나, 목록과 내용이 함께 나오도록 설정이 가능합니다.
  • 태그 클라우드 순서 - 태그 클라우드를 의뢰 시에만 적용이되는 부분으로 의뢰하지 않은 경우 아무거나 설정해도 무관합니다.
  • 기본 목록 스타일 - 중요! 디폴트로 사용할 목록의 형태를 설정합니다.
    처음 스킨 설치 시 목록이 비정상적으로 나오는데 여기서 목록 스타일을 설정해주면 정상적으로 보여집니다.
    (갤러리형으로 되어있어도 다시 한번 선택하고 적용을 눌러주세요!!)
    이후 각각의 게시판에 적용이 되어있지 않다면 아래 안내를 따라 갤러리형 등을 설정하세요



부분 갤러리형 or 부분 목록형 or 부분 웹진형, 카테고리 공개 여부 설정

관리 > 콘텐츠 - 카테고리 관리

변경하고 싶은 카테고리에 마우스를 가져다대면 몇 가지 버튼이 표시되는데 이 중 관리를 클릭합니다.
만약 지원하지 않는 스킨이라는 안내가 나오면 새로고침을 하거나,
관리 > 스킨 편집 > html 편집 > 파일업로드 > index.xml 파일을 업로드 후 다시 설정해봅니다.

  • 공개 설정 - 카테고리 자체를 비공개할 수 있습니다. 로그인한 블로그 주인에게는 카테고리가 보이고, 주인이 아닌 경우 보이지 않습니다.
  • 목록 스타일 - 부분 갤러리형 or 부분 목록형 or 부분 웹진형을 설정합니다.
  • 대표 이미지 - 카테고리에 대표 이미지를 적용합니다. (시안에 따라서)
  • 카테고리 소개 - 카테고리에 관한 설명을 작성합니다. (시안에 따라서)
  • 하위 카테고리에 함께 적용합니다 - 서브 카테고리가 있는 경우 서브 카테고리에도 동일하게 적용한다는 뜻입니다.




스킨 옵션

아래 스킨 옵션은 모두 다 제공 되는 것이 아닌 시안, 의뢰, 협의 사항에 따라 다르게 제공됩니다.




기타 수정 or 사용 팁




커버


2019. 12. 14. 23:21
14

날짜(작성일)에 오류가 있는 스킨 수정 방법 안내

Skin/스크랩 2019. 12. 14.

티스토리에서 날짜 구현 방식을 xxxx.xx.xx 에서 xxxx.xx.xx. 으로 변경하여 이로 인해 날짜에 오류가 발생하는 스킨이 있습니다. 죄송하게도... 제가 만든 스킨이 너무 많다보니 하나하나 어떻게 제작했는지 다 기억을 못하고 있어 판매 스킨을 사용하고 계시고 작성일에 오류가 있는 스킨을 알려주시면 업데이트 하도록 하겠습니다.

 

우선 제보를 받았던 39번 스킨은 업데이트 완료하여 파일 업로드를 해두었으나 너무 작은 수정이라 별도로 메일을 드리지는 않았습니다. 크게 수정하신 부분이 없으시다면 1.1 버전 파일을 다운받아 재설치하시거나 html만 메모장으로 열어 붙여넣기 하시면 됩니다.

 

19.12.15 - 03, 05, 06, 07, 08, 10, 11, 12, 13, 14, 15, 17, 18, 19, 20, 21, 22, 24, 25, 27, 28, 29, 30, 31, 34, 35, 36, 38, 39, 40, 41 업데이트 완료

 

이 외 스킨에 대해 직접 수정을 원하신다면 아래 방법을 따라 수정해주세요.
제 스킨에 한정된 것이라 다른 분의 스킨에는 맞지 않을 수 있습니다.

 

1. html에서 아래 치환자를 검색

커버 - [##_cover_item_date_##] 또는 [##_cover_item_simple_date_##]

목록 - [##_article_rep_date_##] 또는 [##_article_rep_simple_date_##]

공지 - [##_notice_rep_date_##] 또는 [##_notice_rep_simple_date_##]

 

2. 아래와 같이 <script>로 적혀진 부분이 있는지 확인

2-1 치환자를 제외한 아래와 같은 형식인 경우 3 or 4 중 한가지로 진행합니다.

<script>
var d = '[##_article_rep_simple_date_##]'.split(/[.| |:]/);
.
.
.
.
</script>

 

2-2 치환자를 제외한 아래와 같은 형식인 경우 4번으로 진행합니다.

<script type="text/javascript">
var TDate = '[##_article_rep_date_##]';.
.
.
.
</script>

 

3. 기존 스킨과 동일한 날짜 구현 방식으로 정상적인 작동을 원할 경우

.split(/[.| |:]/); 이 부분을 .split(/[/| |:]/); 이렇게 수정하면 정상 작동 합니다.

 

4. 날짜 형식을 원래 티스토리 형식으로 변경 원할 경우

수정할 부분이 커버/목록/공지 중 어떤 부분인지 확인 후 위 2번에 안내 된 <script> ~~~~ </script>를 모두 지우고 1번에 안내되어있는 원하는 형식 중 한가지로 치환자를 넣습니다.

simple 이라는 단어가 들어가지 않은 치환자는 xxxx.xx.xx. xx:xx 로 년.월.일. 시간:분 이 모두 구현되고
simple이라는 단어가 들어간 치환자는 xxxx.x.x. 로 년.월.일 만 표기가 됩니다.

 


감사합니다 :D

2019. 11. 4. 00:29
04

티스토리 버그 모음 (19.11.29)

Skin/스크랩 2019. 11. 4.

아래 나열되는 목록은 스킨의 오류(버그)가 아닌 티스토리 자체의 버그입니다.
제 스킨이 너무 많기 때문에 하나하나 바로 수정 업데이트하기에는 너무 오랜 시간이 걸리므로
어느 정도 정리가 되었다 싶을 때 업데이트할 예정입니다.

스킨을 통해 현재 상태에 맞게 사용할 수 있는 경우 링크를 통해 별도 안내드리고 있으며
스킨으로는 수정이나 우회해서 사용할 수 없는 부분은 별도 안내가 되어있지 않습니다.


1. 댓글 펼침 기능 삭제

오류였으면 좋겠지만 포럼의 다른 유저분께서 받은 답변이 티스토리 자체에서 제공하는 신규 스킨을 제작 중 티스토리에서 삭제하였다고 합니다. 복구가 될 확률은 희박해 보이나 우선 다음 스킨까지 기다려보려 합니다.
직접 개선하기 - https://sweet-myo.tistory.com/646

 

댓글 펼쳐짐 개선 방안

방법 1. 티스토리 포럼 안내 https://www.tistory.com/community/forum/search?searchKeyword=%EA%B0%95%EC%A0%9C%20%ED%8E%BC%EC%B3%90%EC%A7%90&searchType=title 이 안내를 따르실 경우 스크립트에서 comment..

sweet-myo.tistory.com

2. 본문에서 더보기 기능

구에디터에서는 더보기를 펼치면 예전에는 더보기 안에 내용의 클래스명이 moreless_content였으나 이제는 
펼쳐진 더보기 영역의 전체(버튼 포함)를 moreless_content가 감싸고 있고 내용 최 상단에 내용이 없는 <p class="txt_view"> 가 생성이 되는데 P가 아닌 div로 더보기 내용을 감싸는 형태로 변형되어야 한다고 생각합니다.

직접 개선하기 - https://sweet-myo.tistory.com/616

 

구에디터 더보기 수정 안내 + 추가

현재 공개 되어있는 스킨은 모두 업데이트 되었으니 재 다운로드 > 재설치 하시거나 CSS파일만 업데이트해주세요 1차적인 업데이트는 다 완료하였으나.. 티스토리가 또 수정을해서... .............................

sweet-myo.tistory.com

이 부분 또한 신규 스킨으로 인한 변경점이 아닐까 생각되는데 이쯤 되면 티스토리에서 신규 스킨 만들면서 내부 소스를 사전 공지 없이 계속 만질 거면 그냥 신규 스킨을 제작하지 않았으면 하는 바람이 있네요.. 티스토리에서 신규 스킨 제작할 때마다 제 스킨이 아니더라도 기존 스킨 사용하던 유저들은 모두 수정을 해야 하니까요..

그리고 우선 구에디터와 새 에디터의 class명과 구조가 다른 것도 문제고,  새 에디터에서 더보기의 제목이 없고 [ ... 더보기] 인 점도 변경되어야 한다고 생각하지만 이 부분은 새 에디터 출시 초기부터 이 상태였으므로 버그는 아닙니다. 개인적으로는 이 부분 때문에 새 에디터를 사용하지 않습니다.

3. 새 에디터에서 유튜브 오류

원래 유튜브에서 가져온 단축 url을 그냥 붙여 넣기 하고 엔터만 쳐도 동영상으로 잘 출력이 되었던 것 같은데 최근 링크로 출력되게 바뀌더니 이제는 아이프레임으로 동영상을 불러오긴 하는데 오류가 나네요

이 경우 우선 단축 url을 붙여넣기하고 엔터 친 다음 html모드로 들어가서 data-video-url="" , iframe src=""에 삽입되어있는 유튜브 주소를 지우고 유튜브에서 구에디터에 넣던 퍼가기(아이프레임 형태의 소스)의 src 주소를 복사해 위 언급한 2 부분에 붙여 넣기 하면 됩니다.

뭐.. 그냥 새 에디터에서 html모드로 간 후 아이프레임을 삭제하고 퍼가기 소스를 넣어도 되긴.. 됩니다.

소스를 보면 썸네일 관련한 소스가 들어가긴 하던데 여전히 자동적으로 대표 이미지가 되지는 않고 별도 첨부를 해야 합니다. 이건 원래 그렇습니다. 썸네일 소스는 왜 추가되었는지 모르겠습니다만.. 새 스킨에 추가될까요?

4. 블로그 설정에서 닉네임 수식어를 삭제하고 저장해도 수식어가 적용되어있음

본인 계정의 블로그에서는 정상 적용 되는 것 같으나, 팀블로그에서는 수식어가 적용됨

5. 스킨 편집 > 파일 업로드에서 index.xml 파일 업로드하면 먹통

개인적으로 아주 짜증 나는 오류입니다. 스킨 제작 시에 굉장히 번거로워집니다..
xml파일 업로드 후에는 컨트롤 + S 해가며 미리 보기 창에서 확인할 수가 없어요.
새로고침해도 소용없어요. 새로고침 이후에는 먹통이 아닌 소스가 장황하게 있어도 소스가 없다고 팝업창이 떠요

6. 안드로이드 파이 9.0 버전 이후로 티스토리 앱에서 알림이 뜨지 않습니다.

이제 티스토리 어플을 업데이트 하면 알람이 옵니다.

오래오일땐 알림이 잘 왔었는데 얼마 전 파이로 업데이트한 후에는 알림 설정을 하고 나가면 알림이 꺼져있어서 사실상 알림 기능이 안됩니다. 그래서 알람이 켜져 있을 때 백업한 어플로 재설치를 해봤지만 여전히 알림이 되지 않습니다.

개발이 멈춰진 지 오래라.... 개선할 생각이 없... 겠죠.. 2017년이 마지막 업데이트였었나....

7. 공지를 새 에디터로 작성할 경우 공지 목록에 나타나지 않습니다.

제 메인 티스토리에서 테스트 했을 땐 정상적으로 나오는데,
팀블로그에 초대되어 가입된 상태로 공지 글을 새 에디터로 작성하면 노출이 되지가 않는 것 같습니다.

관리 > 콘텐츠 - 설정 > 새로운 글 쓰기를 사용하지 않습니다 > 변경사항 저장
후에 공지를 작성합니다.

8. 리스트 스타일 지원하지 않음

제 스킨의 경우 업데이트 된 26, 33, 50, 51 ~~~~ 리스트 스타일을 사용하여 스킨을 제작했습니다.
안내에 따라 관리 > 콘텐츠 - 카테고리 관리 에서 목록 스타일을 하나 하나 설정을 하려해도 지원하지 않는 스킨이라는 알람이 뜨는 경우

관리 > 꾸미기 - 스킨 편집 > html 편집 > 파일 업로드 > index.xml 파일을 업로드 한 후 다시 카테고리 관리에서 설정해봅니다.
안타깝지만 이 경우 커버, 스킨 옵션 설정이 모두 초기화됩니다.


하트 = 🚽 인 것으로.. ⊙﹏⊙∥

2019. 11. 3. 11:05
03

댓글 펼쳐짐 개선 방안

Skin/스크랩 2019. 11. 3.

방법 1. 티스토리 포럼 안내

https://www.tistory.com/community/forum/search?searchKeyword=%EA%B0%95%EC%A0%9C%20%ED%8E%BC%EC%B3%90%EC%A7%90&searchType=title

이 안내를 따르실 경우 스크립트에서 comment 대신 cmt 를 입력하시면 됩니다 ( 최신 스킨 기준 )


또는

방법 2. 묘연 스킨 전용 안내 ( 최신 스킨 기준 )

  1. html에서 [##_article_rep_rp_link_##] 검색 후 onclick="[##_article_rep_rp_link_##]" 삭제
  2. s_rp 검색 후 <s_rp>위에 <div id="rp"> 추가 /  </s_rp> 밑에 </div> 추가
  3. 스크롤을 맨 아래로 내려 </s_t3> 위에 아래 스크립트 추가하면 열고 닫는 기능이 됩니다.
  4. 페이지 접속 시 열려있는 상태가 아닌 닫혀있는 상태에서 열고 닫기를 원하시면
    CSS에 #rp > div { display: none; } 추가합니다.
<script>
$(".opencmt a").click(function() {
	$("#rp > div").toggle();			
});
</script>
#rp > div {
	display: none;
}

 

덧붙여 팟! 하고 댓글창이 열리는게 아닌, 아래로 스르륵 슬라이드 되며 열리길 원하시는 분 께서는
위 스크립트에서 .toggle(); 대신 .slideToggle(); 을 추가하세요.


댓글 펼침 기능은 없어진 것인지 티스토리에서 새 스킨을 준비하면서 기능을 없앤 것인지 저로써는 알 수 없습니다.
(새 스킨이면 새 스킨이지 왜 기본 뼈대 기능을 자꾸 건드리는 것일까?)

현재 댓글 펼침 외에 더보기 기능도 티스토리에서 수정한 후 비정상적이어서 일단 스킨 업데이트를 보류 중입니다.
(지난번에도 바로 수정했더니 얼마 후에 또 수정을 하더라고요..)

문제가 있으신 분 께서는 번거로우시더라도 당분간은 안내 참고하셔서 직접 수정하여 사용 부탁드립니다.
감사합니다

 

2019. 8. 20. 19:32
20

구에디터 더보기 수정 안내 + 추가

Skin/스크랩 2019. 8. 20.

현재 공개 되어있는 스킨은 모두 업데이트 되었으니 재 다운로드 > 재설치 하시거나
CSS파일만 업데이트해주세요

1차적인 업데이트는 다 완료하였으나.. 티스토리가 또 수정을해서... ........................................
제가 .. 이틀에 걸쳐 스킨 40여개를 다 수정했는데... 괴롭네요....
어느 정도 티스토리의 수정이 종료된 것 같으면 그 때 천천히 업데이트 하겠습니다..

관련한 내용을 아래 추가해두었으니 참고하셔서 직접 수정 부탁드려요..
커미션 스킨은 직접 수정해주시고 문제 있으시면 방명록에 글 남겨주세요

 

현재 구 에디터로 작성한 글의 더보기가 비정상 작동하고 있습니다.
이는 ... 티스토리에서 ... 또 ... 사전 예고 없이.... 내부 소스를.............. 바...꿨..........습..............니........................다........... 🤬 망...........할...............

 

따라서 이에 따른 수정 방법 안내를 드립니다.

먼저 변경된 소스에 대해 설명드리자면 아래와 같습니다.

기존 접혀진 더보기 이름의 클래스명 : moreless_fold 
기존 펼쳐진 더보기 이름의 클래스명 : 상 moreless_top / 하 moreless_bottom
접혀진 더보기 이름의 클래스명 : btn_more
펼쳐진 더보기 이름의 클래스명 : btn_less ( 상 하로 나뉘어지나 소스가 같아 일괄 적용 됩니다 )

19.09.05 - 추가
티스토리 자체에 추가 된  소스입니다. (스킨 아님)

.btn_more, .btn_less { /* 더보기 버튼 */
    border: 0; /* 테두리 */
    background: transparent; /* 배경 색 */
    display: block; 
    height: 21px; /* 높이 */
    margin: 20px 0; /* 외부 여백 상하 좌우 */
    font-size: 14px; /* 폰트 사이즈 */
    line-height: 14px; /* 줄 간격 */
    color: #888; /* 폰트 색 */
    position: relative;
    width: 100%; /* 넓이 */
    text-align: left; /* 정렬 - 좌 */
}

.btn_less::before, .btn_more::before { /* 더보기 버튼 앞에 꾸며지는 것 */
    content: "..."; /* 더보기 버튼 앞에 ... 표시가 나오도록. 수정을 해도 되고 삭제해도 됨 */
    display: inline-block;
    padding-right: 5px; /* 내부 여백 우 */
    font-size: 14px; /* 폰트 사이즈 */
    line-height: 6px; /* 줄 간격 */
    vertical-align: top; /* 현재 위치에서 위로 치우치도록. 중간으로 하려면 middle로 변경하면 됨 */
}

수정은 css에서 하시면되며, 컨트롤+F를 눌러 더보기를 검색 후 위 설명을 참고하여 수정합니다.
위 티스토리에 추가된 소스를 css 더보기 영역에 붙여넣고 입맛대로 원하는 값을 넣어 수정하거나,
스킨의 디폴트 값을 적용하려면 inherit를 넣으면 됩니다. 
그래도 수정이 안되면 ; 앞에 !important를 적어넣으면 작성하신 값이 우선 적용 됩니다.

아래 안내는 가장 기본적인 수정 안내이며, 경우에 따라 몇 가지 직접 더 손보셔야 할 수 있습니다.

.moreless_fold span:before,
.~~~~~~~~~ { 
~~~~~
}

이게 원래 스킨의 소스라면 이 소스는 접혀진 상태의 더보기 버튼에 대한 소스이므로
바로 위에 .btn_more 를 적어준 후 .btn_more:before, 라고 적어주면 됩니다. (끝에 콤마=쉼표 필수)
(btn_more는 안에 span이 없으므로 위와 같이 span을 떼고 나머지만 적으면 되세요)

.moreless_top span,
.moreless_bottom span
.~~~~~~~~~~~~~~ {
~~~~~~~~~~~~
}

이런 형식이라면 펼쳐진 상태의 더보기 버튼에 대한 소스이므로
상단에 .btn_less 를 추가하고 .btn_less span, 이런 식으로 적어주면 됩니다.

그 아래 :hover:before 라던가 몇가지 소스가 더 있는데 마찬가지로 추가해주면 됩니다.

마지막으로, 더보기가 여러개 연속으로 사용된 경우
줄 바꿈이 되지 않은 채로 나타나기 때문에

.btn_more {display:block;}

이렇게 추가해주시면 줄 바꿈이 됩니다.

추가로 위에서 설정한 아이콘 외에, 더보기를 열었을 때 ... 표시가 계속 나온다면 아래 소스를 추가해주면 됩니다.
구에디터에만 적용되며 새 에디터는 적용되지 않습니다.

.btn_less::before { /* 이 세 줄 추가하면 펼친 상태에서 ... 삭제 됨(구에디터 한정) */
    display: none;
}

 

현재 제 티스토리스킨에 적용되어있는 더보기 소스입니다. 참고하세요

/* 더보기 */
.btn_less::before {
    display: none;
}

.btn_more::before {
    padding: 0;
    font-size: inherit;
    line-height: inherit;
    vertical-align: inherit;
}

.btn_more,
.btn_less,
#tt-body-page div[data-ke-type='moreLess'] .btn-toggle-moreless {
    display: block;
    font-size: inherit;
    color: #CD717E;
    height: auto;
}

.btn_more:before,
.btn_less span:before,
a.btn-toggle-moreless:before {
    content: '\f107';
    font-family: 'fontAwesome';
    margin-right: 5px;
}

.btn_less:last-child span:before {
    content: '\f106'
}

.btn_less:first-child {
    border-bottom: 1px solid;
    padding-bottom: 20px;
    border-color: #444;
    margin-top: 10px;
}

.btn_less:last-child {
    border-top: 1px solid;
    padding-top: 20px;
    border-color: #444;
    margin-bottom: 10px !important;
}

.moreless_content,
.moreless-content {
    border: 1px solid;
    padding: 10px;
}

 

추가로 버튼에 회색 네모가 생긴 경우

CSS의 최상단에서 웹폰트 영역 아래쪽에 아래 소스를 추가해주세요.

button {
	background-color: transparent;
	border: 0;
}

감사합니다 :)

2019. 6. 11. 11:25
11

묘연 티스토리 스킨에 Infinite Scroll 적용하기

Skin/스크랩 2019. 6. 11.

스크롤을 내리면 바로 다음 목록이 불러와지는 기능입니다. (페이지 더 보기 기능과 비슷하죠)

이 기능은 개인 사용은 무료지만, 상업용으로는 유료이기 때문에 적용해드릴 수 없어
직접 설치 및 설정을 하셔야합니다.

 

Infinite Scroll

New! JavaScript and jQuery plugin to automatically add next pages.

infinite-scroll.com

이 페이지에서 CDN 주소를 둘 중 하나만 복사합니다.
min이 붙은 주소가 파일 용량이 조금 더 작습니다.

스킨 편집 > html편집 > 스크롤을 맨 아래로 내려서

</s_t3> 위에 붙여넣거나, <script src="./images/script.js"> 부근에 붙여 넣습니다.
그 후 붙여넣은 CDN 스크립트 바로 아래 밑에 소스를 복사 후 붙여넣기 합니다.

<script>
 $('.myoskin.inner').infiniteScroll({
     path: '.next',
     append: '.myoskin .item',
     hideNav: '.pagination',
     history: false,
 });
</script>

 

- 제작한지 오래 된 스킨이나 일부 스킨은 구조에 따라 적용이 되지 않을 수 있습니다.
(위에 적혀진 클래스명과 다른 오래된 스킨, 구조가 다른 경우는 #container에 position:fixed 값이 있는 주로 부분 스크롤 형으로 보여집니다)

 

 

imagesLoaded

imagesLoaded JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded. imagesLoaded on GitHub 4,500 Demo Add images Reset demo Edit this demo or vanilla JS demo on CodePen. Just to keep things inte

imagesloaded.desandro.com

더불어 이 소스와 함께 적용하면 더 예쁘게 사용할 수 있습니다 (만 저는 아직 이 소스에 대해 잘 모릅니다 ㅠㅠ)

  • imagesLoaded는 보통 masonry와 함께 씁니다.

    const $container = $('.myoskin.inner');

    $container.infinitescroll({
    path: '.next',
    append: '.myoskin .item',
    hideNav: '.pagination',
    history: false
    },
    function(newElem) {
    const $new = $(newElem).css({opacity: 0});
    $new.imagesLoaded(function(){
    $new.animate({opacity: 1});
    $container.masonry('appended', $new, true);
    });
    })

    이런 식으로요.

    • 안녕하세요 Marshall K님!!
      이렇게 팁을 남겨주셔서 감사합니다 :)

      masonry에 imagesLoaded는 적용해서 사용하는데 여기에 Infinite Scroll까지는 적용을 어떻게 해야하는지 한참 예제를 찾아보고 적용을 해봐도 잘 모르겠었는데 시간 될 때 남겨주신 팁 이용해서 테스트 해보겠습니다 :)
      감사합니다~

2019. 4. 2. 13:04
02

단축키 안내

Skin/스크랩 2019. 4. 2.

티스토리 기본 제공 단축키

 

Q : 관리자 페이지
A : 이전 글 보기
S : 다음 글 보기
Z : 사이드 바의 최근 글
X : 사이드 바의 최근 댓글
C : 사이드 바의 최근 트랙백

 


기존 에디터 단축키

 

 

[글쓰기] 편집툴바 이용하기

먼저 티스토리의 가장 기본적인 편집 툴바의 기능에 대하여 알아보도록 하겠습니다. 기존 각주, 박스스타일 등의 좋은 기능들이 이번 업그레이드 된 티스토리 에디터에서 기본 기능으로 탑재되었습니다. 글 작성할..

notice.tistory.com

 


새 에디터 단축키

 

 

티스토리 글쓰기 가이드 : 단축키

티스토리 글쓰기 기본 모드에는 여러 단축키가 있습니다. 마우스로 모든 기능을 사용할 수 있지만 간단한 문서 편집에서 단축키가 있다면 훨씬 쉬운 문서 작성이 가능할 것입니다. 어떤 단축키가 있는지 하나씩 살..

tistory.io

 


추가 단축키

 

추가로 제가 제작한 판매, 나눔, 커미션 스킨 중 작년 7월 6일 이후에 제작된 스킨(26번 스킨 이후)에는 모두 단축키를 추가 지원하고 있습니다. (맥os나 크롬, 웨일 등 크로미움 브라우저 외 다른 브라우저에서 지원되지 않을 수 있음)

 

w : 기존 에디터로 새 글 작성
e : 스킨 편집
g : 방명록
h : 홈 ( 첫 화면 )

 

기존에 적용된 단축키를 통해 새 글 작성에 들어간 후 새 에디터로 전환해서 글을 작성하실 경우 작성 완료 시 오류가 발생하오니 새 에디터 적용을 원하시는 분 께서는 반드시 스크립트를 별도 수정하셔야 합니다.

블로그 관리 > 콘텐츠 - 설정 > 새로운 글쓰기를 사용합니다 > 변경사항 저장


스킨 편집 > html의 하단 // 단축키
없을 경우
스킨 파일 > images 폴더 > script.js 파일을 메모장으로 열어 // 단축키

key['w'] = "/admin/entry/post";

에서 /admin/entry/post 를 아래와 같이 변경해주세요

key['w'] = "/manage/newpost/?type=post&returnURL=/manage/posts/";

script.js 파일을 수정 한 경우 저장 후 스킨 편집 > 파일 업로드에서 수정한 파일을 업로드 합니다.

이후 변경한 파일이 적용이 되지 않는 경우 컨트롤 + 쉬프트 + R 을 동시에 눌러 강제 새로 고침(크롬, 웨일 등)하거나 인터넷 브라우저 설정에서 쿠키 삭제를 합니다.

2019. 3. 26. 20:34
26

[html] 댓글 갯수가 나타나지 않는 현상 개선

Skin/스크랩 2019. 3. 26.


해당되는 스킨은 33번 스킨까지이며,

18년 10월 22일 전후로 커미션 받으신 스킨도 포함이 됩니다.


커미션 받으신 분께서는 번거로우시더라도 직접 변경 부탁드리며 (불의의 사고로 인해 스킨 파일이 없습니다)

판매 , 판매 중단, 나눔 스킨(나눔 종료 스킨은 미포함)까지 포함하여 시간되는대로 업데이트 해놓도록 하겠습니다. 업데이트 완료

감사합니다.

myoskin