[수성비전자방 2022 스킨 수정기록]2. 헤더, 댓글, 방명록, 이웃 및 구독

수성컴|프로그래밍/웹개발(HTML, CSS, JS 등)|2022. 1. 15. 17:41

수성비전자방입니다. '수성비전자방 2022 스킨 수정기록' 2번째 글입니다. 오늘은 엠원리액트 스킨에서 헤더 수정, 댓글과 방명록 부분 수정, 글 하단 이웃 및 구독 버튼을 적용해 보겠습니다.

목차

1. 엠원리액트 사이드바, 메뉴바 수정
2. 헤더, 댓글, 방명록, 이웃 및 구독(현재 글)
2.1. 헤더 및 PC 네비게이션(카테고리1) 수정
2.2. 댓글과 방명록 부분 수정
2.3. 글 하단 이웃 및 구독 버튼

오늘은 거의 다 index.html에서 진행할 것입니다. 이 글에서 설명하는 내용은 전부 다 index.html이라고 생각하시면 됩니다.

 

2.1. 헤더 및 PC 네비게이션(카테고리1) 수정

제 블로그에서는 이미 삭제된 부분이라서 엠원리액트 블로그를 캡처했습니다. 위 사진에 표시한 부분을 지워 보겠습니다.

2.1.1. '헤더'를 검색합니다.
2.1.2. 제목만 남겨두고, '공지사항', '방명록', '미디어로그', '위치로그'를 모두 지웠습니다.
지운 이유는

  • 공지사항: 사용하지 않음.(수성비전자방은 공지 기능을 사용하지 않는답니다.)
  • 방명록: 사이드바에 버튼을 만들어 둠.(1편 참고)
  • 미디어로그, 위치로그: 사용하지 않음.

2.1.3. 헤더에서 블로그 이름을 텍스트가 아닌 이미지(수성비전자방 로고)로 나타내도록 설정했습니다. images 폴더 안에 로고 이미지 파일을 넣고, 수성비 전자방 치환자를 img 태그로 바꿔 주었습니다.

1
<div class="top_title"><a href="https://toopyo.tistory.com/"><img src="./images/sujaimage.PNG" alt="수성비전자방" height="100"></a></div>
cs

이때 src에서 images 왼쪽에 ./를 꼭 붙여 주어야 합니다.
참고로 sujaimage는 수성비전자방 로고 이미지라는 뜻입니다.

2.1.4. '네비게이션 (카테고리1)'을 검색합니다. PC버전에서 보이는 부분입니다.
2.1.5. div category1과 관리, 쓰기를 삭제했습니다. 카테고리 리스트는 사이드바만으로 충분하기 때문에 지웠고, 관리와 쓰기는 굳이 방문자들 눈에 잘 띄는 곳에 있을 필요가 없어서 지웠습니다.
참고로 관리자 메뉴로 들어가려면 본인블로그주소/manage로 들어가시면 됩니다.

2.1.6. 네비게이션에 '사이드바' 버튼을 추가했습니다. 왜냐하면 창 크기를 작게 해서 모바일 화면으로 보다가 사이드바를 열고 닫고 한 후에 창 크기를 늘리면 사이드바가 안 나타날 수 있기 때문입니다. 하이퍼링크(a href) 주소를 "javascript:ViewLayer2();"로 해 주면 됩니다.(이건 물론 스킨의 m1react.js에 ViewLayer2() 함수가 사이드바를 나타내도록 정의되어 있기 때문입니다. 1편 참고.)

2.2. 댓글과 방명록 부분 수정

2.2.1. '방명록 페이지'를 검색합니다.
2.2.2. guest_input_name의 placeholder가 "이름"으로 되어있는 것을 "필명" 으로 바꾸었습니다. "이름"으로 되어있으면 왠지 본명 써야 할 것 같은 느낌이 들어서...
2.3.3. guest_input_homepage는 placeholder를 적용할 수 없습니다. 그래서 input 태그 앞에 누리집 또는 블로그 주소라고 써 주었습니다. 그런데 스킨 적용하고 보니 기본적으로 http:// 가 붙어서 애초에 헷갈릴 리는 없겠네요.(그런데 요즘 티스토리들은 https인데...)

2.2.4. <!-- 코멘트 s -->를 찾으시기 바랍니다.
2.2.5. rp_input_name의 placeholder가 "이름"으로 되어있는 것을 "필명" 으로 바꾸었습니다.
2.2.6. rp_input_homepage는 placeholder를 적용할 수 없습니다. 그래서 input 태그 앞에 누리집 또는 블로그 주소라고 써 주었습니다.(방명록과 마찬가지로 2.2.6번 과정은 굳이 안 해도 되는 거였음.)
2.2.7. name이 ""인 textarea에 placeholder를 추가했습니다.

2.2.8. 스킨 적용 시 이렇게 나옵니다.(VS Code의 Live Server로 확인하면 치환자가 적용되지 않으니 입력 상자의 내용들을 지우시면 placeholder가 제대로 적용되는지 확인하실 수 있습니다.)
물론, 티스토리 로그인 시 필명, 비밀번호 칸은 보이지 않습니다.

2.3. 글 하단 이웃 및 구독 버튼

이건 기존에 작성한 글로 설명을 대신하겠습니다.
티스토리 공감 버튼 뒤에 나만의 버튼 추가하기(Javascript HTML DOM)(https://toopyo.tistory.com/entry/tistorymybutton-javascripthtmldom)

제 글을 읽어 주셔서 감사합니다.

다음에 만나요!

댓글()