블로그를 운영하면서 가장 중요하게 여기는 것 중 하나가 제목이다. 제목에는 그 글이 표현하고 싶은 대표 키워드들이 들어 있다. 그래서 욕심을 내다 보면 제목이 아주 길어진다. 그래서 생각했다. 제목을 어떻게 하면 더 깔끔하게 표현을 할까? 많은 고민을 했다. 제목을 길이에 맞춰 크기를 줄이면 될까? 그렇다면 제목을 길게 썼을 때 글씨가 너무 작아 제목이 보이지 않을까?
두가지 방법이 있다. 오늘은 그 첫번째 방법에 대해 알아보도록 하자. 두번째 방법은 약간 문제가 있다. 이건 아래에서 다시 얘기하도록 하자. 첫번째 방법은 특정 포인트로 제목을 줄 넘김 하는 것이다. 간단하게 예시를 보면 아래와 같다.
바로 이전에 쓴 글만 봐도 키워드를 이것저것 넣다보니 꽤나 길어졌다. 프리젠테이션과 비교하긴 좀 그렇지만 아주 깔끔하게 보여주고 싶은 사람들에게는 위와 같은 줄넘김은 꽤나 반감을 살 것 같다. 그래서 필요한 포인트별로 줄 넘김을 넣어봤다. 여기서 키포인트로는 점(.)을 넣었다. 실제로 글을 보는 사람에게는 그 점이 보이지는 않는다. 하지만 네이버 등에 노출 될 때는 보일 것이다.
좀 풀어보자면 네이버 노출 글에는 제목이 그대로 보이기 때문에 키포인트로 넣은 점이 보이지만 실제 글 페이지로 들어와 글을 볼 때 즉, 본인의 블로그 페이지로 접근을 했을 때 제목의 일부를 수정하게 동작시켰다. 아래와 같이 말이다.
이전에 썼다는 글의 제목만큼이나 길다. 실제 네이버에서 노출되는 제목은 '블로그 업(Up). 블로그 제목. 깔끔하게 꾸미기. (블로그 팁)' 이다. 점(.)에서 줄 넘김으로 교체해주는 스크립트만 넣어준 것이다. 사실 점도 필요 없다. 조금 더 네이버에 노출되는 제목이 깔끔하길 바란다면 빈칸 두번이라든가 ㄱ의 첫번째 특수문자 등으로 변경해줘도 된다.
그러면 실제 노출되는 제목도 깔끔하고 글을 읽을 때 제목이 이상하게 줄넘김 되는 현상도 막을 수 있다. 여기서 한가지 더 추가해보자. 제목이 너무 우락부락하다. 메인 제목 하나를 두고 그 외 제목은 마치 제목을 보조해주는 것처럼 꾸며도 좋을 것 같다.
위에서 얘기했던 것 중 두번째 방법은 특정 포인트를 기준으로 뒤에 있는 내용을 지우는 것이다. 이럴 경우 제목에 키워드를 원하는만큼 다 넣어도 실제로 글을 볼 때는 내가 원하는 제목 하나만을 보여줄 수 있다. 단지 네이버에서 노출 될 때 제목이 과하게 긴게 단점이랄까? 하지만 검색에서는 조금 유리할 수 있을 것이다.
제목을 이렇게 올린 후 저장을 해보았다. 여기서 키포인트는 '...보여주기' 와 '[블로그 제목...]' 사이에 있는 공백이다. 두칸의 공백을 넣었다. 이 부분을 기준으로 뒤쪽 내용이 안나오도록 변경했다. 만약 모두 쓴다면 정말 엉망징창이었을 것이다. 하지만 제시한 방법처럼 쓰면 아래와 같이 나온다.
페이지가 모두 로딩 된 후 제목을 변경해주는데 추측컨데 규정에 어긋나지는 않을 것 같다. 블로그 제목의 스타일을 바꾸듯이 제목을 원하는 형태로 가공한 것이니까. 이렇게 두가지 방법으로 블로그 제목을 아주 이쁘게 꾸밀 수 있게 되었다. 여기서 가장 중요한 방법 공개.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<script>
function replaceAll(str, searchStr, replaceStr) {
return str.split(searchStr).join(replaceStr);
}
$(document).ready(function(){
var _temp = $(".title_custom").html();
_temp = replaceAll(_temp, "." , "</p>");
_temp = _temp.split(" ")[0];
$(".title_custom").html(_temp);
});
</script> |
cs |
이 부분을 HTML 의 <body></body> 안의 제일 마지막에 넣어주도록 하자. 여기서 키포인트로 수정해야 할 부분은 8번 라인의 "." 안의 점과 9번 라인의 " " 이부분을 수정하면 된다. 첫번째 점은 줄넘김이고 두번째 점은 해당 부분 뒤 내용을 지워주는 역할이다. 여기에 원하는 키 값을 넣어 줄넘김을 하든 숨기기를 하든 하면 된다. 참 쉽....나...?
'+ Store 04' 카테고리의 다른 글
| 혜생환 타히보 항암식품 [암에 좋은 혜생환, 암에 좋은 음식] (0) | 2017.09.19 |
|---|---|
| 로스트아크 2차 cbt 신청 [pc게임 추천, 최신게임, 클로즈베타 게임] (0) | 2017.08.28 |
| 사진 이미지 파일 용량 줄이기 [JPG, PNG, PDF, JPEG] (0) | 2017.08.08 |
| 에비에어 R10 서큘레이터 간단 사용 후기 (0) | 2017.07.18 |
| 강릉 주문진 휴펜션 다녀온 후기 (0) | 2017.05.28 |