WordPressのSimplicityテーマ用の緑色のスキンを作りました
「くま同盟コンピュータLab」及び
http://note-plus.ever.jp/
ではSimplicityというテーマを使用しています。
Simplicityではスキン機能により簡単に外観を変更できますが、緑色を基調にしたスキンが無かったため自作してみました。
使い方
- /wp/wp-content/themes/simplicity/skins/
のskin-templateフォルダをコピーして任意のフォルダ名（greenなど）をつけます。 - そのフォルダのstyle.cssに以下のスタイルシートをコピペして上書き保存します。
- WordPress管理メニュー＞「カスタマイズ」のスキンから「Green」を選択します。
コピペする内容
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
/* Name: Green Priority: 100 */ #navi ul, #navi ul.sub-menu, #navi ul.children, .post-meta, blockquote, .article th, #s, #comment-area input[type="text"], #comment-area textarea, input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="search"], input[type="tel"], textarea, #footer, .category-description{ background-color:#CAE3BF; border-color:#009900; } .navigation a:hover{ background-color:#009900; } #main, #navi ul, #navi ul.sub-menu, #navi ul.children, #main #list .entry, .article th, .article td, .article h3, #comment-area h3, #related-entries h3, .article h4, a.page-numbers, .pager .current, .page-link span, .comment-page-link span, .comment-page-link a, .navigation > div, .navigation > div + div, #s, #comment-area input[type="text"], #comment-area textarea, input[type="text"], input[type="url"], input[type="password"], input[type="email"], input[type="search"], textarea{ border-color:#009900; } #navi ul li a:hover, #page-top a:hover, #mobile-menu a:hover, .pager a:hover, .pager .current, .page-link span, .comment-page-link span, .comment-page-link a, .page-link a span:hover, .comment-page-link a:hover{ background-color:#009900; } blockquote{ border-color:#CAE3BF; } blockquote:before, blockquote:after, .navigation a i{ color:#009900; } ul.snsp li a{ color:#339900; } .article h2{ border-left:#339900 solid 3px; } #page-top a, #mobile-menu a{ background-color:#339900; } #page-top a:hover, #mobile-menu a:hover{ background-color:#339900; opacity:0.7; } #navi .menu{ border-radius:5px; } #navi .menu > li > a{ padding:0.5em 0.7em; } #footer, #footer h4, #footer a { color: #111; } |
出来上がりはこんな感じです。
よろしかったらご利用下さい。
