続きを読んでね?
CSSをちょっと編集してみました。
最近のブログはCSSも編集できるんですね。すごい!
ということで続きを読んでね?
この続きを読んでねって言うの、なんかかっこいいって思ってます。
そこでCSSを駆使して改造したいと思いしました。
汚いコードですが、書いたCSSは以下のとおりです。
h1.entry-title{ border-style: solid; border-width: 1px 0px 1px 0px; background-color: rgb(200,200,200); -webkit-transition: background-color 200ms linear,border-color 200ms linear; box-shadow: 0px 2px 10px rgba(0,0,0,0.4); } h1.entry-title:hover { background-color: rgb(120, 120, 120); border-color: rgb(255,255,255); } h1.entry-title > a{ color:rgb(60,60,60); display:block; height: 100%; width: 100%; padding:10px; transition: color 100ms ease-out; } h1.entry-title > a:before{ content:"★ "; } h1.entry-title:hover > a{ color:rgb(230,230,230); } div.entry-content{ background-color: rgb(245,245,245); border-style: solid; border-width: 20px 20px 0px 20px; border-color: rgb(245,245,245); } .entry-content img{ display: block; box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8); border-radius: 10px; width:70%; padding: 10px; margin: auto; } .entry-see-more{ display: block; text-decoration: none; text-align: center; transform:scaleX(1.08); border-style: solid; border-width: 2px; border-color: rgb(150,150,150); color: rgb(150,150,150) !important; transition: box-shadow 100ms linear,color 100ms linear,border-color 100ms linear; } .entry-see-more:before{ content:" ▶ "; } .entry-see-more:after{ content:" ◀ "; } .entry-see-more:hover{ box-shadow: 0px 0px 10px rgba(60,60,60,0.3); color: rgb(60,60,60) !important; border-color: rgb(60,60,60); }
タイトルと続きを読むの箇所を修正しました。
あと、画像も枠的なものをつけてみました!
暇を見つけてちょくちょく更新してみたいです。