こんにちは、えむしです。
昨日の続きでカテゴリーを選んだ時に出てくるアーカイブのページもカスタマイズしてみます。
昨日のエントリー。
blog.mshimfujin.net
こんな仕上がりになります。 まずはコピペ場所を開きます。
場所は「デザイン」→「カスタマイズ」→「デザインCSS」です。
ここをクリックして 以下のコードを開いたcssの欄へコピペするだけです。
適当な場所、例えば一番下の方なんかにペーストして下さい。 以上です。 なお、フォントの指定はしていませんので、テーマによっては文字の見え方が変わってきます。 カテゴリー関連の設定をいじりたく無い方は、カテゴリーの設定をまるごと削除して使用して下さいね。 色の見本はこちらを参考にされてはいかがでしょう。 www.colordic.org
webdesignrecipes.com 本当は昨日の日付のデザイン↓みたいな感じにしたかったんですが ではでは、また次の記事で… CSSに詳しいブロガーさんがよく紹介されているオススメ解説本。完成図
手順1
以下に紹介するコードを一番下なんかにコピペして行って下さい。コード
/* archiveカスタマイズ */
.archive-entry-header .date a {
color: #5d5d5d; /* 文字色 */
font-size: .85em; /* 文字の大きさ */
font-weight: bold; /* 文字の太さ 標準の太さにするには削除して下さい */
padding: .4em; /* 余白 */
border-top: 4px solid #5d5d5d; /* 上枠の太さ・種類・色 */
border-bottom: 1px solid #5d5d5d; /* 下枠の太さ・種類・色 */
border-left: 1px solid #5d5d5d; /* 左枠の太さ・種類・色 */
border-right: 1px solid #5d5d5d; /* 右枠の太さ・種類・色 */
border-radius: 2px; /* 角の丸み シャープな角にするには削除して下さい */
}
.archive-entry-header .date a:hover {
background-color: #5d5d5d; /* ホバーした時の背景色 */
color: #fff; /* ホバーした時の文字色 */
}
.archive-entry-header .entry-title a {
text-decoration: none;
}
.archive-entry .categories { /* カテゴリーの設定 */
font-size: .6em; /* 文字の色 */
padding-bottom: .4em; /* 余白 */
border-bottom: 4px solid #5d5d5d; /* カテゴリ下に描いている線の太さ・種類・色 */
}
あとがたりっぽいもの
そうは出来ない仕様になっていまして、これが限界でした。エントリーと同じ仕様で日付のデータ吐き出してくれれば変えられるんですがねえ、残念。