ASANO（アサノ）｜美容・オーガニックブログ・サイト向け無料WordPressスキンテンプレート

2020 7/22

2020.07.22

「ASANO（アサノ）」は美容やオーガニック系のサイト・ブログを運営する人向けの無料のWordPressスキンテンプレートです。まずはデモサイトをご覧ください。

ASANOを見る

※本テンプレートはWordPressテーマ「Cocoon」（無料）の利用が必要になります。
※デザイン崩れについてはコメント欄からご連絡いただけますと幸いです。都度修正いたします。

テーマの特徴

10分でテーマの導入が可能

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

導入手順

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

優しさとシンプルさの追究したデザイン

本テーマでは「やさしい見た目」をテーマに作成しており、全体的に余白を広めたデザインのテーマです。

例えば、読者が文章コンテンツに集中できるよう公開日、更新日を画像内へおさめたり、シェアボタンをシンプル化するなど引き算のデザインで設計しております。スマートフォンデザインもタイトルのみの追従デザイン、追従バーの透明化としており、よりコンテンツに集中しやすい形としています。

またデザイン側で色を指定しているため、自動的に全てのカラーが適用されます。色を変えたい場合はこちらをご覧ください。以下にギャラリー形式で特徴の一部をまとめているのでクリックしてご覧ください。

※店舗向けの電話番号デザインについて必要な方のみ追加で作業が必要となりますが、所要時間は20分以内で収まるような簡単な設計としています。後半の追加デザインで解説しています。

商用・個人利用ともに無料

当テンプレート「ASANO」は無料でお使いいただけます。当サイトへのリンクも必要ありません。ただし、無料で配布しておりますが、著作権は放棄しておりません。また再配布は固く禁じます。

もしよろしければ、Cocoon作者のわいひらさんの欲しいものリストのご送付をお願い致します。

わいひらさんへの寄付・開発支援

導入手順

STEP

Cocoonのインストール

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

Cocoonのインストール方法

STEP

Cocoon管理設定を調整する

サイドバーから「Cocoon管理」を選びます。

ヘッダーレイアウトを「トップメニュー（右寄せ）」に変更します。

カラム設定でコンテンツ幅を「750」、カラム間余白を「30」に設定します。

SNSシェアボタンの下側に「SHARE」を入力し、カラム数を6に、ロゴキャプションを上下にします。

STEP

デザインを張り付ける

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

p.wp-block-rinkerg-gutenberg-rinker.gutenberg-yyi-rinkernone:before {
    content: 'CHECK';
    position: relative;
    top: 38px;
    left: 10px;
    border: solid 0.8px #aadb53;
    padding: 2px 10px;
    background: #fff;
    font-size: 14px;
    color: #aadb53;
}
div.yyi-rinker-contents {
    margin: 1.5em 0;
    border: solid 1px #aadb534a;
    background-color: #fff;
    box-shadow: 2px 3px 5px -5px #aadb53;
    padding: 10px 0px 0px;
}
div.yyi-rinker-contents ul.yyi-rinker-links a:after {
    content: 'で見てみる >';
}
[id^="bfb_content_"].bfb_view_pc a.bfb_btn,[id^="bfb_content_"].bfb_view_sp a.bfb_btn {
    background: #aadb53 !important;
    border-bottom: solid 3px #7c8d2a !important;
    text-shadow: 0 1px 0 #7c8d2a !important;
	  border-bottom:none !important;
	  border: solid 3px #aadb53 !important;
}
[id^="bfb_content_"].bfb_view_pc a.bfb_btn2 {
    background: #fff !important;
	  text-shadow: none !important;
	  color:#aadb53 !important;
	  border-bottom:none !important;
	  border: solid 3px #cccccc !important;
}
[id^="bfb_content_"].bfb_view_pc,[id^="bfb_content_"].bfb_view_sp {
    background-color: rgba(255, 255, 255, 0.6) !important;
}
.footer-title {
    margin-bottom: 1em;
}
.content {
    background: #fff;
}
div#carousel {
    background: #fff;
}
.a-wrap:hover {
    background-color: transparent;
}
.fa-folder-open:before {
display:none
}
h1#archive-title {
    color: #aadb53;
	  background: linear-gradient(to right, #fff, #F5FAFA,  #eaf1f5);
    padding: 10px;
}
.widget-entry-card {
    font-size: 14px;
    color: #333;
}
.widget_recent_entries ul li a, .widget_categories ul li a, .widget_archive ul li a, .widget_pages ul li a, .widget_meta ul li a, .widget_rss ul li a, .widget_nav_menu ul li a {
    color: #666;
    border-bottom: dotted #eaf1f5;
}
a.popular-entry-card-link.a-wrap {
    color: #666;
    border-bottom: dotted #eaf1f5;
}
.sidebar h3,.footer-title {
	  padding:7px;
	  border-radius: 2px;
    border-bottom: solid 3px #eaf1f5;
    background: #aadb53;
	  text-align:center;
	  box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    font-size: 16px;
	  color:#fff
}
h3.widget-sidebar-scroll-title.widget-title {
    margin-top: 3em;
}
aside:not(:first-child) {
    margin-top: 3em;
}
.author-widget-name {
    padding: 5px 2px;
    color: #666;
}
.nwa .author-box {
    background: linear-gradient(to bottom right, #fff, #fff, #eaf1f5);
    border: none;
    border-radius: 0px;
}
.author-description {
    font-size: 14px;
    background-color: rgba(255,255,255,0.5);
    padding: 5px 8px 0.5px;
}
.author-box .sns-follow-buttons a.follow-button {
    font-size: 22px;
    width: 30px;
    height: 30px;
    margin-bottom: 4px;
    margin-right: 4px;
    background: linear-gradient(to bottom right , #fff, #aadb53,#95c977);
    color: #fff;
    border: none;
    border-radius: 15px;
}
.author-box .author-name {
    font-size: 1em;
    margin-bottom: 0.8em;
    margin-top: 0.4em;
}
.author-name a {
    color: #555;
    text-decoration: none;
}
.nwa .author-box .author-thumb {
    margin: 13px auto 0;
}
a.follow-button{
    color: #fff !important;
}
#footer .author-box.border-element.no-icon.cf {
    background: transparent;
}
a.widget-entry-card-link:hover {
    filter: brightness(90%);
    transition: 0.5s;
}
a.popular-entry-card-link:hover {
    filter: brightness(90%);
    transition: 0.5s;
}
.appeal-content .appeal-button {
    background-color: #aadb53;
}
a.appeal-button:after {
    content: '>>';
	  position:relative;
		left: 2px;
}
.appeal {
    height: 600px;
}
.appeal-content {
background:linear-gradient(to right bottom, rgba(255,255,255,0),rgba(255,255,255,0),rgba(255,255,255,1));;
}
.appeal-in {
    height: 600px;
}
.cat-label{
    background-color: #aadb53;
    opacity: 0.5 !important;
}
.carousel-entry-card-title {
    font-size: 12px;
    color: #777;
}
.site-name-text {
    font-weight: bold;
	  color: #aadb53 !important;
    color: #000;
    text-shadow:0.5px 0.5px 0 #FFF, -0.5px -0.5px 0 #FFF,
                -0.5px 0.5px 0 #FFF, 0.5px -0.5px 0 #FFF,
                0px 0.5px 0 #FFF,  0 -0.5px 0 #FFF,
                -0.5px 0 0 #FFF, 0.5px 0 0 #FFF;
}
.header-container-in.hlt-top-menu .site-name-text {
    font-size: 30px;
}
#index-tab-1:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-1"], #index-tab-2:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-2"], #index-tab-3:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-3"], #index-tab-4:checked ~ .index-tab-buttons .index-tab-button[for="index-tab-4"] {
    border: none;
    background: none #eaf1f5;
    border-bottom: 5px solid #aadb53;
    color: #777;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
	  text-shadow: 0.5px 0.5px 0 #F2F2F2, -0.5px -0.5px 0 #F2F2F2, -0.5px 0.5px 0 #F2F2F2, 0.5px -0.5px 0 #F2F2F2, 0px 0.5px 0 #F2F2F2, 0 -0.5px 0 #F2F2F2, -0.5px 0 0 #F2F2F2, 0.5px 0 0 #F2F2F2;
}
.index-tab-buttons .index-tab-button {
    font-size: 18px;
    border-radius: 0px;
    border: none;
	  font-size: 14px;
}
.index-tab-buttons .index-tab-button {
    background: #eaf1f5;
    color: #fff;
    font-weight: bold;
}
h2.entry-card-title.card-title.e-card-title  {
    padding-top: 10px;
	  color: #555;
}
a.entry-card-wrap.a-wrap.border-element.cf:hover {
    filter: brightness(90%);
    transition: 0.5s;
}
.page-numbers{
    border-color: #aadb53;
    border-radius: 50%;
    color: #666;
}
.pagination .current {
    background-color: #aadb53;
    border-color: #aadb53;
    border-radius: 50%;
    color: #fff;
}
.key-btn {
    background: linear-gradient(to right, #fff, #aadb53);
    border: transparent;
    color: #fff;
}
#footer
{
	background: linear-gradient(to right, #fff, #eaf1f5);
	border-top: solid 10px #aadb53;
}
#header-container .navi{
    background-color: transparent;
}
div#header-container {
    padding: 12px;
	  background: linear-gradient(to right, #fff, #eaf1f5);
}
.notice-area {
    padding: 0.2em;
	  background: linear-gradient(to right, #fff , #aadb53, #95c977);
}
div#notice-area:after {
    content: ">";
    padding-left: 5px;
}
li.navi-menu-button.menu-button {
    display: none;
}
li.search-menu-button.menu-button {
    display: none;
}
.mobile-menu-buttons .menu-button {
    color: #aadb53;
}
.mobile-menu-buttons .menu-button > a {
    color: #aadb53;
}
.mobile-menu-buttons .menu-button > a {
    color: #aadb53;
    font-size: 25px;
}
.mobile-menu-buttons {
background:linear-gradient(to right,rgba(255,255,255,0.6),rgba(255,255,255,0.6),rgba(255,255,255,0.6));
}
.mobile-header-menu-buttons {
    box-shadow: none;
}
ul.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button {
    background: transparent;
}
.e-card-thumb.card-thumb img {
    border-bottom-left-radius: 30px;
}
.ranking-item-name-text {
    color: #666;
}
.ranking-items p {
    font-size: 16px;
    margin-top: 1em;
    color: #666;
}
.ranking-item {
background:linear-gradient(to right, #fff, #fff, #eaf1f5)
}
.ranking-item, .timeline-box {
    border: none;
}
.sns-share-message {
    font-size: 28px;
	  color:#aadb53
}
.sns-share-message:after {
content: "／";
padding-left:3px
}
.sns-share-message:before {
content: "＼";
padding-right:3px
}
#main .button-caption{
display: none;
}
#main .sns-share.ss-top.ss-col-6 a, .sns-share.ss-bottom.ss-col-6 a {
width: 16%;
background-color:#eaf1f5;
}
#main .sns-share.ss-high-and-low-lc a, .sns-share.ss-high-and-low-cl a {
max-height: 22px;
border-radius: 0px;
}
#main .sns-share.ss-high-and-low-lc a .social-icon, .sns-share.ss-high-and-low-cl a .social-icon, .sns-share.ss-high-and-low-lc a .button-caption, .sns-share.ss-high-and-low-cl a .button-caption {
font-size: 12px;
}
.wp-block-cocoon-blocks-iconlist-box {
    border: 3px solid #eaf1f5;
    color: #666;
}
.iconlist-title {
    border-bottom: dotted #eaf1f5;
    padding-bottom: 8px;
    margin-bottom: 12px;
    color: #666666;
}
.commets-list .comment-body, .commets-list .st-comment-body {
    margin-bottom: 1em;
    background: #eaf1f554;
    padding: 15px;
}
.timeline-box {
    border: 2px solid #aadb53;
}
.timeline-item-title {
    border-bottom: dotted #eaf1f5;
    padding-bottom: 5px;
}
.timeline-title {
    background: #aadb53;
    color: #fff;
    padding: 10px;
}
.timeline-box {
    padding: 0px 0px;
}
.timeline-item:before {
    content: '';
    width: 12px;
    height: 12px;
    background: #fff;
    border: #95c977 solid;
    position: absolute;
    left: 103px;
    top: 24px;
    border-radius: 100%;
}
.timeline-item-label {
    padding-top: 19px;
    color: #95c977;
}
.timeline-item-content {
    padding: 1.1em 1.4em;
    border-left: 3px #eaf1f5 solid;
}
.timeline-box .timeline {
    margin: 1em 0em;
}
.timeline-item-snippet {
    margin-top: 10px;
}
.blogcard-wrap {
    width: 100%;
}
.blogcard {
	  padding: 3% 2.2% 8%;
    border: 3px solid #eaf1f5;
}
.blogcard::after{
	font-weight: bold;
	color: #999		;
	content: 'この記事を読む >>>';
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-size: 80%;
	background-color: #eaf1f5;
	padding: 1px 10px;
}
.blogcard-footer.internal-blogcard-footer.cf {
    display: none;
}
.blogcard-footer {
  color: #777;
	font-size:85%
}
.blogcard {
    background: #eaf1f50f;
}
.blogcard-content.internal-blogcard-content {
    color: #444;
}
.blogcard-label {
    background-color: #EAF3F5;
    color: #666;
}
.btn:hover, .btn-wrap > a:hover {
    color: #9fb72c;
}
.btn, .btn-wrap > a, .wp-block-freeform .btn-wrap > a {
    background-color: #FFF;
    font-size: 16px;
    border: 2px solid #aadb53;
    color: #aadb53;
}
.micro-balloon {
    background-color: #FFC352;
    color: #fff;
}
.micro-balloon {
    border: none;
}
.micro-balloon:before {
    border-top-color: #FFC352;
}
.micro-balloon:after {
    border-top-color: #FFC352;
}
figcaption {
    text-align: center;
}
.wp-block-group.kaiwa {
    background: #eaf1f563;
    padding: 5px 10px;
}
.speech-icon img, .speech-icon amp-img {
    background: #fff;
}
.related-entry-heading,.comment-title,.widget_item_ranking .main-widget-label {
	  border-top:dotted;
	  padding-top:1em;
	  margin-top:1.5em;
    font-size: 28px;
	  color:#aadb53
}
.rect-vertical-card .related-entry-card-title {
    font-size: 14px;
    color: #888;
}
article.related-entry-card.e-card.cf:hover {
  filter: brightness(90%);
	transition:0.5s;
}
.article h1 {
    color: #555;
}
.article h2 {
    padding: 15px 25px;
    border-radius: 2px;
	  background:#aadb53;
    border-bottom-left-radius: 20px;
	  color:#fff;
}
.article h3 {
    border: none;
    border-left: 7px solid #aadb53 !important;
}
.article h4 {
    border-top: 2px solid #aadb53;
    border-bottom: 2px solid #aadb53;
}
.article h5, .article h6{
    border-color: #aadb53;
}
.pager-post-navi {
    border-top: dotted;
    padding-top: 1em;
    margin-top: 1.5em;
    color: #aadb53;
}
.date-tags {
    position: relative;
    bottom: 4.5rem;
    right: 0rem;
    color: #fff;
    line-height: 0.8;
    text-align: right;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
}
.toc-content {
    padding: 0.5em 1.2em;
}
.toc-title {
    background: #aadb53;
    color: #fff;
}
.toc {
    border: 1px solid #aadb53 !important;
    padding: 0em 0em;
    width: 90%;
	  margin-top: 3em;
}
.cat-link {
	background-color: #aadb53;
	opacity: 0.6;
}
a.follow-button >* {
    font-size: 16px;
}
#main a.follow-button {
    background-color: #eaf1f5 !important;
    max-height: 22px !important;
}
#main .sns-follow-message {
    font-size: 28px;
    color:#aadb53
}
@media screen and (max-width: 1023px){
.mblt-header-and-footer-mobile-buttons {
    margin-top: 56px;
}
.mblt-header-mobile-buttons {
    margin-top: 55px;
}
}
@media screen and (max-width: 834px){
#navi .navi-in > .menu-mobile li a {
    font-size: 12px;
}
#navi .navi-in > .menu-mobile li {
    width: 33%;
}
.navi-footer-in > .menu-footer li.menu-item {
    width: 30%;
}
}
@media screen and (max-width: 480px){
h1#archive-title {
    font-size: 18px;
}
div#header-container {
    padding: 2px !important;
}
.e-card-thumb.card-thumb img {
    border-bottom-left-radius: 15px;
}
.ranking-items p {
    font-size: 14px;
    margin-top: 1em;
}
	.timeline-item-content {
    border-left: none;
}
.timeline-item:before {
    left: -8.8px;
}
.eye-catch-wrap {
    width: 100vw;
    left: -16px;
    position: relative;
}
main#main {
    overflow:hidden
}
.entry-title{
    font-size: 18px;
    padding: 0.6em 0.2em;
}
}

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