SHIROKURONO（シロクロノ）｜ダークテーマ対応のガジェットブログ向けWordPressテンプレート

WordPressテーマ「The Sonic」をインストール下さい。

カスタマイズを選択します。

SONICオリジナル機能＞フロントページCTA設定を選択します。背景画像の設定をします。

ボックス設定をします（ボックスイメージは使いません）。

※ファーストビューを設定しないとデザイン崩れを起こします。

カスタマイズを開いたのち、カラー設定でメインカラーを「#666666」にしてください。

記事設定＞投稿ページの設定を選択します。この記事を書いた人（記事上）を非表示にします。

SONICオリジナル機能からハンバーガーメニュー・検索ボタンのチェックを外します。

デザインコードをコピーしておきます。右側の青い「COPY」ボタンで一括コピーできます。カスタマイズから追加CSSに貼り付けます。

body {
background-color: #ffffff;
}
.imgarea-btn {
border-radius: 0px;
border-top: solid #ccc;
border-bottom: solid #ccc;
box-shadow: none;
color: #666666;
text-decoration: none !important;
background: #ffffff !important;
}

@media (min-width: 1030px){
.imgarea-img, .imgarea-text-in {
position: relative;
top: 300px;
right: -35vw;
padding:60px 0px
}
.imgarea-text-in {
background: #ffffff;
}
.imgarea-img, .imgarea-text-in {
flex-basis: 480px !important;
}
.header-img {
margin-right: 30vw;
height: 600px;
margin-top:-76px;
}
}
.main-tab-two {
margin-top: 4em;
border: none;
border-bottom: solid #666666 3px;
}
.main-h2 {
border-bottom:solid 4px;
border-left:none;
border-right:none;
color: #666666;
}
.kiji-cat {
background: #666666;
font-size:70%;
}
.home .main-kiji .linkarea {
border-top: solid 4px #666;
}
.def-mode .kiji-cat {
border-radius:0;
}
.kiji-date {
font-size: 10px;
text-align: right;
padding-right:6px;
}
.kijicolumn-2 .kiji-text {
padding: 0 8px 12px;
}
.main-kiji .iine-btn {
padding: 6px 6px 6px 10px;
}
.footer-menu-snsbox .snsbtn {
line-height: 30px;
}
.mobile-footer-menu-item {
min-height: 38px !important;
}
.mobile-footer-menu-item .menu-item {
font-size: 75%;
}
.widget-rank .rank-kiji-img:before {
background: #cccccc;
}
p.pf-share-title {
display: none;
}
.pf-facename .pf-name {
padding: 6px 0;
}
.widget-pf {
margin-top: 6px;
}
img.pf-bg-img {
height: 140px;
filter: brightness(60%);
}
.pf-text {
margin-bottom: 2em;
font-size:12px;
}
.pf-facename .pf-name {
color: #333333;
}
.widget_tsnc_writer p {
font-size:12px;
}
.side-writer-mark1 .pf-bgfacename:after {
background:transparent
}
.pf-custom-btn {
    background: #ffffff !important;
    color: #666666;
    border-top: solid #666666 0.5px;
    border-bottom: solid #666666 0.5px;
    border-radius: 0px;
}
a.pf-custom-btn:hover{
 color: #cccccc;
}
nav#header-nav-box {
font-weight: bold;
background: rgb(0,0,0,0.5) !important;
}
.nav-style-def .menu-item:hover {
background-color: hsla(0,0%,100%,.2);
transition: 0.3s;
}
.nav-style-def a {
padding: 0 16px;
color: #ffffff;
font-size: 12px;
}
.nav-style-def .sub-menu {
width: 200px;
padding: 12px 8px;
border: none;
background: rgb(0,0,0,0.5); 
margin-top:1.5px;
}
.nav-style-def .sub-menu a {
color: #ffffff;
}
.nav-style-def .sub-menu a:before {
color: #ffffff;
}
.header-info a {
margin:0px 0px 10px 0px;
background-color:#ffffff;
border-top:solid 2px #cccccc;
border-bottom:solid 2px #cccccc;
color:#666666;
padding: 4px 0;
}
.home .header-info a {
margin:30px 0px 10px 0px;
position: absolute;
top:710px;
background-color:#ffffff;
border-top:solid 2px #cccccc;
border-bottom:solid 2px #cccccc;
color:#666666;
}
.header-info a:after {
content:"＞＞";
position:relative;
top:1px;
left:3px;
}
.header-info a:hover {
background-color:#f2f2f2;
transition:0.3s;
}
.side-title-mark1 .widget-title {
color: #666666 !important;
background-color: #ffffff !important;
border-bottom: dotted;
text-align: left;
padding: 5px;
}
.widget-title-in {
background: #ffffff;
}
.header-title a {
background-color:transparent;
color:#666666 !important;
}
.home .header-title a {
color: #ffffff !important;
background: rgb(0,0,0,0.5);
}
.logo-catchcopy {
display: none;
}
.hotword {
background:#ffffff;
}
.hotword-textlink li {
font-size: 12px;
color: #ffffff;
font-weight: bold;
}
.hotword-textlink {
justify-content: flex-end;
padding: 16px 0 0px;
}
.home .hotword-textlink {
justify-content: center;
margin-top: 40px;
}
.hotiword-textlink-3:before {
background: #FE005B;
}
.hotiword-textlink-1:before,.hotiword-textlink-2:before {
background: #666666;
}
#content {
margin: 40px 0 40px;
}
.home #content {
margin: 110px 0 40px;
}
@media (max-width: 1030px){
.header-title a {
font-size: 24px;
color: #666666;
position:0px !important;
}
.header-info a {
margin: 0px 0px 20px 0px;
background-color: #ffffff;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
color: #666666;
font-size: 12px;
font-weight:bold;
}
}
a{
color:#1e73be
}
#header {
background-color: transparent;
margin-bottom: 40px;
}
.home #header {
background-color: transparent;
margin-bottom: 0px;
}
.search-form {
margin-top: 6px;
}
.side-search-mark1 .search-field {
border-radius: 0px;
}
.side-search-mark1 .search-submit {
background: #666666;
}
.footer-in-under .footer-title a{
font-size: 30px;
color: #fff;
background: #666666;
}
footer {
background:transparent;
border-top: solid 4px #cccccc;
}
border-color: #666666;
margin-top: 4em;
}
.mkj-openclose {
top: 6px;
}
.mkj-content:after {
display:none;
}

.mkj-input:checked~.mkj-openclose:after {
content: "CLOSE";
}
.huki-imgname .pf-face-img, .huki-imgname .wp-user-avatar {
width: 65px;
height: 65px;
margin: auto;
}
.huki-imgname p {
font-size: 12px !important;
}
.huki-left,.huki-right{
font-size: 12px !important;
}
.entry h2 {
background:#ffffff;
border-bottom: solid 3px #666666;
color: #666666;
margin: 2em 0 1em;
font-size:24px
}
.entry h3 {
background:#ffffff;
color:#666666;
padding: 2px 0 2px 10px;
border-left:solid 3px #666666;
margin: 3em 0 1em;
}
.entry h4 {
background:#ffffff;
color:#666666;
border-color: #666666;
}
.entry p {
font-size:16px
}
.breadcrumb {
padding: 6px 0px 0px;
font-size: 12px;
color:#666666;
}
.breadcrumb a{
color:#666666;
}
.comment-respond input, .comment-respond textarea {
border:solid #666666 1px;
}
.entry-header-item {
display:block;
padding: 2px 0px 4px;
text-align:right;
font-size: 12px;
}
.entry-header-item span {
margin-right: 10px;
}
.entry-snsbox {
background: transparent;
position: relative;
left: 24px;
}
.snsbtn {
flex:none;
border-radius: 50%;
color: #fff;
width: 30px;
}
.entry-snsbox .snsbox-in {
justify-content:flex-end;
}
.snsbox-in-style2 span {
display: none;
}
.left-fixed-in .snsbtn {
width: 30px;
height: 30px;
}
.sns-box-style1 .snsbtn.tw-btn,.sns-box-style1 .snsbtn.face-btn,.sns-box-style1 .snsbtn.hatena-btn,.sns-box-style1 .snsbtn.line-btn,.sns-box-style1 .snsbtn.poket-btn,.sns-box-style1 .snsbtn.note-btn,.sns-box-style1 .snsbtn.pinterest-btn {
background:#cccccc;
}
.sns-box-style1 .snsbtn.tw-btn:hover,.sns-box-style1 .snsbtn.face-btn:hover,.sns-box-style1 .snsbtn.hatena-btn:hover,.sns-box-style1 .snsbtn.line-btn:hover,.sns-box-style1 .snsbtn.poket-btn:hover,.sns-box-style1 .snsbtn.note-btn:hover,.sns-box-style1 .snsbtn.pinterest-btn:hover {
background:#111111;
transition:0.5s;
}
.left-fixed-in {
width:80px;
padding:8px;
position:fixed;
top:200px;
left:5px;
}
.iine-btn {
width: 30px;
height: 30px;
}
.writer-mark1 .writer-in:before {
background: #cccccc;
font-size:10px;
}
.writer-in:before {
padding: 0px 4px;
width: auto;
}
.writer-mark1 .writer-img {
background: #f2f2f2;
}
.writer-text-in p {
font-size:12px !important;
}
.writer-katagaki, .writer-name {
font-size:12px !important;
padding:6px 0px 0px;
}
.writer-img-in img {
width: 80px;
height: 80px;
margin: auto !important;
}
.writer-in {
margin: 0 12px;
}
.writer-mark1 .writer-text {
border-color:#cccccc;
}
.pf-share>p {
color: #cccccc;
}
.pf-custom-btn {
background: #cccccc;
}
.comment-reply-title:before {
display:none
}
div#comments {
border-top: dotted #cccccc;
margin-top: 3em;
}
.category-area, .tag-area {
text-align: right;
}
.entry-catetagbox {
padding: 12px 4px;
font-size:12px;
background: #ffffff;
}
.category-area a, .tag-area a {
color:#cccccc;
}
.prevnext-title {
background: #cccccc;
font-size: 10px;
}
.prevnext-title {
padding: 2px 4px;
}
.entry-prevnext-in {
border-top: dotted #cccccc;
border-bottom: dotted #cccccc;
margin:2.5em 0;
padding:1em 0;
}
.comment-respond .comment-form-comment label {
background: #666666;
}
.comment-form-comment {
border-color: #666666;
}
.form-submit .submit {
background: #666666;
}
.form-submit .submit {
border-radius: 0px;
}
.kanren-kiji-title {
margin: 3em 0 2em;
border-bottom: solid 2px #666666;
}
.kanren-kiji-2yokocard .main-kiji {
width: 360px;
}
.is-style-titlebox-mark4 {
border-radius: 0px !important;
}
.is-style-titlebox-mark2 {
border-radius: 0px;
}
.eyecatching-mark2 .entry-header-item {
bottom: 0px !important;
}
.eyecatching-mark1 .entry-header-item {
bottom: -2px !important;
font-size:10px
}
.entry-content {
padding: 30px 2px;
}
.main-bgc {
background-color: rgba(0, 0, 0, 0.3);
}
.main-c{
color: #666666;
}
.entry-title {
font-size:1.6em;
padding:12px 0px 6px 0px;
font-weight:bold;
color:#666666;
}
.entry-404-eyeimg {
    background: #cccccc;
}
@media (max-width: 1030px){
.entry-snsbox {
left: 0px;
}
.breadcrumb {
padding: 6px 6px 0px !important;
font-size: 8px;
}
.imgarea-text p {
font-size: 14px;
}
p.imgarea-title {
font-size: 20px;
}
.home #content {
margin: 20px 0 40px !important;
}
#header {
margin-bottom:16px !important;
}
#content {
margin: 0px 0 40px !important;
}
.header-img {
    height: 400px;
    position: relative;
    bottom: 60px;
    z-index: -999;
}
.imgarea-text-in {
    position: relative;
    top: 120px;
}
.home #content {
margin: -10px 0 40px !important;
}
.home .header-title a {
background: rgb(255,255,255,0.7);
}
.imgarea-text-in {
background: hsla(0,0%,100%,0.60);
}
.home .header-info a {
position: absolute !important;
top: 475px !important;
}
}

@media (min-width: 1030px){
.home nav#header-nav-box {
position: absolute;
font-weight: bold;
top: 90px;
background: rgb(0,0,0,0.5) !important;
}
nav#header-nav-box {
font-weight: bold;
background: rgb(0,0,0,0.5) !important;
position:relative;
top:40px;
height:36px;
}
.header-title a {
font-size: 30px;
color: #666666;
padding: 0px 20px;
position: relative;
top: 20px;
}
.home .main-in {
padding: 0% 2%;
}
.kijicolumn-2 .main-kiji {
width: 45%;
}
#sidebar {
margin-top:24px;
}
.main-hb {
width: 750px;
margin-right: 60px;
}
}
.entry-header-item {
display:block;
padding: 2px 0px 4px;
text-align:right;
	font-size: 12px;
}
@media (max-width: 1300px){
.left-fixed {
display:none;
}
}
@media (max-width: 1030px){
.entry-content {
padding: 30px 10px;
}
.entry-title {
padding: 12px 6px 6px 6px !important;
font-size:20px !important;
}
.entry-header-item {
font-size: 8px !important;
}
.home .header-title a {
color: #666666 !important;
background: #ffffff;
}
.home .header-info a {
    margin: 0px 0px 15px;
    position: relative;
    top: 0px;
}
p.pf-katagaki {
    background: #ffffff;
    opacity: 1;
}
.widget_tsnc_writer p {
    background: #ffffff;
}
}
@media (max-width: 767px){
.pf-bgfacename, img.pf-bg-img {
height: 60vw;
}
}


@media (prefers-color-scheme: dark) {
/* 全体 */
body{
background-color:#121212 !important;
}
.widget-content {
background: transparent;
}
.widget-title-in {
background: #121212;
}
.side-title-mark1 .widget-title {
color: #f5f5f5 !important;
background-color: #121212 !important;
}
.widget ul {
background: #121212;
color:#f5f5f5;
}
.widget ul li a {
color:#f5f5f5;
}
footer {
background: #121212 !important;
}
footer#entry-footer {
border-top:solid 2px #fff;
margin-bottom:2.5em;
}
.footer-in-under {
background: #121212;
}
.entry-footer .writer-mark1, .entry-footer .writer-mark2, .entry-footer .writer-mark3 {
border-bottom:solid 2px #fff;
padding-bottom:2em;
}
.header-title a {
color: #f5f5f5 !important;
font-size: 24px;
}
.search-field {
background:#121212;
border: 1px solid #e1e8ed;
color: #f5f5f5;
}
a{
color:#f5f5f5
}
.header-info a {
background-color: #121212 !important;
border-top: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
color: #f5f5f5 !important;
}
.header-info a:hover{
background-color: #333333 !important;
}
.pf-facename .pf-name {
color: #f5f5f5;
}
.widget_tsnc_writer p {
color: #f5f5f5;
}
.sns-box-style1 .snsbtn.tw-btn, .sns-box-style1 .snsbtn.face-btn, .sns-box-style1 .snsbtn.hatena-btn, .sns-box-style1 .snsbtn.line-btn, .sns-box-style1 .snsbtn.poket-btn, .sns-box-style1 .snsbtn.note-btn, .sns-box-style1 .snsbtn.pinterest-btn {
background: #121212;
}
.iine-btn {
background: #121212;
border:none;
}
.footer-in-under .footer-title a {
color: #f2f2f2;
background-color:#121212;
}
.footer-title {
    color: #f2f2f2;
    border-color: #f2f2f2;
}
	
/* 投稿 */
.entry-content {
background: #121212;
color:#f2f2f2;
font-weight:500;
font-size: 16px;
}
.entry-content {
color: #f5f5f5;
}
.entry-header {
background: #121212;
}
.entry-title {
color: #f5f5f5;
}
.entry h2 {
background: #121212;
border-bottom: solid 3px #f5f5f5;
color: #f5f5f5;
}
.entry h3 {
background: #121212;
color: #f5f5f5;
border-left: solid 3px #f5f5f5;
}
.entry h4 {
background: #121212;
color: #f5f5f5;
border-color: #f5f5f5;
}
.writer-mark1 .writer-img {
background: #121212;
}
.writer-katagaki, .writer-name {
color:#f5f5f5
}
.writer-mark1 .writer-text {
background: #121212;
}
.writer-text-in p {
color:#f5f5f5
}
.writer-mark1 .writer-text{
border-color:#121212;
}
.pf-custom-btn {
background: #121212 !important;
}
.pf-custom-btn:after {
color:#f5f5f5;
}
.writer-mark1 .writer-in:before {
    background: #121212;
}
article.entry, article.single {
background:#121212;
}
.next-kiji-in,
.prev-kiji-in {
background: #121212;
}
.prevnext-text {
color:#fff;
font-weight:bold
}
.kanren-kiji-2yokocard .linkarea, .kanren-kiji-3yokocard .linkarea {
background:#121212;
}
.kanren-kiji-2yokocard .kiji-text, .kanren-kiji-3yokocard .kiji-text {
color:#fff;
font-weight:bold
}
.kanren-kiji-title {
border-bottom: solid 2px #f5f5f5;
}
.main-c {
color: #f5f5f5;
}
.mkj-list a {
color: #f5f5f5;
}
.mkj-title {
color: #f5f5f5;
}
.mkj-input:checked~.mkj-openclose:after {
color: #f5f5f5;
}
.mobile-footer-menu-item a {
color: #f5f5f5;
}
.mobile-footer-menu {
background: #121212;
}
.footer-menu-snsbox {
background: rgba(0,0,0,.8);
}



/* 投稿装飾 */
.rank-kiji-content {
color: #f5f5f5;
font-weight:bold;
}
.is-style-titlebox-mark8 .ob-title {
background: #FE005B;
}
.is-style-list-batsu li:before {
color: #FE005B;
}
.is-style-titlebox-mark9 .ob-title {
background: #00C0F6;
}
.is-style-list-maru li:before {
color: #00C0F6;
}
.is-style-titlebox-mark10 .ob-title {
background: #8DF725;
}
.is-style-titlebox-mark8, .is-style-titlebox-mark9, .is-style-titlebox-mark10 {
border: none;
}
.label-ac {
background: #FE005B;
}
.bold-red {
color: #FE005B;
}
p.is-style-para-mark6{
color:#121212;
}
.is-style-para-icon-mark1,.is-style-para-icon-mark2,.is-style-para-icon-mark3,.is-style-para-icon-mark4,.is-style-para-icon-mark5,.is-style-para-icon-mark6{
background: transparent;
}
.is-style-para-icon-mark2:before {
background:#00C0F6;
}
.is-style-para-icon-mark3:before {
background: #dcdc1c;
}
.is-style-para-icon-mark4:before {
background: #FE005B;
}
.is-style-para-icon-mark5:before {
background:#8DF725;
}
.comment-reply-title {
color: #fff;
}
textarea {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: -internal-light-dark(black, white);
background-color:#121212;
color:#f5f5f5
}
.breadcrumb a {
color: #f5f5f5;
}.fa-jira:before {
display:none;
}
.catetagbox-label {
color:#f5f5f5
}
#content>.breadcrumb {
padding: 4px 12px;
}
.entry-header-item {
color:#f5f5f5;
}
.huki-left .huki-text-after {
left: -14px;
}
.huki-right .huki-text-after {
right: -14px;
}
.huki-text {
background: #121212;
border:solid 1px #f5f5f5
}
.ranking-item {
background: transparent;
}
.is-style-table-simple th {
background: rgba( 102, 102, 102, 0.2);
color: #f5f5f5;
}
.comment-form-author, .comment-form-cookies-consent, .comment-form-email, .comment-form-url {
color: #f5f5f5;
}
.comment-respond input, .comment-respond textarea {
background: #121212;
}
.entry-catetagbox {
background: #121212;
}
.is-style-titlebox-mark2 .ob-contents {
background: #121212;
}

/* ホーム */
.imgarea-title {
color:#f5f5f5
}
.imgarea-text p {
color:#f5f5f5
}
.imgarea-btn {
background: #121212 !important;
}
.main-h2,.main-title {
background:#121212;
color:#f5f5f5;
}
.kijicolumn-2 .kiji-text {
color:#f5f5f5;
}
.main-kiji .linkarea:hover {
background: #222222;
transition:0.3s;
}
.main-kiji .linkarea {
background:#121212;
}
.two-box-set .wp-block-column:not(:first-child) {
border: none;
}
.two-box-set .wp-block-columns {
border:none;
}
.kijicolumn-2 .main-kiji:nth-child(2n) {
margin-top: 3em;
}
.kijicolumn-2 .main-kiji:nth-child(2n-1) {
margin-top: 3em;
}
.kiji-date-in {
display: inline-block;
color: #f5f5f5;
}
.entry-404-eyeimg {
    background: #121212;
}
.tagcloud {
background: #121212;
}
.cat-tab-text:not(.active_tab) {
    background-color: #121212;
}
@media (min-width: 1030px){
.hotword-textlink li {
font-size: 12px;
color: #f5f5f5;
font-weight: bold;
}
.single .hotword-textlink {
justify-content: flex-end;
}

.hotiword-textlink-1:before {
background: #FE005B;
}
.hotiword-textlink-2:before {
background: #FE005B;
}
.hotiword-textlink-3:before {
background: #FE005B;
}
.imgarea-text-in {
background: #121212;
}
.footer-menu-snsbox .snsbtn {
line-height: 30px;
}
.hotword {
background: #121212;
}
}
.entry-letterbody a {
    color: #1e73be;
}
@media (max-width: 1029px){
.header-title {
padding: 8px 62px 8px 68px;
}
.imgarea-btn {
    background: #f5f5f5 !important;
}
.home .header-title a {
    color: #f2f2f2 !important;
    background: #121212;
}
.imgarea-text-in {
background: hsla(0,0%,0%,0.60);
}
p.pf-katagaki {
    background: #121212;
    opacity: 1;
}
.widget_tsnc_writer p {
    background: #121212;
}
}
.imgarea-btn {
    background: transparent !important;
    color: #fff;
}
}