본문 바로가기

기타 투자/블로그로 돈벌기

티스토리 블로그 최적화 작업 - 1. POSTER스킨 블로그 가독성 높이기

반응형

티스토리 블로그 최적화 작업 #1. POSTER스킨 블로그 가독성 높이기

티스토리 POSTER스킨을 변경중에 있습니다. 예전에 제가 블로그 운영팁으로 글을 작성했던것의 일환으로 블로그를 사용자가 보기좋게 만드는 것도 최적화중에 하나입니다.

함께읽으면 좋은글

[돈되는지식/블로그로 돈벌기] - 블로그 운영팁 - 꾸준함으로 승부하라, 그러면 혜택이 따라온다

[돈되는지식/블로그로 돈벌기] - 네이버 검색 상위 노출방법-C-Rank이해하기

글도 글이지만 블로그에 방문해주시는 분들이 편하게 읽고 다음에 또오시고 싶게끔 편안했으면, 좋겠다는게 제 생각입니다. ㅎㅎㅎ

저는 티스토리 POSTER스킨이 기본적으로 반응형이고 다양한 스크립트가 적용되어있어 일단 UI는 기본적으로 예쁩니다. 그래서 해당 스킨을 사용하기로 결정하고 운영중인데요

보다보니 저와같은 고민을 하시는 분들이 많이 계실듯해서 함께 공유하고자 작성합니다. 도움이 되셨으면 좋겠습니다.

 

포스터스킨 이미지포스터스킨 이미지

 

하지만 몇가지가 조금은 부담시려워서 손을 보기 시작했는데요.
코딩쪽 관련해서는 손을 놓은지 꽤 오래(약 10년)정도 된지라.. 감이 잘 안오더라고요

하지만 티스토리의 장점이 스킨을 내맘대로 조금은 바꿀수 있는게 아니겠어요? 그래서 조금씩 조금씩 시간날때마다 손을 보고 있습니다.

티스토리 포스터스킨 최적화하자티스토리 포스터스킨 최적화하자

 

티스토리 포스터(POSTER)스킨의 오류
커버기능 중 슬라이더
결국 삭제

일단은 poster스킨에 기본적인 오류가 조금 있습니다. 바로 커버로 사용하고 싶었던 슬라이더 기능인데요.. 아래와 같이 좌우로 넘겨볼수 있는 기능입니다.

슬라이더 기능이 구현된 화면슬라이더 기능이 구현된 화면

 

모바일에서 너무 예쁜 UI를 구현시켜주기때문에 꽃과같은 기능이라고 생각하는데요.. 화면상에 표현은 잘되는데 코드가 오류가 있습니다. 붉은색으로 종료코드가 나온거 보이실꺼에요

저품질 블로그가 되지 않기 위해 어찌해야하나 고민을 하다가 코딩지식이 없어서 그냥 해당 코드는 포기하고 전부 삭제시켜버렸습니다. 혹시 몰라 남겨두시려는 분들은 주석처리 하시면 됩니다.

슬라이더가 구현되는 HTML코드슬라이더가 구현되는 HTML코드

 

주석처리하는 방법은 아시죠? 코드 시작하는 부분에 <!-- 넣고 끝나는 부분에 --> 를 넣어주시면됩니다.

 

 

블로그 포스팅의 가독성을 높이자
포스트 글자크기 변경

블로글를 운영할때 가장 신경쓰는 부분이 바로 가독성 입니다. 글로그에 누군가 방문했을때 글이 읽기가 편해야하는데요

티스토리 블로그의 기본설정은 일단 코딱지 만한 글로 되어있고, 요즘은 대부분 모바일로 검색을하고 조회를 하는데 안그래도 작은화면에 눈까지 아파옵니다.

눈아파~ ㅠㅠ눈아파~ ㅠㅠ

 

그래서 가장 먼저 손을 댄 것이 글자크기입니다. 정말 손봐야하는 곳이 많이 있기는한데요. 일단 메인글이 표시되는 곳을 먼저 손보기로 했습니다.

포스트 글자크기 키우는 스크립트 수정포스트 글자크기 키우는 스크립트 수정

 

포스트에 표시되는 글자의 크기를 변경하려면 CSS탭에서 “.entry-content p”를 찾으시면됩니다.

p는 p태그에 적용되는 속성을 말하는데요 해당부분의 글자크기(font-size)를 1.15em으로 변경해주었습니다. 적용을 하고나면 모바일에서 볼 때 아래와 같이 조금은 큰 글씨가 표현됩니다.

본인의 블로그를 들어가셔서 개인의 취향에 맞게 설정하시면 좋을 것 같습니다. ^^

 


사용편의성을 높이자
메뉴버튼 상단에 고정시키기

그 다음에 한일은 메뉴버튼을 상단에 고정시키는 일입니다. 제가 타사이트를 검색하고 돌아다녀봐도 글을 보다가 매번 상단으로 다시 올려서 메뉴를 눌러야하는 불편함이 있었는데요.

손가락 지문이 다없어지겠어요.. ^^ 그래서 메뉴를 상단에 고정시키기로 했습니다. 역시나 CSS탭에서 수정을 해줘야합니다.

상단에 메뉴버튼을 고정 : POSITION을 FIXED로 상단에 메뉴버튼을 고정 : POSITION을 FIXED로

 

여기서 보시면 바로 position 부분인데요 해당 부분을 fixed 로 변경해주시면됩니다. fixed 고정시키다 ㅎㅎㅎ 간단하죠? 

아래는 제 블로그에서 보실수 있는 메뉴의 모습입니다. 모바일에서도 상단에 고정되서 언제든 다른 메뉴로 이동할 수 있게 구성해 놓았습니다.

상단에 메뉴버튼을 고정시키자상단에 메뉴버튼을 고정시키자

 

 


블로그 사용편의성을 높이자
리스트 커버 모바일에서도 설명보이기

티스토리 POSTER스킨의 단점이라고 해야할까요? 저도 스킨을 적용하고 몰랐는데요.. 리스트 커버를 사용한 곳이 제목이랑 썸네일만 보이고 해당 글에 대한 포스트 내용 일부가 표시가 되지를 않았습니다.

리스트 커버에 포스트글이 안보인다리스트 커버에 포스트글이 안보인다

 

이게 먼일이지? 지지고 볶고 다해봤는데 안되다가 이유를 알았는데 너무 간단한 곳에 있었습니다 ㅠㅠ

CSS 쭉내리다보면 아래와 같이 Media Screen에 모바일에서는 이렇게 보여줘라 라는 코드가 따로 있었습니다. ㅠㅠ 무식한게 죄죠..

그 하단으로 내리면 아래와 같은 코드가 보이실 텐데요 .cover-list ui li .excerpt 부분에 display : none; 으로 되어있었습니다.

리스트 커버에 포스트글 보이기리스트 커버에 포스트글 보이기

 

글을 보여주지 말라는 뜻이시죠 아놔... -_-;; 그래서 해당 라인을 주석처리해버리고 너무 작게 보이면 안되니까. 불편하니까 제목보다는 살짝작게.. 보기에는 조금 크게 글자크기도 1.0em으로 변경해주었습니다.

이렇게 간단한 것을.. 누구한테 물어볼데도 없고.. 괜히 생고생만 했네요.. 어쨌거나 저와같은 불편을 겪지 않으시라고 간단히 정리해봤습니다.

코딩을 알거나 잘하시는 분들은 정말 예쁘게 디자인도 하시던데요. 저는 그정도는 아니니까 요정도 수준에서 만족할까합니다.

쵝오~~~쵝오~~~

 

블로그를 보기편하게 최적화하는 것은 너무나도 한 것 아시지요? 네이버 에디터처럼 너무 예쁘게 만들 수 있는것도 아니고,

완전 불편한 메모장 같은 티스토리 에디터에서 기본적으로 사용하기 편하게 셋팅을 해두는 것이 무엇보다 중요할 것같습니다. 저보다도 블로그에 들어오는 사용자를 위해서요 ^^

 


반응형

Visitor :
POWERED/DESIGN/COPYRIGHTⓒ BY JJISSO