本テンプレートはWordPressテーマ「The Sonic」をベースにしたデザインテンプレートです。デバイスのダークモードに応じて、背景色が反転する機能を備えており、ガジェットブログ向きのテーマになっています。
※本テンプレートは有料WordPressテーマ「The Sonic」の利用が必要になります。
※デザイン崩れや質問についてはコメント欄からご連絡下さい。都度修正いたします。
テーマの特徴
簡単な設定
手順は2ステップ。サイトにWordPressテーマをインストール後、2つのステップでこのデザイン、配色にすることができます。おおよそ、10分でこのデザインにすることができます。
導入手順
- WordPressの設定変更(10分)
- デザインをコピー&ペースト(5分)
ダークモードに対応したデザイン
本テーマはデバイスのダークモード時に、自動的にダークテーマに切り替わるデザインとなっています。
本デザインは商用・個人利用ともに無料
当デザインテンプレート「SHIROKURONO(シロクロノ)」は無料でお使いいただけます。
無料で配布しておりますが、著作権は放棄しておりません。また再配布は固く禁じます。
導入手順
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; } }
注意点
AMPについて
AMPには非対応です。
display:none処理について
本テーマはあくまでもCSSなどが分からない初心者向けに作ったテーマです。そのため、デザインを優先するために一部の機能を消しています(display:none処理)。
ヘッダーの一部は非対応
モバイルヘッダーのハンバーガーメニュー、検索は非対応です。モバイルフッターで設定ください。
追加デザイン
デモサイトと完全に同じようにするためには以下を追加ください。
キーカラーについて
本テーマはダークテーマに適用させるため、色をコード側で固定しています。SANGO純正のカラー変更ツールは利用できません。
変更履歴
- 2020/08/07 一部設定を変更
- 2020/08/05 デザインデータ公開
質問・問い合わせについて
SHIROKURONO(シロクロノ)に関する問い合わせはこの記事のコメント欄より投稿ください。DMや問い合わせフォームからは対応しておりません。
コメント