티스토리 블로그 운영기 : CSS - 수정

2019-04-25

font size & color

16px을 선호했는데, 정보 사이트를 구축할 예정이기 때문에 18px로 큼직큼직하게 볼 수 있도록 하였다. 원래는 0.9375em으로 되어있는데, 색깔을 #333333으로 바꾸고, font size는 18Px, line-height는 1.8로 변경하였다.

 

캡션이 어디인지 모르겠습니다...

그림 이미지를 shadow를 좀 주어서 글과 그림이 조금 떨어져 보이게 만들어보았습니다. 워드프레스를 배우면서 이 분의 홈페이지에서 배운 CSS를 적용하였습니다. Caption의 색깔은 #9b9b9b로 바꿔주었습니다. 수정을 하고 나니, 훨씬 구별하는데 용이하고 좋네요. 

figure.imageblock.alignCenter{
	box-shadow: 0px 0px 20px #000;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
	margin: 20px;
	width:480px;
    margin-left: auto;
    margin-right: auto;
}

figure.imageblock.alignCenter figcaption {
    color: #9b9b9b;
    font-size: 0.7rem;
}

 

포스팅과 이미지가 구별이 잘 안되는 것 같다.

위의 포스팅이 끝나고 아래의 이미지가 바로 연결되어서 이미지가 어느 포스팅에 연결되는지 애매해보여서 CSS를 수정하였다. 커버페이지의 썸네일 이미지에 borderline 을 추가함으로써 해결하였다.

.cover-masonry .thum img {
    border-top: #909090 1.5px solid;
    padding-top: 15px;
}

CSS로 메인페이지 썸네일 이미지에 흑백 필터 넣기

https://ghj1001020.tistory.com/680 에서 하는 방법을 배웠다. filter: grayscale(100%)을 넣어주면 되는 것이었다. 모든 썸네일 이미지를 하나하나 바꿀 필요 없이 자동으로 흑백이미지로 나오게 변경하였다.