このブログは「WordPress」というCMSを使い、「Simplicity2」というテーマと「Flower Pop」というSimplicity2用のスキンを使用しています。
インストールしたそのままでも十分可愛いのですが、Simplicityの元々の設定で採用されている色（グレー）が残っているのでピンクで統一したかったり、なんとなく自分にとってより見やすくなるように～とか考えて、いくつかカスタマイズしているので自分用にメモしておきます。
テーマ・スキンを変更しない限りは、何か追加で修正したらここを追加・編集していきます。
あくまでこのブログのメインはACの話題ですので…
サイトタイトルとキャッチフレーズ
背景が華やかでグレーの文字が読みにくかったので、文字色をテーマのカスタマイズで変えた他、CSSでtext-shadowを設定しています。
[css]
#site-title{
text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff;
}
#site-description{
text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff;
[/css]
ページ全体の背景画像
background-sizeが元々はcoverかcontainだったと思うのですが、自分のブラウザ（chrome）で横幅を縮めてもサイズが変わらず、どうも画像の縦の幅を画面サイズにあわせているようだったので変更しました。
また、attachmentをfixed、repeatをno-repeatに設定することで、スクロールしても常に華やかな花柄が見えるようにしました。
[css]
body{
background-image: url(./bg.png);
background-position: left top;
background-size: 100% auto;
background-attachment: fixed;
background-repeat: no-repeat;
}
[/css]
グローバルナビ
ラッピング用のオーガンジーリボンのイメージで、ドットと縁取りを付けました。
[css]
#navi{
background-color: rgba( 255, 240, 245, 0.7 );
background-image: radial-gradient(#fff8fa 15%, transparent 0), radial-gradient(#fff8fa 15%, transparent 0);
border-top: 2px solid #F4B4D0;
border-bottom: 2px solid #F4B4D0;
background-position: 0 0, 7px 7px;
background-size: 15px 15px;
}
[/css]
カテゴリ説明
Simplicity2はカテゴリの「説明(description)」が有効です。
CSSをいじって、カテゴリ表示した時にきちんと手を加えているページっぽく見えるようにしてみました。
ベースは第0版「角丸背景色あり＋内側に白い実線＋水玉マステ風タイトル」です。
[css]
.category-description{
background-color: #F6D4D8;
border-radius: 5px;
margin: 20px 5px;
padding: 30px 20px 20px 20px;
position: relative;
top: -48px;
z-index: 0;
}
.category-description:before{
border: 1px solid #fff;
border-radius: 5px;
content: ”;
display: block;
margin: 4px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -1;
}
h1#archive-title{
background-color: rgba(249,223,213,0.9);
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 8px 8px;
background-size: 15px 15px;
border-left: 2px dotted rgba(0,0,0,0.1);
border-right: 2px dotted rgba(0,0,0,0.1);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
content: ”;
display: inline-block;
margin: 0 0 10px 0;
padding: 5px 20px;
position: relative;
text-align: center;
top: 5px;
left: 20px;
transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
z-index: 1;
}
[/css]
引用
第0版「引用文のスタイル、もっと可愛くてもいいんじゃない？【CSSデザインサンプル】」そのままです。
h1見出し
第0版「花（背景色あり）」をベースに少し変えています。
元々存在していた .article h1:after は削除しています。
[css]
.article h1{
font-size: 24px;
position: relative;
background-color: #f5d5da;
border-radius: 5px;
color: #ef858c;
padding: 10px 10px 10px 60px;
position: relative;
text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff;
}
.article h1:before{
content: ‘＊*’;
color: #fff;
display: inline-block;
font-size: 30px;
font-weight: bold;
margin-right: 10px;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(20deg);
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff;
}
[/css]
h3見出し
左右のボーダーまで乗せたくなかったので
margin: 20px 0;
に変更。
一覧表示のエントリーカードのマウスオーバー効果
マウスオーバーで背景がピンクになり、画像を含めてブロック全体が半透明になります。
関連リンクとブログカードにも適用しています。
[css]
.hover-card .entry:hover,
.hover-card .related-entry:hover,
.hover-card .related-entry-thumbnail:hover,
.hover-card .blog-card:hover{
background-color: #fff0f5;
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
[/css]
コメント