본문 바로가기

Guestbook

방명록쓰기 폼
  • BSUday 2018.10.24 16:33 신고 어째.. 제가 질문을 자주 남기게 되어서, 도배성이 될까 봐 신경이 쓰입니다.
    그래도 혹 누군가에는 저의 질문과 웨일더스트님의 답변이 충분히 도움이 될 줄로 생각합니다. ^^

    이번 질문은, 좀 송구스런 거라 죄송합니다.
    다름이 아니라... 현재 제가 운영하는 공동체 블로그는, 웨일더스트님께서 제공해 주신 스킨으로 아주 잘 사용하고 있습니다. 감사합니다.
    하지만, 현재 저의 블로그는, 그간 사용해 오던 다른 분의 스킨을 소소하게 수정을 하면서 구축해 왔던 거라, 쉽게 바꿀 엄두가 안 나네요.
    새로운 스킨을 적용했을 시, 예전에 소소하게 수정했던 치환자를 다 기억해 내지 못하기 때문에, 저로선 쉽지 않습니다. ㅋ

    해서, 현재 사용하는 스킨에는, 본문글 밑에 달려야 될 댓글 펼침과 접기 기능이 아예 없는 스킨입니다.
    하지만, 스킨의 깔끔함을 위해서, 웨일더스트님의 스킨처럼 댓글접기와펼침기능을 달아보고 싶은데요.

    혹시.. css와 html에서 어떻게 소스를 구성해야 되는지, 가르쳐 주실 수 있을까요?
    스킨이 다르니.. 이래저래 적용은 제가 해 보도록 하겠습니다.

    편하게 답변 해 주세요. 웨일더스트님 입장에서 혼란하시면 안 된다 하시고요. 저는 충분히 이해하니까요~ ^^
    죄송하고 감사합니다. ㅡ.ㅡ
  • 티스토리스킨 웨일더스트 2018.10.25 05:00 신고 사이트를 보니 어떤 스킨을 쓴건지는 짐작은 가는데 커스터마이징을 어떻게 하신지는 모르겠어서 제 스킨 기준으로 일반적인 방법만 먼저 알려드립니다.

    제스킨은 폰트어썸을 사용하기 때문에 아마 아이콘 애니메이션까지 그대로 쓰면 아이콘이 안나올거 같습니다.
    댓글 타이틀 클릭해서 펼쳤다 접었다 하는것만 우선...

    먼저 숙지하실게 댓글 펼침을 꺼야 기본으로 폴딩상태로 화면이 뿌려지는건 스킨편집-기본설정-댓글 펼침에서 껏다 켰다 할 수 있습니다.
    이걸 켜놓으면 기본으로 댓글이 펼쳐져서 나옵니다.

    보통 댓글 목록 위에는 댓글 제목이 있는데 일단 사이트에는 제목이 없습니다. 제목을 클릭해서 펼치고 접거나, 우측에 화살표? 같은 아이콘을 추가로 표시해서 펼치고 접거나를 하게 되는 구조로 대부분 스킨이 펼침 기능을 제공합니다.

    보통
    html소스에서
    <s_rp> 를 찾아 <s_rp> 위에
    요런 "Comments" 타이틀을 아래처럼 붙여넣어주면 "Comments" 를 클릭하면 코멘트리스트가 펼쳐지는 구조로 만들어집니다.
    <!-- 요영역을 붙여넣습니다. -- >
    <strong class="tit_reply" onclick="[샵샵_article_rep_rp_link_샵샵]"><s_rp_count>[샵샵_article_rep_rp_cnt_샵샵]</s_rp_count> Comments</strong>
    <!-- 요기까지 -->
    <s_rp>
    <s_rp_container>

    위에 샵샵이라고 된건 ## 으로 변경하셔야 합니다. 댓글에 치환자를 붙여넣을 수 없게 차단되어 있어서...

    제목 오른쪽에 화살표 아이콘 붙여서 올렸다 내렸다 방향바뀌는 효과주는건 또 다른 내용일겁니다.
    일단 제목부터 붙여서 동작하는지 확인을 해보시고 화살표 효과를 주는건 또 javascript 영역이라 조금더 어려우니까 고민이 필요한 영역일겁니다.
    댓글메뉴
  • BSUday 2018.10.25 13:36 신고 웨일더스트님, 참 대단하십니다!
    말씀하신 대로 하니까, 두 번 손 댈 거 없이 바로 적용이 됩니다^^ 너무 감사합니다.

    한 가지 더 바램은, 코멘트 폰트나 크기가 웨일더스트님 페이지와 같으면 더할나위 없이 좋겠습니다.
    모바일로 보기엔 괜찮은데, PC로 볼 땐 이쁘지 않네요.

    저는 웨일더스트님의 디자인이 깔끔한 게 참 좋아요~ㅎㅎ

    가능한가요?
    이번에도 귀한 선물 기다려 봅니당~ ㅋㅋ
    댓글메뉴
  • 티스토리스킨 웨일더스트 2018.10.25 14:58 신고 글자 크기만 우선 바꾸자면
    #communicate .communicateList
    를 찾아서 속성으로
    font-size:13pt;
    를 추가해주면 됩니다. 제사이트의 댓글은 크기가 13pt 입니다.

    작성자 글자 크기는 두고 작성 내용만 글자 크기를 줄이려면
    #communicate .communicateList p
    를 찾아서
    font-size:13pt;
    를 주면 됩니다.

    현재 쓰고 있는 나눔고딕고 가독성이나 기타 여러가지로 괜찮은 것입니다. 구지 글꼴까지 바꾸게 되면 사이트의 느낌이 또 변하기 때문에 그닥 추천하지는 않습니다.

    글꼴까지 바꾸시려면
    html의
    <head></head>
    사이에

    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR" rel="stylesheet">

    행을 추가합니다.
    노토산스KR 글꼴입니다.
    그리고

    css에서 위의 글자 크기 변경하기위해 추가한 행 밑에
    font-family: 'Noto Sans KR';

    을 추가로 넣으면 적용이 됩니다.
    댓글메뉴
  • BSUday 2018.10.25 15:39 신고 참 친절하시고 빠른 도움을 주셔서, 너무 고마우신 분입니다. 항상 감사드려요^^

    제가 질문드린 표현이 서툴렀나 봅니다. 해서 괜히 웨일더스트님을 바쁘신데 피곤케 한 것 같아요.

    저는 댓글 내용과 관련된 폰트나 크기 질문이 아니었고,

    웨일더스트님께서 도와주셔서, 새롭게 달리게 된.. 댓글접기와 펼침 기능을 가능케 한 Comments 항목글씨 자체를 말씀드린 거였답니다. ㅎㅎ ^^a

    모바일이나, 크롬으로 볼 때는, 나름대로 괜찮은데.. 저나 대부분 사람들이 사용하실 걸로 보는 익스플로러11로(제 pc봤을 때) 보니.. comments 폰트가 예쁘지가 않아서, 그것만 웨일더스트님과 같으면 좋겠다... 이런 생각이었습니다. ^^

    자꾸 번거롭게 해 드린 것 같아.. 죄송합니다.
    댓글메뉴
  • 티스토리스킨 웨일더스트 2018.10.25 16:36 신고 블로그의 css가 공용 css로 구성되어 있어서 댓글 제목만 수정하려면 css에 클래스를 추가해야 합니다.

    일단 noto sans kr은 설치되어 있는 것으로 보이고...
    다만 설치되어있는 noto sans가 미디엄(중간두께로 고정)이어서 css로 더 가늘게 할 수는 없습니다.

    처음 댓글에 있는 "Comments" 토글 추가하는 부분에서
    <strong class="tit_reply" ...
    </strong>

    이걸
    <div class="tit_reply" ...
    </div>
    로 태그를 strong 에서 div로 변경합니다.
    텍스트 두껍게 한 효과가 사라집니다.

    그다음 글자 크기를 좀 키워야 하는데...
    css가 공용이라 개별 css를 만들어 붙여야 합니다.

    위치상 데스크톱 환경 css 영역에서
    .entry를 찾은 후
    그 밑에
    .tit_reply{
    font-size:20px;
    font-family: 'Noto Sans KR';
    }

    이런식으로 css를 추가해주면 비슷하게 보일겁니다.

    tit_reply css가 스킨에 1개만 있어서 사실 css 파일에서 오는 위치는 크게 상관없습니다. 관리하는데 편한 위치에 붙이면 됩니다.
    댓글메뉴
  • BSUday 2018.10.25 17:43 신고 웨일더스트님~ 짱 짱 짱! 입니다요^^
    와 정말 실력이 대단하시네요.
    뭐든지, 부탁드리는 부분에 대해서 친절히 가르쳐 주시고, 그대로 적용만 하면, 두 번 손 댈 필요 없고!
    정말 감사드립니다.

    사실, 이렇게 신속하게 친절하게 구체적으로 답변해주시는 분이 또 누가 있을까 싶습니다.

    와 너무 좋고 감사합니다. ^^
    수고 많으셨습니다~~~
    댓글메뉴
  • BSUday 2018.10.18 17:41 신고 반응형 그리드 1단 940 티스토리 스킨에 대한질문입니다. ^^

    모바일로 봤을 때, 메뉴를 누르면, 왼쪽 화면에서부터 메뉴판이 나오잖아요.
    그런데 거기엔 - 공지글 표시는 안 되나 봅니다. ^^a
    멤버들이 공지글을 읽으셔야 해서요~ ㅎㅎ
  • 티스토리스킨 웨일더스트 2018.10.23 15:23 신고 방명록에 질문 다신걸 댓글 메시지보고 알았습니다.
    당일 댓글이 없으면 알림이 안왔거나, 못본것입니다.
    모바일 화면에서 사이드 메뉴에 카테고리 목록만 표시되는건 티스토리 스킨 레퍼런스에 따른 것입니다.
    아울러 카테고리 외에 밑에 추가로 사이드바 위젯을 붙이면 폰에서 볼때 잘려보이거나, 하단 아이콘들과 겹쳐 보이는 현상이 있습니다.
    카테고리 항목 10개 정도가 모바일 사이드 메뉴에서 표시할 수 있는 최대 값 정도여서 공지사항을 붙일 공간은 사실 나오지 않습니다.
    실제 테스트를 해보고, 또 티스토리 스킨 레퍼런스에서도 카테고리 붙이는 정도가 모바일 화면에서는 최선이어서 그렇게 만들어진 거라고 이해하시면 될 것 같습니다.

    다만
    카테고리 항목이 적어서 공지 사항 정도는 붙일 수 있는 공간이 나오면 억지로 붙일 수는 있기는 합니다.

    css 파일 350행 끝에
    margin-bottom:20px;
    추가(카테고리 끝에 여백이 커서 강제로 줄임)

    461행 밑에
    .box_aside:nth-child(2){width:100%;}
    추가(공지 너비를 모바일에서 사이드바 100%로 채움)

    466~467행과, 474~475행을
    .box_aside:nth-child(4n){clear:none !important;}
    .box_aside:nth-child(2n+1){clear:left;}
    이렇게 변경합니다.

    그리고 html 파일에서
    97~107행을 잘라내서
    93행 위치에 붙여넣기
    하면 사이드바에 공지사항을 강제로 붙일 수 있습니다.

    적용해서 확인해보시고 공지사항이 아래 아이콘들과 겹쳐지지 않으면 사용해도 되겠지만, 그렇지 않으면 빼는게 맞을 겁니다.

    행 기준은 변경전 행 기준입니다.
    댓글메뉴
  • BSUday 2018.10.24 14:40 신고 1. 안 그래도 그러신 것 같았습니다. ^^
    2. 아, 그런 기술 과정이 있는 것이었군요. 어렵네요. ㅎㅎ
    3. 와 너무 친절하시고 상세한 가르침에, 그대로 적용했더니, 공지글이 너무 출력이 잘 되네요.

    감사합니다.

    앞으로도 새로운 스킨들.. 많이 기대하겠습니다. ^^

    댓글메뉴
  • BSUday 2018.10.18 14:52 신고 안녕하세요? 스킨이 너무 예쁩니다^^ 다름이 아니라, 해당 게시판을 열면 본문이 펼쳐지잖아요. 그런데 본문 글의 가로 길이가 화면 끝까지 길게 늘어지는데, 그렇게 말고, 일정한 가로 길이로 제한(ex, 800px로 고정)하려면 css 소스를 어떻게 수정해야 하나요? 그리고 그렇게 했을 경우, 모바일로 봤을 때도 폰 화면 크기대로 일반 반응형 그대로 본문글이 화면 좌우로 꽉 찰 수 있어야 하겠습니다. 어떻게 하면 되나요? ^^ 친절하신 답변 기다릴께요 ^^ 감사합니다.
  • 티스토리스킨 웨일더스트 2018.10.18 15:05 신고 어떤 스킨을 말씀하신 건가요?
    스킨명이나 게시글 번호를 알려주시면 안내를 해드리겠습니다.
    스킨에 따라서 800px, 820px 제한인 것도 있고 무제한인 것도 있습니다.
    본문 가로 너비에 제한이 없는 100% 너비인 경우 보통 본문 영역이 센터 정렬인 경우가 많습니다.
    좌측 사이드바가 있는 스킨인 경우 본문 너비를 제한하면 센터 정렬이 되면서 사이드바에서 한없이 멀어지면서 다소 이상한 모양이 되기 때문에 본문 영역을 추가로 왼쪽 정렬을 지정 주어야 하는 경우도 있습니다.
    또, 모바일 레이아웃의 경우 별도로 레이아웃 설정이 되기 때문에 모바일은 개별로 조정된다고 보시면 됩니다.
    댓글메뉴
  • BSUday 2018.10.18 15:19 신고 반응형 그리드 1단 레이아웃 티스토리 스킨입니다.
    그리고, 본문틀 자체를 말씀드린 것이 아니라, 본문틀 안에 본문글 가로길이의 제한을 말씀드립니다. ^^
    가능한 것으로 아는데, 가르쳐 주시면 대단히 감사하겠습니다. ^^
    댓글메뉴
  • 티스토리스킨 웨일더스트 2018.10.18 16:00 신고 레이아웃 조정하는게 말씀처럼 간단하면 참 좋은데, 티스토리 블로그 구조가 사용자 입맛대로 다 조정할 수 있는게 아니라 일부를 조정하면 또 다른 부분하고 안맞고 하는 부분이 있습니다.

    말씀하신 부분만 조정하려면
    style.css 파일의 160번행
    .area_view {color:#5c5c5c;word-wrap: break-word}

    요 내용을

    .area_view {color:#5c5c5c;word-wrap: break-word;width: 820px;margin: 0 auto;}
    요렇게

    뒤에
    width: 820px;
    margin: 0 auto;
    속성을 추가로 주시면 됩니다.

    width: 820px;
    은 너비값(알려드린 예는 820px 컨텐츠 너비이므로 사용하는 데이터 너비에 맞게 변경하면 됩니다.)

    margin: 0 auto;
    은 센터 정렬입니다. 요 행은 빼면 왼쪽으로 본문 내용이 붙게 됩니다.

    다만, 티스토리 구조가 본문 내용에 딸려서 다른글 박스까지 밑에 딸려 나오는 구조이기 때문에 이부분까지 같이 레이아웃이 조정되고, 나머지 그 밑의 태그, 관련글들은 다시 100% 너비로 뿌려지기 때문에 다소 어색해 보이는 점이 있습니다.

    일단 조정해보시고 전체를 조정하는게 맞을것 같다 싶으시면 다시 문의주시면 전체 레이아웃을 조정한 버전을 따로 올려드리겠습니다.
    댓글메뉴
  • 티스토리스킨 웨일더스트 2018.10.18 16:21 신고 스킨 전체 레이아웃을 100%가 아닌 원하는 너비로 조정하시려면

    style.css 파일의 47행을

    .wrap_skin{position:relative;width:820px;margin:0 auto;}

    이렇게 변경하면 가로 820px로 제한된 센터 정렬된 레이아웃이 됩니다.
    댓글메뉴
  • BSUday 2018.10.18 16:36 신고 와~ 빠른 댓글, 친절하시고 상세한 댓글에 감동입니다. ^^
    말씀하신 대로 하니 참 좋습니다.
    자주 찾아 올께요. 대단히 감사합니다. ^^
    댓글메뉴
  • 티스토리스킨 웨일더스트 2018.10.18 16:39 신고 말씀해주신데로 스킨 안내에 레이아웃 조정하는 방법을 추가로 달아 놨습니다. 그리고 배경색 조정하는 방법도 함께 설명했으니까 참고하시면 좋을 것 같습니다.
    감사합니다.
    댓글메뉴
  • 2018.10.01 13:47 비밀댓글입니다