며칠 전에 미투데이에서 보낸 글 포스팅이 예쁘지 않아서 CSS수정하고 싶은데
텍스트큐브는 언제 수정할 수 있게 해줄거냐고 포스팅을 했었다.
그랬더니 그 글에 hardboil님께서 친절히(아 역시, 이래서 SNS는 아름답다!!!) 코멘트로
궁시렁님의 포스트 주소를 알려주신 덕분에 드.디.어 미투데이 배달글에 스킨을 입혔다!!!
알고 보니 생각지도 못한 아주 간단한 방법으로 css를 삽입할 수 있었는데!!!!!!
나도 쵸큼 더 고민해볼걸 그랬다.
아무튼 그래서 나도 HTML 위젯 을 이용해서 미투데이에서 보낸글에만 스킨을 살짝 입혔다.
css는 egg님의 포스팅을 참고하여 수정했다.
css수정 전 미투데이에서 보낸 글
1. 일반포스팅과 글감찾기를 통해 작성한 글
2. 일반포스팅과 미투포토로 올린 사진
그밖에 미투캐스트는 안해봐서 데이터가 어떻게 오는지 모르겠고.
미투동영상도 잘 모르겠네(;;)
픽짜로 올린 파일도 그렇고;ㅁ;
음,
미투캐스트나 미투 동영상, 픽짜로 올린 파일에 대한 부분이 어떻게 피드 되는지 아는 분 계시면 살짝 알려주시면....
위 스킨에 쓰인 CSS
</div><!--텍스트큐브 닷컴의 html편집기에서 수정할 경우에만 div를 먼저 닫아준다 -->
<style type="text/css">
/*페이지 전체 글씨체를 맑은 고딕으로 바꿈*/
body{font-family:맑은 고딕;}
.me2day_daily_digest {
width:500px; /*포스트영역의 가로 길이에 맞춰서 수정*/
border:0;
no-repeat right bottom;
}
.me2day_daily_digest ul {
margin:0;
padding:5px 0px;
list-style:none;
border:0;
}
.me2day_daily_digest li {
margin:0 5px;
padding:0 0 10px 20px;
list-style:none;
line-height:180%;
border-bottom:1px dotted #cdcdcd;
background:url('http://me2day.net/images/me2day_icon.gif') no-repeat left 3px;
font-size:16px; /*미투데이 포스팅은 큰글씨!가 익숙해서*/
}
/*태그부분*/
.me2day_daily_digest span.me2_tags{
display:block;
padding:0;
color:#cdcdcd;
font-size:12px;
line-height: 110%;
}
/*퍼머링크*/
.me2day_daily_digest span.datetime{
display:block;
text-align:right;
text-decoration:none;
font-size:12px;
line-height: 120%;
}
/*글감찾기로 작성한 글의 컨텐츠 레이어*/
.me2day_daily_digest div.show_content_layer{
height:80px;
margin-bottom:10px;
padding:5px;
background-color:#FDF5E6;
}
/*컨텐츠 타이틀*/
.me2day_daily_digest div.show_content_layer h5{
font-size:12px;
font-family:굴림 bold;
line-height: 120%;
margin:0;
width:80%;
height:30px;
float:right; /*이부분 때문에 이미지 오른쪽에 타이틀이 나옴*/
padding-top:30px;
}
/*컨텐츠 이미지*/
.me2day_daily_digest div.show_content_layer div#cont_img{
width:20%;
height:60px;
float:left; /*이부분 때문에 타이틀보다 왼쪽에 이미지가 나옴*/
}
/*작성자 정보*/
.me2day_daily_digest p {
display:block;
}
/*미투포토를 했을 경우 사진 영역*/
.me2day_daily_digest li p {
display:block;
text-align:center;
width:480px;
padding:10px;
}
/*미투포토 이미지 사이즈 변경*/
.me2day_daily_digest li p img {
width:400px;
height:300px;
}
</style>
<div>
<!--텍스트큐브 닷컴의 html편집기에서 수정할 경우에만 div를 다시 열어주어 레이아웃의 틀어짐을 막는다 -->
<style type="text/css">
/*페이지 전체 글씨체를 맑은 고딕으로 바꿈*/
body{font-family:맑은 고딕;}
.me2day_daily_digest {
width:500px; /*포스트영역의 가로 길이에 맞춰서 수정*/
border:0;
no-repeat right bottom;
}
.me2day_daily_digest ul {
margin:0;
padding:5px 0px;
list-style:none;
border:0;
}
.me2day_daily_digest li {
margin:0 5px;
padding:0 0 10px 20px;
list-style:none;
line-height:180%;
border-bottom:1px dotted #cdcdcd;
background:url('http://me2day.net/images/me2day_icon.gif') no-repeat left 3px;
font-size:16px; /*미투데이 포스팅은 큰글씨!가 익숙해서*/
}
/*태그부분*/
.me2day_daily_digest span.me2_tags{
display:block;
padding:0;
color:#cdcdcd;
font-size:12px;
line-height: 110%;
}
/*퍼머링크*/
.me2day_daily_digest span.datetime{
display:block;
text-align:right;
text-decoration:none;
font-size:12px;
line-height: 120%;
}
/*글감찾기로 작성한 글의 컨텐츠 레이어*/
.me2day_daily_digest div.show_content_layer{
height:80px;
margin-bottom:10px;
padding:5px;
background-color:#FDF5E6;
}
/*컨텐츠 타이틀*/
.me2day_daily_digest div.show_content_layer h5{
font-size:12px;
font-family:굴림 bold;
line-height: 120%;
margin:0;
width:80%;
height:30px;
float:right; /*이부분 때문에 이미지 오른쪽에 타이틀이 나옴*/
padding-top:30px;
}
/*컨텐츠 이미지*/
.me2day_daily_digest div.show_content_layer div#cont_img{
width:20%;
height:60px;
float:left; /*이부분 때문에 타이틀보다 왼쪽에 이미지가 나옴*/
}
/*작성자 정보*/
.me2day_daily_digest p {
display:block;
}
/*미투포토를 했을 경우 사진 영역*/
.me2day_daily_digest li p {
display:block;
text-align:center;
width:480px;
padding:10px;
}
/*미투포토 이미지 사이즈 변경*/
.me2day_daily_digest li p img {
width:400px;
height:300px;
}
</style>
<div>
<!--텍스트큐브 닷컴의 html편집기에서 수정할 경우에만 div를 다시 열어주어 레이아웃의 틀어짐을 막는다 -->
4일치의 미투 보낸글들로 봐서는 아직까지 위의 CSS에는 별다른 문제가 없지만
짧은 실력으로 수정한 CSS이므로 살짝 오작동을 할 수도 있다는 점을 미리 적어둔다.(빠져나갈 구멍파는 중;)
