Xeory Extentionでオリジナルの色設定をつくる方法
既存の色設定を消さずにカスタマイズできる
WordPressテーマ「Xeory Extension」には、
4パターンの色設定があらかじめ組み込まれています。
style.cssを変更すれば、
あらかじめ組み込まれた色設定を
変更することができます。
しかし、既存の色設定に戻せなくなってしまうので、
下記のように新たな色設定を加えることをおすすめします。
この記事では、上記のようにカスタムカラー1とカスタムカラー2という
2つの色設定を加える方法をお伝えします。
目次
目次
init.phpの編集方法
xeory_extentionのinit.phpを編集することで
カスタムカラーを選択できるようにします。
FTPで下記のフォルダにアクセスし、ダウンロードしてください。
/wp-content/themes/xeory_extention/admin
ダウンロードしたinit.phpをテキストエディタで開き、編集します。
編集内容については後ほど説明します。
編集が終わったら同じ名前で上書き保存し、
再度FTPで同じ場所にアップロードします。
この方法だと少し工程が多いので、わたしはロリポップFTPを使って
サーバー上のinit.phpファイルに直接アクセスして変更しました。
ロリポップを利用している人は、下記を参考にしてください。
ロリポップを使ったinit.phpの編集方法
ロリポップのユーザー専用ページで「サーバーの管理・設定」の中の
ロリポップ!FTPを選択します。
wordpressをダウンロードしたフォルダ/wp-content/themes/xeory_extention/admin
までアクセスすると、init.phpが見えます。
init.phpファイルに書き加える内容1
書き加える内容は、2つあります。
まずは1つ目。下記の2行です。
1 2 |
5 => 'color05', 6 => 'color06', |
書き加える位置は、下記の箇所です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php $colors = array( 0 => 'default', 1 => 'color01', 2 => 'color02', 3 => 'color03', 4 => 'color04', 5 => 'color05', 6 => 'color06', ); $color_scheme = trim(get_option('color_scheme')); if(isset($color_scheme) && $color_scheme !== ''){ $color_scheme = trim(get_option('color_scheme')); }else{ $color_scheme = 'default'; } $active_template_name = basename(get_stylesheet_directory()); ?> |
init.phpファイルに書き加える内容2
次が、2つ目の書き加えるコードです。
1 2 3 4 5 6 7 8 9 10 |
<!-- ここからがカスタムカラー1と2の追加のためのコード --> <li id="color-6" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme5" value="color05" <?php echo ($color_scheme == $colors[5]) ? 'checked' : '';?> /> <label for="color_scheme6">カスタムカラー1</label> </li> <li id="color-6" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme5" value="color06" <?php echo ($color_scheme == $colors[6]) ? 'checked' : '';?> /> <label for="color_scheme7">カスタムカラー2</label> </li> <!-- ここまでがカスタムカラー1と2の追加のためのコード --> |
2つ目の書き加えるコードは、下記のカラー設定の箇所です。
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 |
<h4>カラー設定</h4> <p class="setting_description"><small>ベースとなる配色を選択して下さい。</small></p> <ul class="color-radio cmb_id_bzb_color_scheme"> <li id="color-1" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme1" value="default" <?php checked($color_scheme, 'default');?> /> <label for="color_scheme1">デフォルト</label> </li> <li id="color-2" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme2" value="color01" <?php checked($color_scheme, $colors[1]);?> /> <label for="color_scheme2">水色</label> </li> <li id="color-3" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme3" value="color02" <?php checked($color_scheme, $colors[2]);?> /> <label for="color_scheme3">青</label> </li> <li id="color-4" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme4" value="color03" <?php checked($color_scheme, $colors[3]);?> /> <label for="color_scheme4">紺</label> </li> <li id="color-5" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme5" value="color04" <?php echo ($color_scheme == $colors[4]);?> /> <label for="color_scheme5">赤</label> </li> <!-- ここからがカスタムカラー1と2の追加のためのコード --> <li id="color-6" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme5" value="color05" <?php echo ($color_scheme == $colors[5]) ? 'checked' : '';?> /> <label for="color_scheme6">カスタムカラー1</label> </li> <li id="color-6" style="display:inline-block;padding-right:18px;"> <input type="radio" name="color_scheme" id="color_scheme5" value="color06" <?php echo ($color_scheme == $colors[6]) ? 'checked' : '';?> /> <label for="color_scheme7">カスタムカラー2</label> </li> <!-- ここまでがカスタムカラー1と2の追加のためのコード --> </ul> |
これで、下記の画像のように
「初期設定」にてカスタムカラー1やカスタムカラー2を
選択できるようになりました。
ただ、このままだと選択できるだけで
色を変えることはできません。
色を変えるにはstyle.cssに
カスタムカラー1とカスタムカラー2についての追記が必要です。
style.cssに書き加えるカスタムカラー1の追加コード
style.cssの一番下に、下記のコードを書き加えてください。
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 |
/* ---------------------------------------- * カラースキーム 05 カスタムカラー1 ---------------------------------------- */ /* ---------------------------------------- * frontpage ---------------------------------------- */ body.home.color05 #main_visual { background: #394B57; background-image: -webkit-linear-gradient(bottom right, #394b57, #28343c); background-image: linear-gradient(to top left, #394b57, #28343c); color: #fff; } body.home.color05 .front-loop { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background: #fff; } body.home.color05 .front-loop h2 { border-bottom: 1px solid #e5e5e5; } body.home.color05 .front-loop .popular_post_box h3 { color: #484A4E; } body.home.color05 .front-loop .popular_post_box h3 a { color: #484A4E; } body.home.color05 .front-loop .popular_post_box h3 a:hover { color: #ca6666; } body.home.color05 .front-loop .popular_post_box ul a { color: #484A4E; } body.home.color05 .front-loop .popular_post_box ul a:hover { color: #ca6666; } body.home.color05 .front-loop .popular_post_box .p_category { background: #fff; border: 1px solid #ca6666; color: #ca6666; } body.home.color05 .front-loop .popular_post_box .p_rank { background: #900; color: #fff; } body.home.color05 .front-loop .popular_post_box .p_date { background: #343434; color: #fff; } body.home.color05 .front-main-cont .front-cont-header { background: #343434; color: #fff; } body.home.color05 .front-main-cont .tri-border span { border-left: 28px solid transparent; border-left: 56px solid transparent; border-right: 56px solid transparent; border-top: 18px solid #343434; } body.home.color05 #front-contents .c_box { border-bottom: 1px solid #e5e5e5; } body.home.color05 #front-contents .c_box.c_box_left { background-color: #fff; } body.home.color05 #front-contents .c_box.c_box_right { background-color: #fafafa; } body.home.color05 #front-contents .c_number { background: #27343c; color: #fff; } body.home.color05 #front-contents h3 { color: #27343c; } body.home.color05 #front-contents .c_english { color: #27343c; } body.home.color05 #front-contents .c_text .c_btn a { background: #ca6666; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } body.home.color05 #front-service { background: #fff; border-bottom: 1px solid #e5e5e5; } body.home.color05 #front-service .front-service-inner h3 { color: #27343c; } body.home.color05 #front-service .front-service-inner .c_english { color: #27343c; } body.home.color05 #front-service .front-service-inner .c_text .c_btn a { background: #27343c; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } body.home.color05 #front-company { background: #fff; } body.home.color05 #front-company .c_box { border-bottom: 1px solid #e5e5e5; } body.home.color05 #front-company dl { border-bottom: 1px solid #e5e5e5; } body.home.color05 #front-company dl#front-company-1 dt { border-top: 2px solid #27343c; } body.home.color05 #front-company dl#front-company-1 dd { border-top: 1px solid #e5e5e5; } body.home.color05 #front-contact { background: #ca6666; } body.home.color05 #front-contact .c_box_inner input[type=submit], body.home.color05 #front-contact .c_box_inner button { background: #131D2A; } /* ---------------------------------------- * all ---------------------------------------- */ body.color05 { color: #484A4E; } body.color05 a { color: #ca6666; } body.color05 form input[type="submit"], body.color05 form button { background: #343434; color: #fff; } body.color05 #header { background: #27343c; } body.color05 #header a { color: #fff; } body.color05 .breadcrumb-area { background: #fff; border-bottom: 1px solid #e5e5e5; } body.color05 #gnav { background: #27343c; } body.color05 #gnav ul li:hover a { background: #31414b; } body.color05 #gnav ul li.current-menu-item a { background: #31414b; } body.color05 #gnav ul li a { color: #fff; background: #27343c; } body.color05 #gnav ul li a:hover { color: #fff; background: #31414b; } body.color05 #gnav ul li .sub-menu { background: #fff; border: 1px #e5e5e5 solid; } body.color05 #gnav ul li .sub-menu li { border-bottom: 1px #e5e5e5 solid; } body.color05 #gnav ul li .sub-menu li a { color: #343434; background: #fff; } body.color05 #gnav ul li .sub-menu li a:hover { background: #fafafa; color: #343434; } body.color05 #header-fnav-area #header-fnav-btn a { background: #31414b; } body.color05 #header-fnav-area #header-fnav { background: #fff; border: 1px #e5e5e5 solid; } body.color05 #header-fnav-area #header-fnav li { border-bottom: 1px #e5e5e5 solid; } body.color05 #header-fnav-area #header-fnav li a { color: #343434; background: #fff; } body.color05 #header-fnav-area #header-fnav li a:hover { background: #fafafa; color: #343434; } body.color05 .cat-content, body.color05 article.post, body.color05 article.page { background: #fff; border: 1px #e5e5e5 solid; } body.color05 .post-header { padding: 56px 64px 46px; border-bottom: 1px solid #e5e5e5; } body.color05 .post-header .cat-name span { border: 1px solid #27343c; color: #27343c; } body.color05 .post-title a { color: #484A4E; } body.color05 .post-title a:hover { color: #ca6666; } body.color05 .post-title a { color: #343434; } body.color05 .post-title a:hover { color: #ca6666; } body.color05 .post-meta-area { border-bottom: 1px solid #e5e5e5; } body.color05 .post-meta-area .post-meta-comment li { border-left: 1px solid #e5e5e5; } body.color05 .post-content hr { border-bottom: 1px solid #eee; } body.color05 .post-content h2 { border-left: 10px solid #131D2A; background: #343434; color: #fff; } body.color05 .post-content h3 { border-bottom: 2px solid #343434; } body.color05 .post-content h4 { border-left: 5px solid #131D2A; clear: both; } body.color05 .post-content blockquote { border: 1px #e5e5e5 solid; background: #fafafa; } body.color05 .post-content blockquote:before { color: #e7e7e7; } body.color05 .post-content blockquote cite { color: #808080; } body.color05 .post-content table { border: 1px #ddd solid; } body.color05 .post-content table th, body.color05 .post-content table td { border: #ddd solid 1px; } body.color05 .post-content table th { color: #fff; } body.color05 .post-content table thead th { background: #5e6265; } body.color05 .post-content table tbody th { background: #919598; } body.color05 .post-content table.table-line table, body.color05 .post-content table.table-line th, body.color05 .post-content table.table-line td { border-color: #fff; } body.color05 .post-content table.table-line th { color: #484A4E; } body.color05 .post-content table.table-line thead th { background: #5e6265; color: #fff; } body.color05 .post-content table.table-line tr { background: #eee; } body.color05 .post-content table.table-line tr:nth-child(2n+1) { background: #ddd; } body.color05 .post-cta { background: #131D2A; color: #fff; } body.color05 .post-cta .cta-post-title { border-bottom: 1px solid #eee; } body.color05 .post-cta .post-cta-btn a { background: #F86222; color: #fff; } body.color05 .post-cta .post-cta-btn a:hover { background: #fa8553; } body.color05 .post-cta .btn { background: #343434; } body.color05 .post-cta .btn:hover { background: #ca6666; } body.color05 .post-share .post-share-list1 a, body.color05 .post-share .post-share-list2 a, body.color05 .post-share .post-share-list3 a, body.color05 .post-share .post-share-list4 a { border: 1px #eee solid; } body.color05 .post-share .post-share-list1 a:hover, body.color05 .post-share .post-share-list2 a:hover, body.color05 .post-share .post-share-list3 a:hover, body.color05 .post-share .post-share-list4 a:hover { background: #f7f7f7; } body.color05 .post-author { border: 1px solid #e5e5e5; color: #484A4E; background: #fff; } body.color05 .post-author a { color: #343434; } body.color05 .post-author .post-author-meta { color: #484A4E; } body.color05 #comments { background: #fff; border: 1px solid #e5e5e5; padding: 40px 45px; } body.color05 #comments h4 { border-bottom: 5px solid #343434; } body.color05 #comments h4 i { color: #343434; } body.color05 .comment-list > .comment { border-bottom: 1px #eee solid; } body.color05 .comment-list .children .comment-body { background: #f7f7f7; } body.color05 .cat-content { background: #fff; } body.color05 .post-loop-wrap .more-link { border: 1px #343434 solid; color: #343434; } body.color05 .post-loop-wrap .more-link:hover { background: #343434; color: #fff; } body.color05 .post-loop-wrap .post-footer { border-top: 1px #eee solid; } body.color05 .post-loop-wrap .post-footer a.morelink { background: #343434; color: #fff; } body.color05 .pagination span, body.color05 .pagination a { color: #484A4E; background: #fff; } body.color05 .pagination a:hover { color: #fff; background: #3279BB; } body.color05 .pagination .current { background: #3279BB; color: #fff; } body.color05 .side-widget .side-title { background: #ebebeb; border: 1px solid #e4e4e4; } body.color05 .side-widget a { color: #27343c; } body.color05 .side-widget a:hover { color: #27343c; } body.color05 .side-widget ul li { border-bottom: 1px solid #e5e5e5; } body.color05 .side-widget .post-date { color: #999999; } body.color05 .widget_search { border: 1px solid #e5e5e5; } body.color05 .widget_search button { color: #5e6265; } body.color05 .recentcomments { color: #808080; } body.color05 .recentcomments a { color: #484A4E; } body.color05 #side .share-list-wrap { background: #fff; } body.color05 #footer { color: #fff; border-top: 8px solid #343434; } body.color05 #footer a { color: #fff; } body.color05 #footer a:hover { color: #ccc; } body.color05 #footer-brand-area { border-bottom: 1px solid #343434; } body.color05 .footer-01 { background: #343434; } body.color05 .footer-02 { background: #333333; } body.color05 .single-lp .lp-wrap { border: 1px solid #eee; background: #fff; } body.color05 .single-lp .lp-thumbnail { border: 1px #ccc solid; border: 1px #ccc solid; } body.color05 .single-lp #lp-header { background: #27343c; } body.color05 .single-lp #lp-header h1 { color: #343434; border-bottom: 1px solid #eee; } body.color05 .single-lp .lp-form { background: #494c4e; color: #fff; } body.color05 .single-lp .lp-form input[type=submit], body.color05 .single-lp .lp-form button { background: #F86222; color: #fff; border-bottom: 5px solid #e04807; } body.color05 .single-lp .lp-form input[type=submit]:hover, body.color05 .single-lp .lp-form button:hover { background: #f9743b; } body.color05 .pagetop { color: #fff; } body.color05 .pagetop span { background: #2b2b2b; } body.color05.single-lp #lp-header{ background: #ca6666; } |
style.cssに書き加えるカスタムカラー2の追加コード
style.cssの一番下に、下記のコードを書き加えてください。
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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 |
/* ---------------------------------------- * カラースキーム 05 カスタムカラー1 ---------------------------------------- */ /* ---------------------------------------- * frontpage ---------------------------------------- */ body.home.color06 #main_visual { background: #394B57; background-image: -webkit-linear-gradient(bottom right, #394b57, #28343c); background-image: linear-gradient(to top left, #394b57, #28343c); color: #fff; } body.home.color06 .front-loop { border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background: #fff; } body.home.color06 .front-loop h2 { border-bottom: 1px solid #e5e5e5; } body.home.color06 .front-loop .popular_post_box h3 { color: #484A4E; } body.home.color06 .front-loop .popular_post_box h3 a { color: #484A4E; } body.home.color06 .front-loop .popular_post_box h3 a:hover { color: #ca6666; } body.home.color06 .front-loop .popular_post_box ul a { color: #484A4E; } body.home.color06 .front-loop .popular_post_box ul a:hover { color: #ca6666; } body.home.color06 .front-loop .popular_post_box .p_category { background: #fff; border: 1px solid #ca6666; color: #ca6666; } body.home.color06 .front-loop .popular_post_box .p_rank { background: #900; color: #fff; } body.home.color06 .front-loop .popular_post_box .p_date { background: #343434; color: #fff; } body.home.color06 .front-main-cont .front-cont-header { background: #343434; color: #fff; } body.home.color06 .front-main-cont .tri-border span { border-left: 28px solid transparent; border-left: 56px solid transparent; border-right: 56px solid transparent; border-top: 18px solid #343434; } body.home.color06 #front-contents .c_box { border-bottom: 1px solid #e5e5e5; } body.home.color06 #front-contents .c_box.c_box_left { background-color: #fff; } body.home.color06 #front-contents .c_box.c_box_right { background-color: #fafafa; } body.home.color06 #front-contents .c_number { background: #27343c; color: #fff; } body.home.color06 #front-contents h3 { color: #27343c; } body.home.color06 #front-contents .c_english { color: #27343c; } body.home.color06 #front-contents .c_text .c_btn a { background: #ca6666; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } body.home.color06 #front-service { background: #fff; border-bottom: 1px solid #e5e5e5; } body.home.color06 #front-service .front-service-inner h3 { color: #27343c; } body.home.color06 #front-service .front-service-inner .c_english { color: #27343c; } body.home.color06 #front-service .front-service-inner .c_text .c_btn a { background: #27343c; color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); } body.home.color06 #front-company { background: #fff; } body.home.color06 #front-company .c_box { border-bottom: 1px solid #e5e5e5; } body.home.color06 #front-company dl { border-bottom: 1px solid #e5e5e5; } body.home.color06 #front-company dl#front-company-1 dt { border-top: 2px solid #27343c; } body.home.color06 #front-company dl#front-company-1 dd { border-top: 1px solid #e5e5e5; } body.home.color06 #front-contact { background: #ca6666; } body.home.color06 #front-contact .c_box_inner input[type=submit], body.home.color06 #front-contact .c_box_inner button { background: #131D2A; } /* ---------------------------------------- * all ---------------------------------------- */ body.color06 { color: #484A4E; } body.color06 a { color: #ca6666; } body.color06 form input[type="submit"], body.color06 form button { background: #343434; color: #fff; } body.color06 #header { background: #27343c; } body.color06 #header a { color: #fff; } body.color06 .breadcrumb-area { background: #fff; border-bottom: 1px solid #e5e5e5; } body.color06 #gnav { background: #27343c; } body.color06 #gnav ul li:hover a { background: #31414b; } body.color06 #gnav ul li.current-menu-item a { background: #31414b; } body.color06 #gnav ul li a { color: #fff; background: #27343c; } body.color06 #gnav ul li a:hover { color: #fff; background: #31414b; } body.color06 #gnav ul li .sub-menu { background: #fff; border: 1px #e5e5e5 solid; } body.color06 #gnav ul li .sub-menu li { border-bottom: 1px #e5e5e5 solid; } body.color06 #gnav ul li .sub-menu li a { color: #343434; background: #fff; } body.color06 #gnav ul li .sub-menu li a:hover { background: #fafafa; color: #343434; } body.color06 #header-fnav-area #header-fnav-btn a { background: #31414b; } body.color06 #header-fnav-area #header-fnav { background: #fff; border: 1px #e5e5e5 solid; } body.color06 #header-fnav-area #header-fnav li { border-bottom: 1px #e5e5e5 solid; } body.color06 #header-fnav-area #header-fnav li a { color: #343434; background: #fff; } body.color06 #header-fnav-area #header-fnav li a:hover { background: #fafafa; color: #343434; } body.color06 .cat-content, body.color06 article.post, body.color06 article.page { background: #fff; border: 1px #e5e5e5 solid; } body.color06 .post-header { padding: 56px 64px 46px; border-bottom: 1px solid #e5e5e5; } body.color06 .post-header .cat-name span { border: 1px solid #27343c; color: #27343c; } body.color06 .post-title a { color: #484A4E; } body.color06 .post-title a:hover { color: #ca6666; } body.color06 .post-title a { color: #343434; } body.color06 .post-title a:hover { color: #ca6666; } body.color06 .post-meta-area { border-bottom: 1px solid #e5e5e5; } body.color06 .post-meta-area .post-meta-comment li { border-left: 1px solid #e5e5e5; } body.color06 .post-content hr { border-bottom: 1px solid #eee; } body.color06 .post-content h2 { border-left: 10px solid #131D2A; background: #343434; color: #fff; } body.color06 .post-content h3 { border-bottom: 2px solid #343434; } body.color06 .post-content h4 { border-left: 5px solid #131D2A; clear: both; } body.color06 .post-content blockquote { border: 1px #e5e5e5 solid; background: #fafafa; } body.color06 .post-content blockquote:before { color: #e7e7e7; } body.color06 .post-content blockquote cite { color: #808080; } body.color06 .post-content table { border: 1px #ddd solid; } body.color06 .post-content table th, body.color06 .post-content table td { border: #ddd solid 1px; } body.color06 .post-content table th { color: #fff; } body.color06 .post-content table thead th { background: #5e6265; } body.color06 .post-content table tbody th { background: #919598; } body.color06 .post-content table.table-line table, body.color06 .post-content table.table-line th, body.color06 .post-content table.table-line td { border-color: #fff; } body.color06 .post-content table.table-line th { color: #484A4E; } body.color06 .post-content table.table-line thead th { background: #5e6265; color: #fff; } body.color06 .post-content table.table-line tr { background: #eee; } body.color06 .post-content table.table-line tr:nth-child(2n+1) { background: #ddd; } body.color06 .post-cta { background: #131D2A; color: #fff; } body.color06 .post-cta .cta-post-title { border-bottom: 1px solid #eee; } body.color06 .post-cta .post-cta-btn a { background: #F86222; color: #fff; } body.color06 .post-cta .post-cta-btn a:hover { background: #fa8553; } body.color06 .post-cta .btn { background: #343434; } body.color06 .post-cta .btn:hover { background: #ca6666; } body.color06 .post-share .post-share-list1 a, body.color06 .post-share .post-share-list2 a, body.color06 .post-share .post-share-list3 a, body.color06 .post-share .post-share-list4 a { border: 1px #eee solid; } body.color06 .post-share .post-share-list1 a:hover, body.color06 .post-share .post-share-list2 a:hover, body.color06 .post-share .post-share-list3 a:hover, body.color06 .post-share .post-share-list4 a:hover { background: #f7f7f7; } body.color06 .post-author { border: 1px solid #e5e5e5; color: #484A4E; background: #fff; } body.color06 .post-author a { color: #343434; } body.color06 .post-author .post-author-meta { color: #484A4E; } body.color06 #comments { background: #fff; border: 1px solid #e5e5e5; padding: 40px 45px; } body.color06 #comments h4 { border-bottom: 5px solid #343434; } body.color06 #comments h4 i { color: #343434; } body.color06 .comment-list > .comment { border-bottom: 1px #eee solid; } body.color06 .comment-list .children .comment-body { background: #f7f7f7; } body.color06 .cat-content { background: #fff; } body.color06 .post-loop-wrap .more-link { border: 1px #343434 solid; color: #343434; } body.color06 .post-loop-wrap .more-link:hover { background: #343434; color: #fff; } body.color06 .post-loop-wrap .post-footer { border-top: 1px #eee solid; } body.color06 .post-loop-wrap .post-footer a.morelink { background: #343434; color: #fff; } body.color06 .pagination span, body.color06 .pagination a { color: #484A4E; background: #fff; } body.color06 .pagination a:hover { color: #fff; background: #3279BB; } body.color06 .pagination .current { background: #3279BB; color: #fff; } body.color06 .side-widget .side-title { background: #ebebeb; border: 1px solid #e4e4e4; } body.color06 .side-widget a { color: #27343c; } body.color06 .side-widget a:hover { color: #27343c; } body.color06 .side-widget ul li { border-bottom: 1px solid #e5e5e5; } body.color06 .side-widget .post-date { color: #999999; } body.color06 .widget_search { border: 1px solid #e5e5e5; } body.color06 .widget_search button { color: #5e6265; } body.color06 .recentcomments { color: #808080; } body.color06 .recentcomments a { color: #484A4E; } body.color06 #side .share-list-wrap { background: #fff; } body.color06 #footer { color: #fff; border-top: 8px solid #343434; } body.color06 #footer a { color: #fff; } body.color06 #footer a:hover { color: #ccc; } body.color06 #footer-brand-area { border-bottom: 1px solid #343434; } body.color06 .footer-01 { background: #343434; } body.color06 .footer-02 { background: #333333; } body.color06 .single-lp .lp-wrap { border: 1px solid #eee; background: #fff; } body.color06 .single-lp .lp-thumbnail { border: 1px #ccc solid; border: 1px #ccc solid; } body.color06 .single-lp #lp-header { background: #27343c; } body.color06 .single-lp #lp-header h1 { color: #343434; border-bottom: 1px solid #eee; } body.color06 .single-lp .lp-form { background: #494c4e; color: #fff; } body.color06 .single-lp .lp-form input[type=submit], body.color06 .single-lp .lp-form button { background: #F86222; color: #fff; border-bottom: 5px solid #e04807; } body.color06 .single-lp .lp-form input[type=submit]:hover, body.color06 .single-lp .lp-form button:hover { background: #f9743b; } body.color06 .pagetop { color: #fff; } body.color06 .pagetop span { background: #2b2b2b; } body.color06.single-lp #lp-header{ background: #ca6666; } |
あとはstyle.cssに追記したcolor05やcolor06のコードを
自由に変更してオリジナルの色設定を作ってください。
関連記事 - Related Posts -
-
2017/11/03
-
出版して稼げる人のマーケティングファネル
-
2017/11/09
-
Xeory Extention 「お問い合わせ」のカスタマイズ方法
-
2017/11/08
-
Xeory Extentionのヘッダー背景色を変更する方法
-
2017/10/27
-
Hello world!
最新記事 - New Posts -
-
2017/11/29
-
Xeory Extentionのクローズアップ記事のボタン背景色を変更する方法
-
2017/11/29
-
Xeory Extentionのサービス記事のボタン背景色を変更する方法
-
2017/11/09
-
Xeory Extention 「見出し」のカスタマイズ方法
-
2017/11/09
-
Xeory Extention 「お問い合わせ」のカスタマイズ方法