SHIRONO(シロノ)|シンプルで余白を広げたSANGO用スキンテンプレート

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

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

目次

テーマの特徴

簡単な設定

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

導入手順

  1. WordPressの設定変更(5分)
  2. デザインをコピー&ペースト(5分)

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

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

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

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

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

導入手順

STEP
SANGOのインストール

有料WordPressテーマである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処理)。

処理済みのラベル

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

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

追加デザイン

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

キーカラーについて

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

変更履歴

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

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

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

コメント

コメントする

目次
閉じる