SHIRONO（シロノ）｜シンプルで余白を広げたSANGO用スキンテンプレート

2020 7/28

2020.07.28

「SHIRONO（シロノ）」は余白を広げたモノクロのSANGO向けWordPressデザインテンプレートです。色味を抑え、余白を広げことで訪問者にゆったりとした時間を提供できるデザインとしています。以下より、デモサイトをご覧ください。

SHIRONOデモサイトを見る >

※本テンプレートは有料WordPressテーマ「SANGO」の利用が必要になります。
※デザイン崩れや質問についてはコメント欄からご連絡下さい。都度修正いたします。

テーマの特徴

簡単な設定

手順は2ステップ。サイトにWordPressテーマをインストール後、2つのステップでこのデザイン、配色にすることができます。おおよそ、10分でこのデザインにすることができます。

導入手順

WordPressの設定変更（5分）
デザインをコピー&ペースト（5分）

シンプル&ファーストインパクト

本テーマはサイドバーを画面固定できることを特徴としたデザインです。以下にギャラリー形式でその他の特徴の一部をまとめているのでクリックしてご覧ください。

本デザインは商用・個人利用ともに無料

当デザインテンプレート「SHIRONO（シロノ）」は無料でお使いいただけます。

無料で配布しておりますが、著作権は放棄しておりません。また再配布は固く禁じます。

導入手順

STEP

SANGOのインストール

有料WordPressテーマであるSANGOをインストール下さい。手順は公式サイトをご覧ください。

SANGOのインストール方法

STEP

デザインを張り付ける

デザインコードをコピーしておきます。右側の青い「COPY」ボタンで一括コピーできます。

.sidebar .my_popular_posts .widgettitle:before {
display:none
}
.sidebar .widget_archive .widgettitle:before {
display:none
}
.sidebar .widget_categories .widgettitle:before {
display:none
}
.sidebar .widget_recent_entries .widgettitle:before {
display:none
}
.desktop-nav li a, .mobile-nav li a, #footer-menu a, #drawer__open, .header-search__open, .copyright, .drawer__title {
color: #111 !important;
}
.single header {
margin: 20px 0px;
}
.header-info a {
    color: #666 !important;
    background: transparent !important;
    border-top: solid 2px #cccccc;
    border-bottom: solid 2px #cccccc;
}
.header-info a:hover {
    background: #f2f2f2 !important;
}
.pagination .current {
    background: rgb(255,255,255,0.6) !important;
    color: #666666 !important;
}
#toc_container .toc_title, .entry-content .ez-toc-title-container, #footer_menu .raised, .pagination a, .pagination span, #reply-title:before, .entry-content blockquote:before, .main-c-before li:before, .main-c-b:before {
    color: #cccccc !important;
}
.accent-bc, .has-sango-accent-background-color {
    background-color: #888888 !important;
}
.pagination a:hover{
    background: #f2f2f2 !important;
}
a.raised.rippler.rippler-default {
    background: #ffffff !important;
    color: #666666 !important;
}
.raised {
    border-radius: 0px;
    border-top: solid #ccc;
    border-bottom: solid #ccc;
    box-shadow: none;
    color: #ccc;
    text-decoration: none !important;
	  background: #ffffff !important;
}
.cta {
    background: #ffffff !important;
    border-top: solid 2px #666666;
    border-bottom: solid 2px #666666;
}
.sgb-box-simple__body {
    border-radius: 0px;
    border-color: #cccccc !important;
}
.sgb-box-simple__title {
    background-color: #cccccc !important;
}
.main-bdr, #inner-content .main-bdr {
    border-color: #cccccc !important;
}
.main-bc{
    background-color: #cccccc !important;
}
.cardtype__article {
    box-shadow: none;
}
.cardtype time {
    margin: 13px 8px 8px;
    color: #fff;
    font-size: 12px;
    position: relative;
    bottom: 40px;
}
.cardtype time {
    text-align: right;
}
.cardtype h2 {
    position: relative;
    bottom: 20px;
}
#content {
    margin-top: 6em;
    padding-bottom: 2em;
}
.widgettitle {
    color: #cccccc !important;
    background-color: #ffffff !important;
    border-bottom: dotted;
}
#searchsubmit, #toc_container .toc_title:before, .ez-toc-title-container:before, .cat-name, .pre_tag > span, .pagination .current, .post-page-numbers.current, #submit, .withtag_list > span, .main-bc-before li:before {
background:#ffffff !important;
color:#222222 !important;
}
.header, #footer-menu, .drawer__title {
    background-color: transparent !important;
}
.header {
    box-shadow: none;
}
.desktop-nav li:after {
    background: #cccccc;
}
.desktop-nav li:after {
    background: #cccccc !important;
}
#logo a {
    color: #666666 !important;
    background:transparent;
    padding: 5px 20px;
}
body {
    background-color: #ffffff;
}
.entry-content h2 {
border-bottom: solid 3px #666666;
color: #666666;
}
}
.entry-content h3 {
color: #666666 !important;
}
h3 {
border-color:#666666 !important;
}
#breadcrumb ul {
    font-size: 12px;
}
#breadcrumb li a {
	  color:#666
}
.entry-meta {
    font-size: 12px;
    text-align: right;
}
.main-c, .has-sango-main-color {
    color: #666666 !important;
}
.fab-btn {
    border-radius: 33px 0px 33px 0px;
}
#ez-toc-container{
    border-color: #666666 !important;
}
#toc_container .toc_title:before, .entry-content .ez-toc-title-container:before {
    color: #666666;
}
.entry-content .ez-toc-title-container{
    color: #666666 !important;
}
@media (min-width: 1030px){
.footer-contents  .sns-btn__item i {
    width: 35px;
    height: 35px;
    font-size: 22px;
    line-height: 32px;
    border: solid;
    border-radius: 50px;
}
.footer-contents .tw a, .tw .scc {
    position: fixed;
    top: 400px;
    left: 20px;
}
.footer-contents .fb a, .fb .scc {
    position: fixed;
    top: 440px;
    left: 20px;
}
.footer-contents .hatebu a, .hatebu .scc {
    position: fixed;
    top: 480px;
    left: 20px;
}
.footer-contents .line a {
    position: fixed;
    top: 520px;
    left: 20px;
}
.footer-contents .pkt a, .pkt .scc {
    position: fixed;
    top: 560px;
    left: 20px;
}
.share_txt {
    display: none;
}
.footer-contents span.sns-btn__title.dfont {
    display: none;
}
}
@media (min-width: 769px){
.header-image__text {
    padding: 20px;
    color: #fff;
    text-align: center;
    position: relative;
    right: -35vw;
    top: 355px;
    background:#ffffff;
    width:480px;
}
#header-image {
    margin-right:42vw;
    height: 600px;
    margin-top:-118px
}
.header-image__text p {
color:#666666;
}
#header-image {
    animation: none;
}
.desktop-nav .menu-item a {
    opacity: 1;
    font-size: 65%;
}
.desktop-nav li a {
padding: 0 20px;
}
.entry-content {
    padding-left: 20px;
    padding-right: 20px;
}
.single .d-5of7, .post .d-5of7, .page .d-5of7 {
    padding-right: 6em;
}
#single	.d-5of7 {
    float: left;
    width: 75%;
}	
.single #content, .page #content {
    margin-top: 3em;
}
.home .header-info a{
color: #666666 !important;
background:#fff !important;
border-top:solid 2px #cccccc;
	border-bottom:solid 2px #cccccc;
position: relative;
top: 555px;
}
.home .header-info a:hover {
    background: #f2f2f2 !important;
}
.home #logo  a {
    color: #f2f2f2 !important;
    background: rgb(0,0,0,0.3);
    padding: 5px 20px;
}
.paged .header-info a{
position: relative;
top: 0px;
}
.paged #logo  a {
    color: #666666 !important;
    background: #ffffff;
    padding: 5px 20px;
}
.paged header {
margin: 20px 0px;
}
}
@media only screen and (min-width: 481px){
.rep p {
    font-size: 0.75em;
}
}

ダッシュボードからカスタマイズを選びます。

追加CSSに貼り付けます。

実際に貼り付けた様子はこちらです。これで終了です。

注意点

ヘッダーについて

SHIRONO（シロノ）のヘッダーはカスタマイズの「ヘッダーアイキャッチ」と「お知らせ欄」を入力してデザインが整うようにしています。ぜひ設定ください。

※2画面分割ヘッダーは本デザインでは使えません

AMPについて

AMPには非対応です。

display:none処理について

本テーマはあくまでもCSSなどが分からない初心者向けに作ったテーマです。そのため、デザインを優先するために一部の機能を消しています（display:none処理）。

処理済みのラベル

サイドバー前のアイコン全て

※その他デザイン上消しているものがあります。くわしくはコードをご確認ください。

追加デザイン

デモサイトと完全に同じようにするためには以下を追加ください。

英語用の特殊フォントを入れる

Googleフォントにアクセスします。

Google Fonts

seachに「Cinzel」と入力します。

Select this styleを選択します。

右上のパネルをクリックEmbedを選択し、上側の<link>をコピーします。

カスタマイズからヘッダーに埋め込みます。

以下をコピペして埋め込みます。

.dfont {
font-family: 'Cinzel', serif !Important;
}

デモサイトでは「Cinzel」を使っていますが、もちろん他のフォントを利用することも可能です。その場合お気に入りの英字に変更し、上のコピペの「Font-family:’○○’」部分を変更ください。

キーカラーについて

本テーマはシロクロをコンセプトにしたテーマのため、色をコード側で固定しています。SANGO純正のカラー変更ツールは利用できません。

変更履歴

2020/07/28 デザインデータ公開

質問・問い合わせについて

SHIRONO（シロノ）に関する問い合わせはこの記事のコメント欄より投稿ください。DMや問い合わせフォームからは対応しておりません。

SHIRONO（シロノ）｜シンプルで余白を広げたSANGO用スキンテンプレート

テーマの特徴

簡単な設定

シンプル&ファーストインパクト

本デザインは商用・個人利用ともに無料

導入手順

注意点

ヘッダーについて

AMPについて

display:none処理について

追加デザイン

キーカラーについて

変更履歴

質問・問い合わせについて

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル