「ASANO(アサノ)」は美容やオーガニック系のサイト・ブログを運営する人向けの無料のWordPressスキンテンプレートです。まずはデモサイトをご覧ください。
※本テンプレートはWordPressテーマ「Cocoon」(無料)の利用が必要になります。
※デザイン崩れについてはコメント欄からご連絡いただけますと幸いです。都度修正いたします。
テーマの特徴
10分でテーマの導入が可能
手順は2ステップ。サイトにWordPressテーマをインストール後、2つのステップでこのデザイン、配色にすることができます。おおよそ、10分でこのデザインにすることができます。
導入手順
- WordPressの設定変更(5分)
- デザインをコピー&ペースト(5分)
優しさとシンプルさの追究したデザイン
本テーマでは「やさしい見た目」をテーマに作成しており、全体的に余白を広めたデザインのテーマです。
例えば、読者が文章コンテンツに集中できるよう公開日、更新日を画像内へおさめたり、シェアボタンをシンプル化するなど引き算のデザインで設計しております。スマートフォンデザインもタイトルのみの追従デザイン、追従バーの透明化としており、よりコンテンツに集中しやすい形としています。
またデザイン側で色を指定しているため、自動的に全てのカラーが適用されます。色を変えたい場合はこちらをご覧ください。以下にギャラリー形式で特徴の一部をまとめているのでクリックしてご覧ください。
※店舗向けの電話番号デザインについて必要な方のみ追加で作業が必要となりますが、所要時間は20分以内で収まるような簡単な設計としています。後半の追加デザインで解説しています。
商用・個人利用ともに無料
当テンプレート「ASANO」は無料でお使いいただけます。当サイトへのリンクも必要ありません。ただし、無料で配布しておりますが、著作権は放棄しておりません。また再配布は固く禁じます。
もしよろしければ、Cocoon作者のわいひらさんの欲しいものリストのご送付をお願い致します。
導入手順
WordPressテーマであるCocoonをインストール下さい。手順は公式サイトをご覧ください。
サイドバーから「Cocoon管理」を選びます。

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

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


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

デザインコードをコピーしておきます。右側の青い「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; } }
ダッシュボードのカスタマイズを選びます。

追加CSSを開きます。

追加CSSに貼り付けて終了です。お疲れ様でした。

注意点
AMPについて
AMPには非対応です。
display:none処理について
本テーマはあくまでもCSSなどが分からない初心者向けに作ったテーマです。そのため、デザインを優先するために一部の機能を消しています(例えば、モバイル追尾ヘッダーの検索とメニューボタンは消しています)。その点ご了承ください。
追加デザイン
デモサイトと完全に同じようにするためには以下を追加ください。
キーカラーについて
本テーマは3色のカラーで構成されています。使っている色は以下の通りです。
キーカラー
- #aadb53
- #95c977
- #EAF3F5
この3色を変更するだけで、カラーの変更が可能です。コードをコピー後、メモ帳などで各カラーコードを一括置換すれば、自分の好きなテイストの色合いに変更することができます。配色に悩む場合は、3色でセンスの良い色を参考にしてみて下さい。おすすめの本です。
変更履歴
- 2020/07/19 ブログカードがはみ出す現象があったため修正
- 2020/07/16 デザインデータの一部修正
- 2020/07/15 デザインデータ公開
質問・問い合わせについて
ASANOに関する問い合わせはこの記事のコメント欄より投稿ください。DMや問い合わせフォームからは対応しておりません。
コメント