[운영일지]웹미니 라이프 스킨 1.3.3

webmini life 1.3.3

업데이트 내역

- 본문글자크기 조절기능 추가

 

스킨편집에서 '본문 폰트사이즈 확대/축소' 기능을 설정할 수 있습니다.

 

 

화면크기 기능과 다르게 본문글자 기능은 본문에 글자 크기만 제어합니다.

 

기존 사용자중에 스킨을 수정해서 덮어씌우기가 어려울경우는 아래 코드를 추가해주시면 됩니다.

 

script.js

// 본문 글자크기조절
코드
// 본문 글자크기조절 end

 

위 주석을 찾아  안에 코드를 복사 후 넣어주세요.

 

skin.html

// 아래 코드를 찾으신 후
<s_if_var_focus-content>
<button class="btn_expand">본문 집중모드</button>
</s_if_var_focus-content>

// 아래 코드로 변경합니다.
<div class="option_box">
    <s_if_var_focus-content>
    <button class="btn_expand">본문 집중모드</button>
    </s_if_var_focus-content>

    <s_if_var_font-zoom>
    <div class="font_zoom">
        <span class="tt">본문글자</span>
        <button id="font_increase" aria-label="폰트 확대"><i class="fas fa-plus"></i></button>
        <button id="font_decrease" aria-label="폰트 축소"><i class="fas fa-minus"></i></button>
        <button id="font_reset" aria-label="폰트 초기화"><i class="fas fa-redo-alt"></i></button>
    </div>
    </s_if_var_font-zoom>
</div>

 

style.css

.post-cover .option_box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.post-cover .option_box .font_zoom {
  display: inline-flex;
  align-items: center;
  height: 35px;
  border-radius: 20px;
  border: 1px solid #ddd;
  color: var(--textSideColor2);
  font-size: 13px;
  text-align: center;
  padding: 0 15px;
  margin-top: 10px;
  box-sizing: border-box;
  gap: 8px;
}
.post-cover .option_box .font_zoom button{
	color:#222;
}

/* 다크모드 부분에 */
[data-theme='dark'] .post-cover .option_box .font_zoom {
  border-color: #666;
  color: #eee;
}
[data-theme='dark'] .post-cover .option_box .font_zoom button {
  color: #fff;
}

 

index.xml 은 덮어주셔야 스킨편집에서 설정이 가능합니다.

 

주의할점

index.xml을 덮을경우 기존에 설정된 값들이 없어지므로 스킨편집 설정창을 새로 하나더 열어서 업로드하시고 기존 설정창에서 아무거나 수정 후 적용을 누르시면 기존 설정들이 다시 저장됩니다. 그후에 새로추가된 기능을 재설정하시면 됩니다.

 

 

 

스킨 구매하기