1. 文字色・リンク文字色の変更
2. 文字サイズ・太さ・字体の変更
3.「ブログ検索」ボックスを非表示化する
4. リンク時の文字色変化を遅延させるMEW
5. 枠線の四隅を丸くするMEW
6. フッタ(コピーライト)の表示位置を右端に寄せる
<style>
#rootElement a{color:#339900}
#rootElement a:hover{color:#99cc00; text-decoration:none}
#profContainer{color:#339900}
</style>
#rootElement a{color:#339900}
#rootElement a:hover{color:#99cc00; text-decoration:none}
#profContainer{color:#339900}
</style>
2. 文字サイズ・太さ・字体の変更
<style>
#articleData{font-size:86%}
#profData a{font-weight:bold}
.more{font-size:100%}
.freeSpace li{display:inline; font:bold 100% Arial ,sans-serif}
#articleData ul li a{font-size:120%; font-weight:bold}
</style>
#articleData{font-size:86%}
#profData a{font-weight:bold}
.more{font-size:100%}
.freeSpace li{display:inline; font:bold 100% Arial ,sans-serif}
#articleData ul li a{font-size:120%; font-weight:bold}
</style>
3.「ブログ検索」ボックスを非表示化する
<style>
#headerSearch{display:none}
</style>
#headerSearch{display:none}
</style>
4. リンク時の文字色変化を遅延させるMEW
<style>
a{outline:none; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
</style>
a{outline:none; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
</style>
5. 枠線の四隅を丸くするMEW
<style>
#profData h2, #favoriteData h2{border-radius:5px}
#favoriteData, #freeArea, #articleData{border-radius:10px}
.sknys-asin-image{border-radius:10px}
.userImg{border-radius:5px}
</style>
#profData h2, #favoriteData h2{border-radius:5px}
#favoriteData, #freeArea, #articleData{border-radius:10px}
.sknys-asin-image{border-radius:10px}
.userImg{border-radius:5px}
</style>
6. フッタ(コピーライト)の表示位置を右端に寄せる
<style>
#footer .copyright{float:right}
</style>
#footer .copyright{float:right}
</style>
*
「新プロフィール・ページ」を好みのデザインにカスタマイズしましょう。「Users CSS」の中の「User Profile」を参照すればCSSの知識がなくても、どのセレクタのプロパティ値(value)を変更すれば良いか、凡その見当は着くはずです。〈カスタマイズ 1.2〉では文字色や文字サイズなどを変更しましたが、 2.0では「transition」でリンク文字の色変化を遅延させ、「border-radius」で枠線の四隅を丸くすることで、見た目の印象を柔らかくしました(ブログも角が取れて丸くなった?)。「フリースペース」の中にCSSを入れる時は、カスタムペイン(サイドバー)と同じように、<style>〜</style>で囲むこと。その際に注意すべきことが1つだけあります。複数のCSSを列記する場合は改行しないで、半角スペースで区切って必ず一行(ワン・センテンス)で表記すること。見やすさを優先させて改行しちゃうと、最初のセレクタしか反映されません。
*
もっと見るf a v o r i t e - a l b u m s
- Artist: Sufjan Stevens
- Label: Sony Music
- Date: 2015/03/31
- Media: Audio CD
- Songs: Death With Dignity / Should Have Known Better / All Of Me Wants All Of You / Drawn To The Blood / Eugene / Fourth Of July / The Only Thing / Carrie & Lowell / John My Beloved / No Shade In The Shadow Of The Cross / Blue Bucket Of Gold
<div id="articleData"><a href="http://sknys.blog.so-net.ne.jp/2014-11-21" class="more" style="font-size:99%">もっと見る</a>
<h2>f a v o r i t e - a l b u m s</h2>
<div class="sknys-asin-area"><a href="http://sknys.blog.so-net.ne.jp/2014-12-16#sufjan" target="_blank"><img src="/_images/blog/_fc3/sknys/Carrie-Lowell-Sufjan-Stevens.jpg" class="sknys-asin-image" alt="Carrie & Lowell" title="Carrie & Lowell" width="155" height="155"></a><div class="sknys-asin-info"><p class="sknys-asin-title"><a href="http://sknys.blog.so-net.ne.jp/2014-12-16#sufjan" target="_blank">Carrie & Lowell</a></p>
<ul><li class="sknys-asin-label">Artist: Sufjan Stevens</li><li class="sknys-asin-label">Label: Asthmatic Kitty</li><li class="sknys-asin-label">Date: 2015/03/31</li><li class="sknys-asin-label">Media: Audio CD</li><li class="sknys-asin-label">Songs: Death With Dignity / Should Have Known Better / All Of Me Wants All Of You / Drawn To The Blood / Eugene / Fourth Of July / The Only Thing / Carrie & Lowell / John My Beloved / No Shade In The Shadow Of The Cross / Blue Bucket Of Gold</li></ul></div></div></div><div class="sonet-asin-break"></div>
<div id="articleData" style="margin-bottom:-12px"><a href="http://sknys.blog.so-net.ne.jp/tag/articles" class="more">もっと見る</a><h2>t a g - c l o u d</h2><ul class="freeSpace"><li><a style="font-size:25px" href="http://sknys.blog.so-net.ne.jp/tag/Music" class="_tag">music</a></li> <li><a style="font-size:25px;" href="http://sknys.blog.so-net.ne.jp/tag/cats" class="_tag">cats</a></li> <li><a style="font-size:23px" href="http://sknys.blog.so-net.ne.jp/tag/palindrome" class="_tag">palindrome</a></li> <li><a style="font-size:22px" href="http://sknys.blog.so-net.ne.jp/tag/comic" class="_tag">comic</a></li> <li><a style="font-size:22px" href="http://sknys.blog.so-net.ne.jp/tag/Books" class="_tag">books</a></li> <li><a style="font-size:21px" href="http://sknys.blog.so-net.ne.jp/tag/art" class="_tag">art</a></li> <li><a style="font-size:19px" href="http://sknys.blog.so-net.ne.jp/tag/cats%20cradle" class="_tag">cat's cradle</a></li> <li><a style="font-size:18px" href="http://sknys.blog.so-net.ne.jp/tag/necord" class="_tag">necord</a></li></ul></div>
<style>
#profData h2, #favoriteData h2{border-radius:5px}
#profData, #usersBlog, #favoriteData, #freeArea, #articleData{border-radius:10px}
a{outline:none; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
a:hover img{opacity:0.8; filter:alpha(opacity=80)}
#rootElement a{color:#339900; text-decoration:none}
#rootElement a:hover{color:#99cc00; text-decoration:none}
#profContainer{color:#339900}
#headerSearch{display:none}
#articleData{font-size:86%}
#profData a{font-weight:normal}
#articleData .dateR{font-size:100%}
.more{font-size:100%}
.freeSpace li{display:inline; font:normal 100% Arial ,sans-serif}
#articleData ul li a {font-size:120%; font-weight:normal}
.sknys-asin-area{font-size:100%}
.sknys-asin-image{border:solid 1px #cccccc; padding:4px; margin:0px 10px 0px 0px; float:left; border-radius:10px}
#rootElement a{color:#339900; text-decoration:none}
.sknys-asin-title{font-weight:bold; font-size:120%; padding:0px 0px 0px 0px; margin-top:-5px}
.sknys-asin-info ul{padding:0px; margin:0px 0px 10px}
li.sknys-asin-label{font-size:95%; padding:2px 0px}
#footer .copyright{float:right}
.userImg {box-shadow:0px 0px 20px #77b140; float:left; border:solid 1px #77b140; padding:5px; border-radius:5px}
.userLink {float:left; margin-left:12px; width:150px}
#profData{margin-bottom:-16px}
#favoriteData{margin-bottom:0px}
.sonet-asin-break{clear:both}
</style>
<h2>f a v o r i t e - a l b u m s</h2>
<div class="sknys-asin-area"><a href="http://sknys.blog.so-net.ne.jp/2014-12-16#sufjan" target="_blank"><img src="/_images/blog/_fc3/sknys/Carrie-Lowell-Sufjan-Stevens.jpg" class="sknys-asin-image" alt="Carrie & Lowell" title="Carrie & Lowell" width="155" height="155"></a><div class="sknys-asin-info"><p class="sknys-asin-title"><a href="http://sknys.blog.so-net.ne.jp/2014-12-16#sufjan" target="_blank">Carrie & Lowell</a></p>
<ul><li class="sknys-asin-label">Artist: Sufjan Stevens</li><li class="sknys-asin-label">Label: Asthmatic Kitty</li><li class="sknys-asin-label">Date: 2015/03/31</li><li class="sknys-asin-label">Media: Audio CD</li><li class="sknys-asin-label">Songs: Death With Dignity / Should Have Known Better / All Of Me Wants All Of You / Drawn To The Blood / Eugene / Fourth Of July / The Only Thing / Carrie & Lowell / John My Beloved / No Shade In The Shadow Of The Cross / Blue Bucket Of Gold</li></ul></div></div></div><div class="sonet-asin-break"></div>
<div id="articleData" style="margin-bottom:-12px"><a href="http://sknys.blog.so-net.ne.jp/tag/articles" class="more">もっと見る</a><h2>t a g - c l o u d</h2><ul class="freeSpace"><li><a style="font-size:25px" href="http://sknys.blog.so-net.ne.jp/tag/Music" class="_tag">music</a></li> <li><a style="font-size:25px;" href="http://sknys.blog.so-net.ne.jp/tag/cats" class="_tag">cats</a></li> <li><a style="font-size:23px" href="http://sknys.blog.so-net.ne.jp/tag/palindrome" class="_tag">palindrome</a></li> <li><a style="font-size:22px" href="http://sknys.blog.so-net.ne.jp/tag/comic" class="_tag">comic</a></li> <li><a style="font-size:22px" href="http://sknys.blog.so-net.ne.jp/tag/Books" class="_tag">books</a></li> <li><a style="font-size:21px" href="http://sknys.blog.so-net.ne.jp/tag/art" class="_tag">art</a></li> <li><a style="font-size:19px" href="http://sknys.blog.so-net.ne.jp/tag/cats%20cradle" class="_tag">cat's cradle</a></li> <li><a style="font-size:18px" href="http://sknys.blog.so-net.ne.jp/tag/necord" class="_tag">necord</a></li></ul></div>
<style>
#profData h2, #favoriteData h2{border-radius:5px}
#profData, #usersBlog, #favoriteData, #freeArea, #articleData{border-radius:10px}
a{outline:none; -webkit-transition:0.5s; -moz-transition:0.5s; -o-transition:0.5s; -ms-transition:0.5s; transition:0.5s}
a:hover img{opacity:0.8; filter:alpha(opacity=80)}
#rootElement a{color:#339900; text-decoration:none}
#rootElement a:hover{color:#99cc00; text-decoration:none}
#profContainer{color:#339900}
#headerSearch{display:none}
#articleData{font-size:86%}
#profData a{font-weight:normal}
#articleData .dateR{font-size:100%}
.more{font-size:100%}
.freeSpace li{display:inline; font:normal 100% Arial ,sans-serif}
#articleData ul li a {font-size:120%; font-weight:normal}
.sknys-asin-area{font-size:100%}
.sknys-asin-image{border:solid 1px #cccccc; padding:4px; margin:0px 10px 0px 0px; float:left; border-radius:10px}
#rootElement a{color:#339900; text-decoration:none}
.sknys-asin-title{font-weight:bold; font-size:120%; padding:0px 0px 0px 0px; margin-top:-5px}
.sknys-asin-info ul{padding:0px; margin:0px 0px 10px}
li.sknys-asin-label{font-size:95%; padding:2px 0px}
#footer .copyright{float:right}
.userImg {box-shadow:0px 0px 20px #77b140; float:left; border:solid 1px #77b140; padding:5px; border-radius:5px}
.userLink {float:left; margin-left:12px; width:150px}
#profData{margin-bottom:-16px}
#favoriteData{margin-bottom:0px}
.sonet-asin-break{clear:both}
</style>
*
<div id="usersBlog" class="itemWrap clearfix">
<div class="userImg">
<img src="http://blog.so-net.ne.jp/_profile/_fc3/sknys
/_m_sknys.png?2015-05-1301:31:37">
</div>
<div class="userLink">
<ul>
<li class="titleList">▼ブログ</li>
<li class="linkToBlog"><a href="http://sknys.blog.so-net.ne.jp/">s k n y s - s y n k s</a></li>
</ul>
</div></div>
<style>
.userImg {box-shadow:0px 0px 20px #77b140; float:left; border:solid 1px #77b140; padding:5px; border-radius:5px}
.userLink {float:left; margin-left:12px; width:150px}
</style>
<div class="userImg">
<img src="http://blog.so-net.ne.jp/_profile/_fc3/sknys
/_m_sknys.png?2015-05-1301:31:37">
</div>
<div class="userLink">
<ul>
<li class="titleList">▼ブログ</li>
<li class="linkToBlog"><a href="http://sknys.blog.so-net.ne.jp/">s k n y s - s y n k s</a></li>
</ul>
</div></div>
<style>
.userImg {box-shadow:0px 0px 20px #77b140; float:left; border:solid 1px #77b140; padding:5px; border-radius:5px}
.userLink {float:left; margin-left:12px; width:150px}
</style>
*
original skin 1.2 / 2.2 / 3.2 / 4.1 / skin switcher / renewal repair / header helper 1.1 / 2.1 / free customize 1.2 / new profile customize 1.2 / 2.0 / sknynx / 572