728x90
반응형

이미지 사이즈 줄이는 방법 

블로그 운영시 이미지 등록은 최소화 해야 합니다. 

왜냐 하면 이미지는 페이지 로딩 시간에 많은 영향을 주어 구글 SEO (Search Engine Optimization, SEO) 지수에 영향을 주기 때문입니다. 

https://pagespeed.web.de 에서 제 블로그 성능 측정을 해보았습니다. 

최근에 등록한 이미지 페이지 로딩에 상당한 영향을 끼치고 있네요.. 

최대한 빠른 조치를 취해야 하겠습니다. 

 

 

블로그 이미지 로딩 성능 측정

 

 

이미지 사이즈 줄이는 방법1(tinypng)

https://tinypng.com

에서 저장된 이미지를 드래그앤 드롭으로 이미지 용량을 줄일 수 있습니다. 

절반으로 이미지 사이즈가 확 줄 었습니다. 

번거롭지만 블로그를 잘 운영하려면 필수 일 것 같네요 ~ 

 

이미지 사이즈 줄이는 방법2(그림판)

  • 단축키 : window +R =>  mspaint 그림판 실행 
  • 크기 조정을 통해 사이즈 조정 

결론​

블로그 글 작성 시 최소한 크기로  이미지를 첨부하세요!

글의 가독성을 높이기 위한 꼭 필요한 이미지라면 이미지 사이즈를 줄여서 첨부하는 습관을 길러야겠습니다. 

 

728x90
반응형
728x90
반응형

구글 광고 개시되지 않을 때 해결 방법? 

구글 광고 승인을 받고 나서 티스토리에 구글 광고가 게시가 되지 않을 때 해당 방법을 사용하시기 바랍니다. 

카테고리를 통해 작성된 글에 들어갈 경우 구글은 다른 글로 인식을 하여 해당 글에 광고를 게시하지 않습니다. 

아래처럼 카테고리 접속을 통한  작성된 글에 젒속 할 때 작성된 글에 광고가 게재되지 않습니다. 

 

카테고리 글 접속 URL

 

구글 광고 미 적용 모습

해결 방법

해결하는 방법은 의외로 간단합니다. URL 링크 정보 에서 카테고리 정보를 삭제하는 방법입니다. 

아래 javascripts 를 HTML 편집기에서 <head> </head>  사이에  추가하시면 됩니다. 

 

<!-- URL 링크에서 카테고리 정보 제거 -->
<script type="text/javascript">
     if (typeof(history.pushState) == 'function')
      { var CatagoryURL = location.href;
      CatagoryURL = CatagoryURL.replace(/\?category=([0-9]+)/ig, '');
      history.pushState(null, null, CatagoryURL); }
</script>
<!-- URL 링크에서 카테고리 정보 제거 끝 -->

 

티스토리 html 스킨편집

 

 

적용 결과 

해당 내용을 HTML 에 추가 후 카테고리에서 글을 선택하면 카테고리 링크가 삭제되어 정상적으로 광고가 게시됩니다. 

 

728x90
반응형
728x90
반응형

내 사이트 (블로그) 검색 사이트 노출 

이번 포스팅에서는 내 사이트 (블로그) 검색 사이트에 노출 시키는 방법을 알아보겠습니다. 

 

1.구글 가입 및 구글 서치 콘솔 접속 

사이트를 운영하는 사람이라면 구글 계정 하나 쯤은 가지고 있겠죠? 

우선 구글 계정을 만듭니다. 

구글 계정으로 구글 서치 콘솔에 접속 하겠습니다. 

구글 서치 콘솔에 접속 하셨다면 노출 시킬 사이트 주소를 입력후 계속 버튼을 누릅니다. 

 

 

2.사이트 소유권 확인 작업

이제 사이트주소에대한 소유권 확인 작업을 진행 하겠습니다.  

하단 다른 확인 방법 중 HTML 태그 버튼을 눌러서 meta 태그를 복사합니다. 

3.노출 시킬 사이트 메타 테그 삽입

블로그의 HTML 편집기에 <head> </head> 사이에 복사합니다. 

티스토리 라면 관리자 페이지 에서 스킨편집-> 스킨 변경 -> HTML 편집 창에서 해당 작업을 진행 합니다. 

 

메타 태그 삽입이 완료 되었다면 적용 버튼을 눌러주세요!

 

4.구글 서치 완료 작업 진행 

이제 다시 구글 서치 페이지로 돌아 와서 완료 버튼을 눌러주세요!

 

완료 버튼을 누르면 소유권 확인이 완료되었다고 팝업창이 나오게 됩니다. 

5.사이트맵 등록 

소유권이 확인 완료 되면 11시 방향 목록 버튼을 눌러주세요 

그 다음 노출 시키고자 했던 블로그 URL 을 선택합니다. 

이후 사이트맵(Sitemaps) 매뉴을 클릭합니다. 

 

사이트맵 URL 입력 란에 

sitemap.xml , rss 를 추가 하고 제출 합니다. 

정상적으로 추가가되면 하단 제출된 사이트 맵에 상태표시가 성공으로 표시가 됩니다. 

6.URL 검사(색인 생성요청) 

마지막입니다.  

URL 검사 버튼을 눌러서 노출시킬 사이트에 대한 색인을 만드세요 

 

색인 생성 요청 버튼을 누르면 아래와 같이 색인 생성 작업이 진행 창이 나옵니다. 

 

728x90
반응형

'99. 블로그 꾸미기 > Tip' 카테고리의 다른 글

[구글 광고] 카테고리 URL 제거 방법  (0) 2022.05.22
티스토리 PDF 파일 저장  (0) 2022.03.04
728x90
반응형

티스토리 글을 광고 글 없이 저장하는 방법

블러그 글을 쓰다 보면 작성된 글을 별도로 어떻게 저장할수 있을까에 대한 고민을 하게됩니다. 
브라우저에서 인쇄 버튼을 눌러서 PDF 문서로 저장 하게 되는데요 
이런 방법으로 글을 저장을 하면 불 필요한 광고 문구 까지 문서에 포함 되어 저장 되게 됩니다. 

이번 포스팅에 서는 이런 문제를 해결 하기 위한 방법을 소개하겠습니다. 

 

1.네이버 웨일 에서 PDF 저장 

네이버 웨일이나 구글 크롬 브라우저 에서  우측 상단에 인쇄버튼을 눌러서 PDF 로 글을 저장 할수 있습니다. 

하지만 이 방법을 사용하게 되면 블로그에 원치 않은 머릿글이나 광고글 댓글들이 포함되어 파일로 저장 되게 됩니다. 

확장 프로그램을 통한 PDF 문서 저장 (클린 모드)

웨일 스토어에서 클린모드 앱을 설치 합니다. 

웨일 확장앱 설치

웨일 스토어에서 클린 모드 검색후 확장앱 설치 후 PDF 인쇄 

클린 모드 확장앱 설치&amp;nbsp;

2.크롬 웹스토어  Print Friendly & PDF 확장 프로 그램 설치 

크롬 웹스토어 확장 프로그램 설치(Print Friendly &amp;amp; PDF)

 

마우스 우클릭 후 Print Friendly & PDF 를 클릭 후  문서 저장 

문서 중 삭제하고자 하는 문구가 있다면 마우스 오버시 휴지통 버튼을 클릭하면 내용을 삭제 할수 있습니다. 

하지만 원본 블로그 양식과 차이가 있습니다. 

블로그에서 스킨을 별도로 꾸몄다면 내가 작상한 스킨이 원본 글과 다르게 적용되어 출력 되게됩니다. 

조금 아쉽네요.. 

 

블로그 글  Print Friendly & PDF 적용

 

3.크롬 웹스토어 Print Edit WE 확장 프로 그램 설치 (추천) 

크롬 웹스토어에서 (https://chrome.google.com/webstore) Print Edit WE 검색후 확장 플러그인을 설치 합니다. 

Print Edit WE 플러그인이 정상 설치 되었다면 PDF 로 저장하고 싶은 블로그 글을 플러그인 창에서 클릭해서 실행 하면 됩니다.

해당 플로그인을 통해 PDF 로 저장 하고 싶은 글을 수정하고나 삭제 할수 있습니다. 

선택창 누른후 Delete 버튼 클릭하면 광고글을 삭제 할수 있고 , Undo 버튼을 누른면 이전 상태로 되될릴수 있습니다. 

 

위에서 설명 했던 다른 방법(웨일, 클린모드) 보다 Print Edit WE를 사용해서 PDF 문서를 편집해서 저장 하니 깔끔하네요 ... 강력 추천합니다. 

 

 

 

사용방법 

728x90
반응형
728x90
반응형

웹페이지 제작이나 블로그 글 작성시에 아이콘 설정은 사용자에 보다 직관적이고 글을 이해하기 쉽게 하는데 도움을 줍니다. 예를 들어 주의 표시라는 글을 아이콘으로 대체함으로서 페이지를 보다 깔끔하게 예쁘게 작성 할수 있습니다. 

웹 아이콘 폰트는 여러 종류가 있으나 제일 많이 사용하는 fontawesome 을 사용 하는 방법에 대해 알아보겠습니다. 

Font Awesome 라이브러리 추가  

https://cdnjs.com/libraries/font-awesome

 

font-awesome - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

The iconic SVG, font, and CSS toolkit - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

티스토리 스킨 편집 (HTML - 라이브러리 링크 추가 )

티스트로리 스킨 편집을 통해 복사한 font-awesome 라이버리 경로를 html 태그의 <head> ~</head> 사이에 추가해줍니다. 

 

<!-- web Font -->	
<!--link rel="stylesheet" href="복사한 cdn 라이브러리 웹 경로" /-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />

 

서식  추가 및  Font Awesome 적용  

이제부터 Font Awesome 적용 해서 티스토리에 적용 하는 방법에 대해 알아보겠습니다. 

 

티스토리 관리자 페이지 에서 서식 관리 -> 서식쓰기를 버튼을 클릭후 자주 사용하는 서식을 만들어보겠습니다. 

 

아이콘 종류 확인 

https://fontawesome.com/icons

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

에는 2022년 4월 기준으로 2009 개의 무료로 사용할수 있는 아이콘이 존재 합니다. 

 

 

저는 경고 표시 아이콘을 가지고 테스트를 해보겠습니다. 

 

아이콘 서식 적용 확인 하기 

서식 -> 서식 글쓰기 버튼을 눌러서 테스트할 서식을 만드세요 

  • 글쓰기 모드는 기본 모드 -> HTML 모드로 꼭 바꾸서 확인해주세요 
  • 적용해볼 아이콘 이미지는 복사한 후 미리보리를 통해 추가된 아이콘을 확인해보세요 

 

미리보기를 통한 주의 아이콘 적용

 

아이콘 이미지를 이용한 서식 적용 

아래 링크에는 아이콘에 대한 다양한 스타일 변경에 대한 예시가 있습니다. 

꾸미고 싶은 데로 내용 참고 하셔서 적용하시면 좋을것 같습니다. 

저는 간단하게 우선 주의 표시를 위한 서식을 만들어 보았습니다. 

 

<div class="fa-1g">
   <i class="fa-solid fa-triangle-exclamation fa-fade" style="color:#FBB6BD" > 주의 </i>
</div>
<p class="alert alert_warning" style="border-top: 1px solid #f67280; background-color: #fff5f7;" >※ 주의</p>

 

fontawesome 아이콘을 활용한 주의 서식

 

아이콘 Styling 

아래 링크에 가시면 아이콘에 대한 다양한 이미지 변경 방법에 대해 소개가 되고 있습니다. 

천천히 보면서 나만에 아이콘을 만들어서 블로그에 적용해 보세요 

https://fontawesome.com/docs/web/style/styling

 

Styling with Font Awesome

Font Awesome 6 brings loads of new icons and features to the most popular icon set in the world.

fontawesome.com

색상변경 

색상변경

<span style="font-size: 3em; color: Tomato;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 48px; color: Dodgerblue;">
    <i class="fas fa-camera"></i>
  </span>

  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
    <i class="fas fa-camera"></i>
    </span>
</span>

Relative Sizing 

<!-- Relative Sizing -->
<p> Relative Sizing </p>
  <p><i class="fa-solid fa-coffee fa-2xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xs"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-sm"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-lg"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>
  <p><i class="fa-solid fa-coffee fa-2xl"></i> When my six o’clock alarm buzzes, I require a pot of good java.</p>

 

Literal Sizing 

<!--Literal Sizing -->
<p> Literal Sizing  </p>
  <i class="fa-solid fa-camera fa-1x"></i>
  <i class="fa-solid fa-camera fa-2x"></i>
  <i class="fa-solid fa-camera fa-3x"></i>
  <i class="fa-solid fa-camera fa-8x"></i>
  <i class="fa-solid fa-camera fa-9x"></i>
  <i class="fa-solid fa-camera fa-10x"></i>

 

 

vertically aligning icons 

<!-- vertically aligning icons -->
<p>vertically aligning icons</p>
<div style="font-size: 2rem;">
  <div><i class="fa-solid fa-skating fa-fw" style="background:DodgerBlue"></i> Skating</div>
  <div><i class="fa-solid fa-skiing fa-fw" style="background:SkyBlue"></i> Skiing</div>
  <div><i class="fa-solid fa-skiing-nordic fa-fw" style="background:DodgerBlue"></i> Nordic Skiing</div>
  <div><i class="fa-solid fa-snowboarding fa-fw" style="background:SkyBlue"></i> Snowboarding</div>
  <div><i class="fa-solid fa-snowplow fa-fw" style="background:DodgerBlue"></i> Snowplow</div>
</div>

Fade

Fade 적용

<!--Fade -->
<p>Fade</p>
<div class="fa-3x">
  <i class="fa-solid fa-triangle-exclamation fa-fade"></i>
  <i class="fa-solid fa-skull-crossbones fa-fade"></i>
  <i class="fa-solid fa-desktop-arrow-down fa-fade"></i>
  <i class="fa-solid fa-i-cursor fa-fade" style="--fa-animation-duration: 2s; --fa-fade-opacity: 0.6;" ></i>
</div>

 

Beat

Beat 적용

<!-- Beat -->
<p> Beat</p>
<div class="fa-3x">
  <i class="fa-solid fa-circle-plus fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s;" ></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 2s;"></i>
  <i class="fa-solid fa-heart fa-beat" style="--fa-beat-scale: 2.0;"></i>
</div>

 

Beat-Fade

   

<!--Beat-Fade-->
<p> Beat-Fade</p>
<div class="fa-3x">
  <i class="fa-solid fa-triangle-person-digging fa-beat-fade"></i>
  <i class="fa-solid fa-square-exclamation fa-beat-fade"></i>
  <i class="fa-solid fa-poo-bolt fa-beat-fade" style="--fa-beat-fade-opacity: 0.1; --fa-beat-fade-scale: 1.25;" ></i>
  <i class="fa-solid fa-circle-info fa-beat-fade" style="--fa-beat-fade-opacity: 0.67; --fa-beat-fade-scale: 1.075;" ></i>
</div>

 

 

 Bounce

<!-- Bounce --> 
<p>Bounce</p>
<div class="fa-3x">
  <i class="fa-solid fa-basketball fa-bounce"></i>
  <i class="fa-solid fa-volleyball fa-bounce"></i>

  <!-- bounce animation with no "squish" -->
  <i class="fa-solid fa-frog fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; " ></i>

  <!-- bounce animation with no "squish" or "rebound" -->
  <i class="fa-solid fa-envelope fa-bounce" style=" --fa-bounce-start-scale-x: 1; --fa-bounce-start-scale-y: 1; --fa-bounce-jump-scale-x: 1; --fa-bounce-jump-scale-y: 1; --fa-bounce-land-scale-x: 1; --fa-bounce-land-scale-y: 1; --fa-bounce-rebound: 0;" ></i>
</div>

 

728x90
반응형
728x90
반응형

티스토리 코드 블럭 line number 표시(highlightjs-line-numbers.min.js)

https://growupcoding.tistory.com/1 장에서 코드 블럭 테마 변경 방법을 알아보았습니다. 

하지만 조금 아쉽습니다. 코드 라인을 표시하면 사용자는 보다 코드를 참고 하기 쉬울 것입니다. 

이번 장에서는 코드 블럭에 라인넘버를 추가하는 방법에 대해 알아 보겠습니다. 

 

코드 블럭 highlightjs-line-numbers.min.js 다운로드 

코드 블럭에 라인넘버를 추가하기 위해서는 우선 highlightjs-line-numbers.min.js 라이브러리가 필요 합니다.

아래 GitHub 링크로 들어가서 highlightjs-line-numbers.min.js 를 다운로드 받습니다. 

https://github.com/wcoder/highlightjs-line-numbers.js

 

highlightjs-line-numbers.js-master.zip
0.10MB

티스토리 스킨 편집

소스가  다운로드되었다면 이제 티스토리 코드블럭에 line number 를 적용해 보겠습니다. 

 

관리자 모드에서 스킨 편집을 통해 다운로드 받은 highlightjs-line-numbers.min.js 파일을 업로드 해주세요  (꾸미기 -> 스킨편집-> html 편집-> 파일 업로드)

업로드 파일 이름 

  • dist/highlightjs-line-numbers.min.js

 

highlightjs-line-numbers.min.js 파일 업로드

 

 

 

업로드가 완료 되었다면 이제 HTML 소스 코드를 편집해서 highlightjs-line-numbers.min.js 스크립트를 적용 해주면 됩니다. 

highlight 소스 삽입 위치는 <head> 와 </head>  사이에 넣습니다. 

 

 

HTML 스킨 편집

<!--  코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet">	
<script>hljs.initHighlightingOnLoad();</script>
<!--  코드 블럭 highlight 추가 End-->

<!-- 코드 블럭 line number 추가 -->
<script src="./images/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
<!-- 코드 블럭 line number 추가 End-->

 

 

코드 블럭 Line Number 적용 결과 확인 

글쓰기 버튼을 누른후 코드 블럭에 코드를 작성합니다. 

 

코드블럭삽입

테스트 코드 블럭

#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}

Line Number 적용전&nbsp;

 

Line Number 적용 후&nbsp;

 

 

 

 

 

728x90
반응형
728x90
반응형

티스토리 코드 블럭 테마 적용(highlight.js)

블러그에 글을 쓸때 코드를 작성하는 경우가 있습니다. 

티스토리에서 기본 제공하는 코드블럭을 사용하면 코드를 보기가 다소 부족한 면이 있습니다. 

조금더 소스를 보기쉽고 참고하기 쉽도록  코드블럭을 업그레이드 해보겠습니다. 

 

코드 블럭 hightlight 추가

highlight 변경하기 위해서는 우선 highlight.js 라이브러리가 필요 합니다.

아래 링크로 들어가서 highlight.js 를 다운로드 받습니다. 

https://highlightjs.org/download/

 

Getting highlight.js

Hosted A prebuilt version of highlight.js with 34 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other available styles look into the highlig

highlightjs.org

 

적용테마 선정

스킨이 다운로드 완료 되었다면 이제 적용할 코드 블럭 테마를 살펴 보겠습니다. 

https://highlightjs.org/static/demo/ 에서 내가 적용할 코드 블럭을 테마를 먼저 살표 보겠습니다. 

저는 Atom One Dark 테마를 적용하도록 하겠습니다. 

 

 

 

 

highlight.js demo

 

highlightjs.org

티스토리 스킨 편집

highlight 가 다운로드되었다면 이제 티스토리 코드블럭에 highlight 를 적용하겠습니다. 

 

관리자 모드에서 스킨 편집을 통해 다운로드 받은 highlight.js 파일을 업로드 해주세요  (꾸미기 -> 스킨편집-> html 편집-> 파일 업로드)

업로드 파일 이름 

1.highlight.js , highlight.min.js

2.styles\테마( styles\atom-one-dark.min.css)

* 데모 환경에서 Atom One Dark 를 선택 하셨다면 적용할 스크립트는 atom-one-dark.min.css 가됩니다. 

만약 Base16/Apathy 를 선택 하셨다면 styles\base16\apathy.min.css 스크립트를 업로드 하셔서 사용하시면됩니다. 

 

 

 

 

업로드가 완료 되었다면 이제 HTML 소스 코드를 편집해서 highlight 스크립트를 적용 해주면 됩니다. 

highlight 소스 삽입 위치는 <head> 와 </head>  사이에 넣습니다. 

 

 

<!--  코드 블럭 highlight 추가 -->
<script src="./images/highlight.min.js"></script>
<link href="./images/atom-one-dark.min.css" rel="stylesheet">	
<script>hljs.initHighlightingOnLoad();</script>
<!--  코드 블럭 highlight 추가 End-->

 

atom-one-dark.min 테마 코드 블럭 적용 

글쓰기 버튼을 누른후 코드 블럭에 코드를 작성합니다. 

 

코드블럭삽입

 

코드블럭 적용후&amp;nbsp;

 

 

헉! 이건 내가 원했던 코드 블럭 테마가 아닙니다. 

이런 이유는 티스토리에서 기본 제공하는 Synctax Highlight 가 적용 되었기 때문입니다. 

플러그인에서 Synctax Highlight 기능 사용을 해제후 확인해주세요 

 

 

 

 

atom-one-dark 테마 적용 결과 

해제가 되었다면? 

아래 처럼 예쁘게 코드블럭이 적용되어 화면에 코드가 예쁘게 표시될 겁니다. 

 

728x90
반응형

+ Recent posts