친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 스킨 관련해서 공지를 올립니다. 티스토리가 업데이트 되면서 새로운 글쓰기 에디터가 생긴것을 아마 다들 아실 것 입니다. 이 새로운 글쓰기 에디터에 대한 지원 여부를 문의주시는 분들이 몇 분 계셨습니다. 어차피 언젠가는 적용을 해야만 했고 쇠뿔도 단김에 빼랬다고 얼른 생각날 때 부랴부랴 작업해 버리자고 결심했습니다. 현재 작성한 이 문서도 신규 글쓰기 에디터로 작업한 결과물 입니다.

 

본문 소제목 스타일 적용

이 부분도 적용이 됩니다. 이미 기존에 친효스킨에 기본적으로 들어있는 부분이기에 따로 스타일을 지정하지 않아도 이렇게 적용이 됩니다. 위의 제목은 제목2로 설정해서 적용시킨 모습 입니다. 제목1로 하면 좀 더 글씨가 커집니다. 또한 중간 B태그의 형광펜 적용도 동일하게 작동합니다.

 

기타 글씨 꾸미기 적용

현재 본문에서도 확인 가능하듯, 굵게 강조하는 기능 및 기울기, 글씨 밑줄 넣기, 가운데 취소선 긋기, 글자색 변경글자 백그라운드에 색상 적용 등 다양한 글씨 꾸미기 기능이 완벽하게 적용 중 입니다.

 

글 단락 정렬 및 구분선

다음은 단락 정렬에 대한 부분입니다. 기본적으로 왼쪽 정렬로 이루어져 있습니다. 친효스킨 및 대부분의 티스토리 스킨은 본문의 글 단락에 대해서 왼쪽 정렬이 기본입니다. 한번 이 부분도 조절해 보겠습니다.


이것은 왼쪽 정렬 입니다.


이것은 가운데 정렬 입니다.


이것은 오른쪽 정렬 입니다.


중간 중간에 구분선도 넣어봤습니다. 이상 없이 적용됨을 확인할 수 있습니다.

 

사진 이미지 넣기 적용

새로운 글쓰기 에디터에서 이미지도 적용 잘 됩니다. (중앙정렬)
이것은 왼쪽 정렬
이것은 오른쪽 정렬

보시는 것 처럼 이미지도 정상적으로 적용 됩니다. 또한 이전과 다르게 에디터에서 이제 이미지 좌/중앙/우 정렬을 쉽게 할 수 있도록 UI가 개선되었습니다. 직접 테스트해 보시면 쉽게 사용 가능합니다. 그 밖에 이미지를 감싸서 텍스트가 올라오는 기능도 정상 동작합니다. 이미지는 기존 구형 글쓰기 에디터처럼 테두리가 들어가도록 설정했으며, 캡션 (설명란) 도 구분이 되도록 백그라운드 색상 및 기울기 스타일을 적용하였습니다.

 

첨부파일 스타일

다음은 첨부파일 스타일에 대한 적용 예시 입니다. 먼저 수정하지 않은 기존의 첨부파일 스타일 입니다.

 

이렇게 출력이 됩니다. 오리지널 첨부파일 스타일은 가운데 정렬로 진행 됩니다. 다음은 새로운 에디터 전용 친효스킨 첨부파일 스타일 입니다.

 

이미지 파일 예제.zip
0.12MB

캐쥬얼한 디자인으로 꾸며봤는데 나름 마음에 듭니다. 오리지널 첨부파일 스타일은 가로 폭이 고정 형태여서 첨부파일의 파일명이 길어지면 자동으로 생략되도록 설정되어 있습니다. 이 스타일은 첨부파일명의 길이에 따라 가로 사이즈가 변합니다. 또한 파일 용량 표시의 백그라운드 색상을 살짝 더 어둡게 하였고 글씨는 가운데 정렬을 하여 눈에 띄게 만들어 봤습니다. 이로 인하여 왼쪽 정렬이 기본 위치이며 가운데 정렬은 불가능 합니다.

 

유튜브 동영상 적용

유튜브 동영상은 기존 플러그인으로 하면 썸네일이 일부 잘리는 현상이 발생합니다. 따라서 수동으로 넣는 방법을 추천합니다.

 

이렇게 적용되어서 반응형 스킨에 맞게 가로 사이즈가 알아서 변합니다.

 

접은글 (더보기 & 접기) 기능 적용

기존 구형 에디터에서와는 다른 태그가 사용되었기에 새롭게 스타일을 만들었습니다. 이 또한 완벽하게 적용되었습니다. 아래의 더보기 버튼을 눌러보세요.

 

...더보기

이렇게 접은글에 대한 내용을 확인하실 수 있습니다.

 

접은글 기능도 잘 적용되었음을 알 수 있습니다. 접은글 사용 후, 한 줄을 띄우고 난 후부터 글 작성을 하시는 것을 권장합니다. 훨씬 보기가 좋습니다.

 

리스트와 테이블 적용

리스트는 ul과 ol로 이루어진 태그 입니다. 이 부분도 친효스킨에 적용시켰습니다. 아래는 예제 입니다.

  • 리스트1
  • 리스트2
  • 리스트3

 

또 다른 리스트 예제 입니다.

  • 리스트4
  • 리스트5
  • 리스트6

 

마지막 세번째 숫자 형태의 리스트 예제 입니다.

  1. 리스트7
  2. 리스트8
  3. 리스트9

 

이처럼 완벽하게 적용됩니다. 테이블의 경우도 잘 적용됩니다.

 

테이블
합치기도 잘 됨 셀1 셀2 셀3 셀4
셀5 셀6 셀7 셀8

 

이전 글쓰기 에디터보다 훨씬 더 깔끔한 표가 삽입되네요. 새로운 에디터에서 마음에 드는 기능 중 하나 입니다. 이제 친효애드온 표를 사용하지 않아도 될 것 같습니다.

 

텍스트 글씨에 직접 링크 지정 적용

글 단락 중간에 링크를 걸어야 하는 경우가 있습니다. 이 부분에 대해서도 스타일을 적용시켰습니다. 여기를 누르시면 친절한효자손 메인 페이지로 이동합니다. 이와같이 방금 문단의 "여기" 라는 글씨에 링크가 걸려있고 스타일은 보시는 것 처럼 푸른 계열 색상으로 되어 있으며 글씨가 두껍게 변하고 마우스를 올리면 밑줄이 생성되며 빨간색으로 변경됩니다.

 

서식 기능 및 친효애드온 적용

아래는 서식을 통해서 불러온 링크박스 입니다. 주로 관련글을 올릴 때 사용하는 친효애드온 입니다. 정상적으로 동작하는것을 알 수 있습니다. 여기까지 친효스킨에 신규 글쓰기 에디터를 적용시킨 내용이었습니다. 끝.

 

 

알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

또한 비밀댓글의 경우는 질문 내용을 공개하고 답글을 해드리고 있으니 참고하시기 바랍니다.

  1. Favicon of https://newedge.tistory.com 뉴엣 2019.09.03 19:00 신고

    스킨까지 제작하시다니, 존경스럽습니다.
    많은 분들께 도움이 될 것 같아요!

  2. Favicon of https://bbingse.tistory.com 삥세 2019.09.03 19:13 신고

    서식 다른건 다 정상적으로 불러오는데
    본분에 애드센스 광고를 서식으로 넣을 경우
    네모 박스형식으로 나오는데 이 부분은 아직까지
    글 작성중 HTML로 변환하여 광고를 입력해야하는건지요.

    다른것들은 다 새로운 에디터로 적용되는데
    서식으로 광고를 넣을 경우가 애매해지네요.. ㅠ

  3. Favicon of https://jinylife.com 징이♥ 2019.09.05 09:38 신고

    감사하게 스킨 잘쓰고 있습니다.
    새로 업데이트된 스킨을 적용하려면
    새로 파일을 받아 처음에 했던 방식으로
    똑같이 스킨을 추가 하면 되는건가요?

  4. Favicon of https://bbingse.tistory.com 삥세 2019.09.08 12:17 신고

    친효님께서 직접 제작하신 첨부파일 다운로드 버튼이 너무 이쁜데
    이걸 신규 에디터로 사용할 방법이 없을까요?!

  5. Favicon of https://hunss.tistory.com 훈ss 2019.11.11 04:36 신고

    혹시 '제목'으로 글을 작성할 때 소제목 스타일이 적용 안되게 하는 방법이 있을까요? 저는 이 부분을 별도의 서식으로 만들어서 사용하는데 모든 글에 다 소제목스타일이 적용되는것이 맞지 않아서요. 다시한번 스킨 만들어주셔서 감사합니다!

  6. Favicon of https://kimteam81.tistory.com 의군 2019.12.15 15:28 신고

    스킨 적용하였습니다.
    잘사용하겠습니다.

1 2 3 4 5 6 7 8 9