「YOKONO（ヨコノ）」はサイドバーを固定した無料のWordPressスキンテンプレートで、カテゴリやタグページを効率的に見せたい情報サイトや地域サイトに適したデザインになっています。
まずは以下のボタンより、デモサイトをご覧ください。
※本テンプレートはWordPressテーマ「Cocoon」（無料）の利用が必要になります。
※デザイン崩れについてはコメント欄からご連絡いただけますと幸いです。都度修正いたします。
目次
テーマの特徴
とても簡単な設定
手順は2ステップ。サイトにWordPressテーマをインストール後、2つのステップでこのデザイン、配色にすることができます。おおよそ、10分でこのデザインにすることができます。
導入手順
- WordPressの設定変更（5分）
- デザインをコピー&ペースト（5分）
固定サイドバーによるハブページへの誘導をやり易く
本テーマはサイドバーを画面固定できることを特徴としたデザインです。
以下にギャラリー形式でその他の特徴の一部をまとめているのでクリックしてご覧ください。
商用・個人利用ともに無料でお使いいただけます
当テンプレート「YOKONO（ヨコノ）」は無料でお使いいただけます。当サイトへのリンクも必要ありません。もしよろしければ、Cocoon作者のわいひらさんの欲しいものリストのご送付をお願い致します。
無料で配布しておりますが、著作権は放棄しておりません。また再配布は固く禁じます。
導入手順
STEP
Cocoonのインストール
WordPressテーマであるCocoonをインストール下さい。手順は公式サイトをご覧ください。
STEP
Cocoon管理設定を調整する
Cocoon管理 > SNSシェアのタブを選択し、ボトムシェアボタンの下部を6列、ロゴ・キャプション上下に変更してください。
STEP
デザインを張り付ける
デザインコードをコピーしておきます。右側の青い「COPY」ボタンで一括コピーできます。
.footer {
border-top:solid #26B9C8;
background-color:#f2f2f2;
}
.recentcomments a {
color: #fff;
}
.entry-card-snippet, .related-entry-card-snippet {
font-size: 0.7em;
color: #666;
}
.content {
background: #fff;
}
.widget_recent_comments li {
font-size: 14px;
}
.header {
height: 100%;
background-color: #26B9C8;
}
.sidebar h3 {
padding: 4px;
font-size: 14px;
background: transparent;
color: #fff;
border-bottom: solid 2px #fff;
}
#sidebar .ribbon {
width: 58px;
height: 60px;
}
#sidebar .ribbon-top-left:before {
right: 0px;
}
#sidebar .ribbon-top-left span {
top: 11px;
}
#sidebar .ribbon span {
width: 165px;
}
#sidebar .widget-entry-card-content {
color: #fff;
}
.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: #fff;
font-size: 14px;
}
.site-name-text-link {
color: #fff;
}
.site-name-text-link:hover {
color: #666;
transition:0.3s;
}
.logo-text {
padding: 2px 0 2px;
}
.navi-in a:hover {
background-color: transparent;
transition: all 0.3s ease-in-out;
color: #333;
border-bottom: solid 3px #EDE048;
}
.navi {
border-bottom: 3px solid #26B9C8;
}
.navi-in a {
font-size: 14px;
}
.notice-area {
padding: 0.2em;
background: #EDE048;
color:#666
}
div#notice-area:after {
content: ">";
padding-left: 5px;
}
.wp-block-cocoon-blocks-iconlist-box {
border: 3px solid #26b9c880;
color: #666;
}
.iconlist-title {
border-bottom: dotted #26b9c880;
padding-bottom: 8px;
margin-bottom: 12px;
color: #666666;
}
.blogcard-wrap {
width: 100%;
}
.blogcard {
padding: 3% 2.2% 8%;
border: 3px solid #26b9c842;
}
.blogcard::after{
content: 'あわせて読む \00bb';
position: absolute;
bottom: 0rem;
right: 0rem;
font-size: 80%;
background-color: #26b9c842;
padding: 1px 10px;
font-weight: bold;
color: #999 ;
border-radius: 2px;
}
.blogcard-footer.internal-blogcard-footer.cf {
display: none;
}
.blogcard-footer {
color: #777;
font-size:85%
}
.blogcard {
background: #fff;
}
.blogcard-content.internal-blogcard-content {
color: #444;
}
.blogcard-label {
background-color: #fff;
color: #666;
}
.timeline-box {
border: 2px solid #26B9C8;
}
.timeline-item-title {
border-bottom: dotted #26b9c80d;
padding-bottom: 5px;
}
.timeline-title {
background: #26B9C8;
color: #fff;
padding: 10px;
}
.timeline-box {
padding: 0px 0px;
}
.timeline-item:before {
content: '';
width: 12px;
height: 12px;
background: #fff;
border: #26B9C8 solid;
position: absolute;
left: 103px;
top: 24px;
border-radius: 100%;
}
.timeline-item-label {
padding-top: 19px;
color: #26B9C8;
}
.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;
}
.commets-list .comment-body, .commets-list .st-comment-body {
margin-bottom: 1em;
background: #26b9c80d;
padding: 15px;
}
.commets-list .avatar {
border-radius: 50%;
}
.rect-vertical-card-3 .related-entry-card-wrap,.rect-vertical-card-4 .related-entry-card-wrap {
box-shadow: 0 3px 4px rgba(0,0,0,.1);
}
.rect-vertical-card-3 .related-entry-card-wrap:hover,.rect-vertical-card-4 .related-entry-card-wrap:hover {
box-shadow: none;
background-color:transparent;
transition: all 0.3s ease-in-out;
}
.toc-content {
padding: 0.5em 1.2em;
}
.toc-title {
background: #26B9C8;
color: #fff;
font-family: 'Montserrat Subrayada', sans-serif;
}
.toc {
border: 1px solid #26B9C8 !important;
padding: 0em 0em;
width: 90%;
margin-top: 3em;
}
.article h1 {
color: #555;
}
.article h2 {
padding: 15px 25px;
border-radius: 2px;
background:#26B9C8;
color:#fff;
}
.article h3 {
border: none;
border-left: 7px solid #26B9C8 !important;
}
.article h4 {
border-top: 2px solid #26B9C8;
border-bottom: 2px solid #26B9C8;
}
.article h5, .article h6{
border-color: #26B9C8;
}
@media screen and (max-width: 480px){
.entry-title{
font-size: 18px;
padding: 0.6em 0.2em;
}
}
#main a.follow-button >* {
font-size: 16px;
}
#main a.follow-button {
background-color: #EDE048 !important;
max-height: 22px !important;
border-radius: 0px;
}
#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:#EDE048;
}
#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;
}
#footer .site-name-text {
color: #666;
}
.footer-widgets, .footer-widgets-mobile {
display: inline;
}
.footer-left, .footer-center, .footer-right {
margin: auto;
width: 60%;
}
#footer span.popular-entry-card-title {
color: #333;
}
.sidebar {
background-color: #26B9C8;
border-radius: 0px;
}
#sidebar ul,#sidebar-menu-content ul{
padding: 0 0em;
position: relative;
}
#sidebar ul li,#sidebar-menu-content ul li{
line-height: 1.5;
padding: 3px 4px ;
list-style-type: none!important;
}
#sidebar .widget ul li a,#sidebar-menu-content .widget ul li a{
display: block;
color: #fff;
text-decoration: none;
font-size:14px;
padding: 10px 4px ;
}
#sidebar .widget ul li a:hover, #sidebar-menu-content .widget ul li a:hover{
background: #efefef;
transition: 0.3s ease-in-out;
color:#666;
}
.circle-image img {
border: solid 3px #26B9C8;
}
.author-widget-name {
padding: 5px 2px;
color: #666;
}
.nwa .author-box {
background:#fff;
border: none;
border-radius: 0px;
}
.author-description {
font-size: 12px;
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-color:#26B9C8;
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;
}
.author-box .sns-follow-buttons a.follow-button:hover {
background-color: #26b9c880;
}
#footer .author-box.border-element.no-icon.cf {
background: transparent;
}
#sidebar .widget-entry-cards figure {
width: 80px;
}
#sidebar .widget-entry-card-content {
margin-left: 86px;
}
#sidebar .new-entry-card-title.widget-entry-card-title.card-title,.popular-entry-card-title.widget-entry-card-title.card-title {
font-size: 14px;
color:#fff
}
.search-edit, input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], select {
padding: 11px;
border: 1px solid #fff;
border-radius: 0px;
font-size: 12px;
width: 100%;
background: #fff;
}
div#sidebar-menu-content{
background:#26B9C8;
}
#slide-in-sidebar {
background: transparent;
}
.a-wrap:hover {
background-color: transparent;
transition: all 0.3s ease-in-out;
color: #333;
opacity: 0.5;
}
@media screen and (min-width: 1023px){
.sidebar {
margin:0px;
width: 300px;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
overflow-y: scroll;
border-right: 2px solid #fff;
background-color:#26B9C8;
padding: 40px 15px 0px !important;
}
.wrap {
width: 723px;
}
.content-in {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
body {
color: #333;
padding-left: 300px;
background-color:#fff;
}
.main {
width: 100%;
}
}
@media screen and (max-width: 834px){
#header .site-name-text {
font-size: 32px;
}
}
@media screen and (max-width: 480px){
.timeline-item-content {
border-left: none;
}
.timeline-item:before {
left: -8.8px;
}
}
.cat-label {
display: none;
}
.tagline {
display: none;
}
.author-info {
display: none;
}
p.wp-block-rinkerg-gutenberg-rinker.gutenberg-yyi-rinkernone:before,.sidebar h3,.footer-title,.site-name-text,.footer-bottom.fnm-text-width .menu-footer li a,.navi-in > ul .menu-item-has-description > a > .caption-wrap > div,.navi-in > ul .menu-item-has-description > a > .caption-wrap > div,.mobile-menu-buttons .menu-button > a,.sns-share-message,.related-entry-heading,.comment-title,.widget_item_ranking .main-widget-label,.toc-title,#navi .navi-in > .menu-mobile li a,.sns-follow-message
{
font-family: 'Montserrat Subrayada', sans-serif;
}
ダッシュボードのカスタマイズを選びます。
追加CSSに貼り付けて終了です。お疲れ様でした。
注意点
【重要】フッターの使い方が通常と異なります
Cocoonにはウィジェットとして、左・中央・右・モバイルフッターがありますが、仕様上シングルカラムにしているため、「左フッター」のみでお使いください（PCでもモバイルでも同じものが表示されるようになっています）。
AMPについて
AMPには非対応です。
サイドバーの新着記事・人気記事について
「大きなサムネイル」「タイトルを重ねた大きなサムネイル」には非対応です。
display:none処理について
本テーマはあくまでもCSSなどが分からない初心者向けに作ったテーマです。そのため、デザインを優先するために一部の機能を消しています（display:none処理）。消しているのは以下の通りです。必要に応じてCSSからnone処理を消すようにして下さい。
処理済みのラベル
- カテゴリラベル（cat-label）
- タグライン（tagline）
- 著者（author-info）
追加デザイン
デモサイトと完全に同じようにするためには以下を追加ください。
文字サイズの変更手順
関連記事をカード形式にする
タブ形式にする
関連記事やコメント欄のナビゲーションをを英語にする
英語用の特殊フォントを入れる
キーカラーについて
本テーマは3色のカラーで構成されています。使っている色は以下の通りです。
キーカラー
- #26b9c8 (青)
- #ede048 (黄)
- #f2f2f2 (灰)
この3色を変更するだけで、カラーの変更が可能です。コードをコピー後、メモ帳などで各カラーコードを一括置換すれば、自分の好きなテイストの色合いに変更することができます。
以下はカラーを変更した例です。クリックで拡大できます。
変更履歴
- 2020/07/25 フッターの人気記事の文字色修正
- 2020/07/20 デザインデータ公開
質問・問い合わせについて
YOKONO（ヨコノ）に関する問い合わせはこの記事のコメント欄より投稿ください。DMや問い合わせフォームからは対応しておりません。
コメント