【Cocoon】カスタマイズまとめ スキンオレンジカラー 20190109

Cocoonカスタマイズまとめ

これまでエントリー記事として掲載してきたWordPressテーマ Cocoonのカスタマイズによって、このMASAa.netのデザインが確立されています。

そこで今回は、2019年1月9日時点のまとめとして、これまでアップしてきたカスタマイズをWordPressテーマ Cocoon用スキンとして掲載してみました。

今回アップするスタイルシート(style.css)とCocoonの設定を行うことで、このMASAa.netと同じデザインとなります。

MASAa.netのテーマカラーはピンクですが、今回アップするテーマカラーはオレンジとしてみました（WordPressテーマ Cocoon用スキン オレンジカラー 20190109）。

Cocoon設定内容

先ずはテーマカラーのオレンジに従って、Cocoonの設定内容を変更します。

変更する設定箇所と変更内容は下記の通りです。

• 全体タグ～全体設定
  キーカラー ー サイトキーカラー：#fe9B61
  サイトリンク色：#fe9B61
• ヘッダータグ～ヘッダー設定
  ヘッダー全体色 ー ヘッダー全体背景色：#fe9B61
  ヘッダー色（ロゴ部）ー ロゴエリア背景色：#fe9B61
  グローバルナビメニュ ー 色ーグローバルナビ色：#fe9B61
• カラム～メインカラム設定
  サイドバー設定 ー サイドバー枠設定：#fe9B61
• フッター～フッター設定
  フッター色：フッター背景色：#fe9B61
• ボタン～トップへ戻るボタン設定
  ボタン色ー背景色：#fe9B61

ヘッダーメニュー画像

ヘッダーメニューには、png画像が使われています。

今回オレンジのヘッダーメニュー画像を用意しました。

このヘッダーメニュー画像を保存して、自分が使っているサーバーにアップします。

なお、画像にリンクを行わずに必ずダウンロードしてご利用下さい（一定期間後削除します）。

カスタマイズ内容

これまでエントリー記事としてアップしてきたカスタマイズをまとめたものが下記となります。、

ヘッダーメニュー画像を指定します（※721行目辺りpngを検索して下さい）。

後は初期状態の「スタイルシート(style.css)」に貼り付ければ完了です。

/************************************
** ●見出しカスタマイズ(h1-6)
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
}

.article h1{ /*見出し１（タイトル）カスタマイズ*/
  background: #ffeedd; /*背景カラー*/
  font-size: 22px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: -8px -8px 20px -8px;
  padding: 9px 10px 9px 10px;
  border-left: 10px solid #fe9B61; /*左ラインの太さとカラー*/
  line-height: 35px; /*高さ*/
  border-radius: 3px; /*角丸コーナー*/
}

.article h2{ /*見出し２カスタマイズ*/
  background: #fff9f2; /*背景カラー*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 10px 7px 10px 10px;
  border-left: 7px solid #fe9B61; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #fe9B61; /*アンダーラインの太さとカラー*/
  line-height: 27px; /*高さ*/
}

.article h3{ /*見出し３カスタマイズ*/
  background: #fff9f2; /*背景カラー*/
  font-size: 18px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 9px 7px 9px 10px;
  border-left: 5px solid #fe9B61; /*左ラインの太さとカラー*/
  line-height: 25px; /*高さ*/
}

.article h4{ /*見出し４カスタマイズ*/
  background: #fff9f2; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 8px 7px 8px 10px;
  border-left: 2px solid #fe9B61; /*左ラインの太さとカラー*/
  line-height: 23px; /*高さ*/
}

.article h5{ /*見出し５カスタマイズ*/
  background: #fff9f2; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px 20px 20px 20px;
  padding: 5px 5px 5px 5px;
  border: 1px solid #fe9B61; /*周囲ラインの太さとカラー*/
  line-height: 27px; /*高さ*/
  text-align: center; /*文字位置中央*/
  border-radius: 6px; /*角丸コーナー*/
  box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
}

.article h6{ /*見出し６カスタマイズ*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px 0px 20px 0px;
  padding: 8px 16px 8px 25px;
  line-height: 25px; /*高さ*/
  background-color: #ffeedd; /*背景カラー*/
  border-radius: 10px; /*角丸コーナー*/
  position: relative;
}
.article h6::after{ /*見出し６の逆三角部分のカスタマイズ*/
  position: absolute;
  top: 100%;
  left: 20px;
  content: '';
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 13px solid #ffeedd;
}

/************************************
** ●カテゴリー／アーカイブ見出しカスタマイズ
************************************/
#archive-title{
  padding-bottom:8px; /*下に余白*/
  font-size: 22px; /*フォントサイズ*/
  text-align: center; /*文字位置中央*/
  letter-spacing: 4px; /*文字間隔*/
}

/************************************
** ●関連記事見出しカスタマイズ
************************************/
.related-entry-heading{
  font-size: 22px; /*フォントサイズ*/
  text-align: center; /*文字位置中央*/
  letter-spacing: 4px; /*文字間隔*/
  margin-top:40px; /*上余白*/
  margin-bottom:8px; /*下余白*/
}

/************************************
** ●関連記事カスタマイズ
************************************/
.related-entry-card-wrap.a-wrap.cf{ /*下余白クリア*/
  margin-bottom:0px;
  padding-bottom:0px;
}
.related-entry-card-content.card-content.e-card-content{ /*カード下余白設定*/
  padding-bottom:16px;
}
.related-entry-card-title.card-title.e-card-title{
  font-size: 16px; /*フォントサイズ*/
  height: 67px!important; /*メニュー縦幅設定*/
  display: flex;
  align-items: center; /*縦中央寄せ*/
}
/* スマホでのフォントサイズと下余白 */
@media screen and (max-width: 1030px){
  .related-entry-card-title.card-title.e-card-title{
    font-size: 14px;
  }
  .related-entry-card-content.card-content.e-card-content{
    padding-bottom:0px;
  }
}

/************************************
** ●関連記事のサムネイル画像カスタマイズ
************************************/
.related-entry-card-thumb-image.card-thumb-image.wp-post-image{
  border-radius: 4px!important;/*角丸コーナー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3)!important;/*シャドー*/
}

/************************************
** ●サイドバータイトル カスタマイズ
************************************/
#sidebar h3{
  color: #333; /*フォントカラー*/
  background: #fff9f2; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 8px; /*文字間隔*/
  text-align: center; /*文字位置中央*/
  margin: 10px 0px 20px 0px;
  padding: 10px 10px 10px 10px;
  border-left: 6px solid #fe9B61; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #fe9B61; /*アンダーラインの太さとカラー*/
  line-height: 100%;
}

/************************************
** ●サイドバータイトル スライドインボタン設定時カスタマイズ
************************************/
#sidebar-menu-content h3{
  color: #333; /*フォントカラー*/
  background: #fff9f2; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 8px; /*文字間隔*/
  text-align: center; /*文字位置中央*/
  margin: 10px 0px 20px 0px;
  padding: 10px 10px 10px 10px;
  border-left: 6px solid #fe9B61; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #fe9B61; /*アンダーラインの太さとカラー*/
  line-height: 100%;
}

/************************************
** ●サイドバー カスタマイズ
************************************/
#sidebar .widget{
  margin-top:12px; /*上隙間設定 34px*/
  margin-bottom: 35px; /*下隙間設定*/
  line-height: 120%; /*行の高さ指定*/
}
.sidebar.nwa.cf{
  padding-top: 10px; /*Googleアドセンス表示時（無いときは0px設定）*/
}

/************************************
** ●コンテンツ領域の上下間調整
************************************/
.content {
  margin-top: 28px; /*ヘッダーとコンテンツ間の縦幅*/
  margin-bottom: 28px /*フッターとコンテンツ間の縦幅*/
}

/*****************************
** ●エントリー記事内の画像に影を付ける
*****************************/
.shadow1{
  box-shadow:  5px 5px 5px #999;
}

/*****************************
** ●記事中の画像に枠を表示する場合は、class="border"を指定する
*****************************/
.border{
  border: 1px solid #ccc !important;
}

/************************************
** ●行間と改行幅 カスタマイズ
************************************/
.entry-content p{
  line-height: 2.4; /*行間*/
  margin: 0 0 1.2em; /*改行幅*/
}

/*****************************
** ●キーボードキー風の影を消す
*****************************/
.keyboard-key{
  box-shadow: none;
}

/************************************
** ●リンクテキスト カスタマイズ
************************************/
a{ /*リンクテキスト装飾無し*/
  text-decoration: none;
}
.post a:hover { /*リンクテキストホバー時アンダーライン表示*/
  text-decoration: underline;
}
.share-button{ /*シェアボタン装飾無し*/
  text-decoration: none!important;
}
.follow-button{ /*フォローボタン装飾無し*/
  text-decoration: none!important;
}
.cat-link{ /*カテゴリーラベル装飾無し*/
  text-decoration: none!important;
}
.tag-link{ /*タグラベル装飾無し*/
  text-decoration: none!important;
}
.blogcard-wrap.external-blogcard-wrap.a-wrap.cf,
.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf { /*ブログカード装飾無し*/
  text-decoration: none!important;
}

/*****************************
** ■目次カスタマイズ
*****************************/
.toc {
  border: 2px solid #fe9B61; /*全体の枠線の色*/
  font-size: 14px; /*フォントサイズ*/
  line-height: 1.5; /*行の高さ指定*/
  padding: 0;
  margin-top: 3em; /*目次上の空間*/
  margin-bottom: 1em; /*目次下の空間*/
  min-width:65%; /*目次横幅*/
  border-radius: 6px;/*角丸コーナー*/
  background: #fffcf9; /*背景カラー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
@media screen and (max-width: 1030px){
  .toc {
    min-width:100%; /*モバイル時の目次横幅*/
  }
}
.toc-title {
  background: #fe9B61; /*目次タイトル背景カラー*/
  color: #fff; /*目次タイトルフォントカラー*/
  font-size: 16px; /*目次タイトルフォントサイズ*/
  text-align: center; /*目次タイトル中央寄せ*/
  padding: 6px 16px;
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
}
.toc-title::before {
  font-family: FontAwesome;
  content: '\f0f6'; /*目次タイトルのアイコン指定*/
  margin-right: 0.3em;
  font-weight: 500; /*アイコンの太さ*/
  font-style: normal; /*通常フォント*/
}
.toc-content {
  padding: 6px;
}
.toc-content li a:hover {
  text-decoration:none; /*選択時装飾無し*/
  background: #ffeed3; /*選択時の背景カラー*/
  transition: all 0.8s ease; /*ふわっと変化するアニメーション*/
}
.toc ul.toc-list>li, .toc ol.toc-list>li {
  margin-top: 0.4em; /*h2の上側の空間*/
}
.toc ul.toc-list>li>a, .toc ol.toc-list>li>a {
  border-bottom: 1px solid #fe9B61; /*h2のアンダーラインの太さとカラー*/
  font-weight: bold;
}
.toc ul li a, .toc ol li a {
  display: block;
  border-bottom: 1px dotted #fe9B61; /*h3～h6のアンダーラインの太さとカラー*/
  margin-left: -20px; /*アンダーライン調整*/
  padding-left: 20px; /*アンダーライン調整*/
}

/************************************
** ●カテゴリーのカスタマイズ
************************************/
.widget_categories ul li a{ /*親カテゴリー設定*/
  text-decoration: none; /*テキスト装飾無し*/
  color: #333; /*文字色*/
  font-size: 15px; /*フォントサイズ*/
  font-weight: bold; /*文字強調★*/
  display: block; /*ブロックボックス生成*/
  padding: 4px 4px 2px 10px; /*上下左右空間*/
  border-bottom: 1px dashed #ffe0c5; /*親カテゴリー下側にボーダーライン*/
}
.widget_categories ul li a::before{ /*親カテゴリーのアイコン設定*/
  font-family: FontAwesome;
  content: "\f07c";
  color: #fe9B61;
  padding-right: 6px; /*アイコン右側空間*/
  font-weight: 500; /*文字強調クリア★*/
}
.widget_categories > ul > li > a:first-child{ 
  border-top: none; /*最初の親カテゴリー上側のボーダー削除*/
}

.widget_categories ul li ul li a{ /*子カテゴリー設定*/
  text-decoration: none; /*テキスト装飾無し*/
  color: #333; /*文字色*/
  display: block; /*ブロックボックス生成*/
  padding: 4px 4px 2px 10px; /*上下左右空間*/
  border-bottom: 1px dashed #ffe0c5; /*子カテゴリー下側にボーダーライン*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
  font-family: FontAwesome;
  content: "\f115";
  color: #fe9B61;
  padding: 0px 6px 0px 2px; /*アイコン右側空間*/
}

.widget_categories ul li a .post-count{ /*記事数設定*/
  display: inline-block; /*インラインボックス生成*/
  float: right; /*右寄せ配置*/
  margin-left: 8px; /*右側空間*/
  color: #fe9B61; /*文字色*/
  background: #ffeedd; /*背景色*/
  font-weight: bold; /*文字強調*/
  font-style: oblique; /*斜体フォント*/
  font-size: 14px; /*フォントサイズ★12px*/
  white-space: nowrap; /*1つの空白にまとめて表示。折り返し無し。*/
  line-height: 1.4; /*行の高さ★1.1*/
  padding: 0px 10px 0px 10px; /*上下空白★*/
  text-decoration: none; /*テキスト装飾無し*/
  border-radius: 2px; /*角丸コーナー*/
}

.widget_categories ul li a:hover{ /*マウスホバー時設定*/
  background: #ffeedd; /*背景色*/
  color: #333; /*文字色*/
  transition: all 0.8s ease; /*アニメーション*/
}
.widget_categories ul li a:hover .post-count{ /*記事数のマウスホバー時設定*/
  background: #fe9B61; /*背景色*/
  color: #fff; /*文字色*/
  transition: all 0.8s ease; /*アニメーション*/
}

/************************************
** ●記事一覧（インデックス）のカスタマイズ
************************************/
.main{
  border:1px solid #fe9B61!important; /*コンテンツ枠線設定（インデックスページ除く）*/
}
.home main, .archive main{
  background-color: transparent;
  margin-top: 0px; /*記事一覧上マージン*/
  padding-top: 1px; /*記事一覧下マージン*/
  border: none!important;
}
.entry-card-wrap{ /*エントリーカード設定*/
  transition: all 0.5s ease;
  margin-bottom: 1em!important;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 0px 0px 1px rgba(254,155,97,1);
}
.entry-card-thumb.card-thumb.e-card-thumb { /*サムネイル画像をサイズ調整でボケ解消*/
  max-width: 376px;
  max-height: 211px;
  text-align:center;
}
.entry-card-thumb-image.card-thumb-image.wp-post-image{ /*サムネイル画像設定*/
  border-radius: 4px;
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3);
}
.entry-card-wrap:hover{ /*エントリーカード ホバー時設定*/
  box-shadow: 0px 0px 10px 3px rgba(254,155,97,1);
  text-decoration: none!important;
  background-color: white;
}
.entry-card-wrap.a-wrap:hover{ /*エントリーカード ホバー時設定*/
  background-color: white;
}
.entry-card:hover{ /*エントリーカード ホバー時設定*/
  background-color: white;
}
.entry-card-snippet.card-snippet.e-card-snippet{
  font-size: 14px; /*フォントサイズ★*/
  margin-bottom:8px; /*説明文と日付間の余白*/
  color: #333;
}
.entry-card-title{ /*タイトル設定*/
  margin-top: 14px; /*サムネイルとタイトル間の余白*/
  line-height: 1.4; /*行間設定*/
  color: #333; /*タイトルの色*/
}
.entry-card-title:hover{ /*タイトル ホバー時設定*/
  color: #333; /*マウスホバー時の色*/
}
@media screen and (max-width: 1030px){ /*タイトル スマホ表示設定*/
  .entry-card-title{
    font-size: 14px; /*スマホでのフォントサイズ*/
    margin-top: 6px; /*サムネイルとタイトル間の余白*/
    line-height: 1.4; /*スマホでの行間*/
  }
}
.e-card-info{ /*日付表示設定*/
  color: #333; /*日付の色*/
}

/************************************
** ●エントリーカードラベル非表示
************************************/
.entry-card .cat-label{
  display: none;
}
.related-entry-card .cat-label{
  display: none;
}

/************************************
** ●カテゴリーラベルのカスタマイズ
************************************/
.cat-link{ /*カテゴリーラベル*/
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*フォントカラー*/
  font-size: 12px; /*フォントサイズ*/
  background-color: #fe9B61; /*背景色*/
  display: inline-block; /*横並びで上下左右空白有り*/
  margin-right: 5px; /*内側右余白*/
  padding: 2px 6px 0px 6px; /*外側余白*/
  border-radius: 9px 3px; /*カテゴリ背景デザイン*/
  border: 0px; /*枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}
.cat-link:hover{ /*カテゴリーラベル マウスホバー時*/
  transition: all 0.8s ease; /*アニメーション*/
  opacity: 0.6; /*不透明度*/
  color: #fff; /*フォントカラー*/
  background-color: #fe9B61; /*背景色*/
}

/************************************
** ●タグラベルのカスタマイズ
************************************/
.tag-link{ /*タグラベル*/
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*フォントカラー*/
  font-size: 12px; /*フォントサイズ*/
  background-color: #fe9B61; /*背景色*/
  display: inline-block; /*横並びで上下左右空白有り*/
  margin-right: 5px; /*内側右余白*/
  padding: 2px 6px 0px 6px; /*外側余白*/
  border-radius: 9px 3px; /*カテゴリ背景デザイン*/
  border: 0px; /*枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}
.tag-link:hover{ /*タグラベル マウスホバー時*/
  transition: all 0.8s ease; /*アニメーション*/
  opacity: 0.6; /*不透明度*/
  color: #fff; /*フォントカラー*/
  background-color: #fe9B61; /*背景色*/
}

/************************************
** ●日付のカスタマイズ
************************************/
.date-tags{
  line-height: 1.4; /*行間設定*/
  color: #333; /*文字色*/
}
.post-date, .post-update{
  font-size: 14px; /*フォントサイズ*/
  padding-right: 4px; /*右余白*/
  display: inline; /*横並びで縦中央揃え*/
}
.post-date::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f093"; /*fa-uploadアイコン*/
  padding-right: 4px; /*右余白*/
}
.post-update::before{ /*アイコンの変更*/
  font-family: FontAwesome;
  content: "\f148"; /*fa-level-upアイコン*/
  padding-right: 4px; /*右余白*/
}

/************************************
** ●ページ送りボタン／戻りボタンのカスタマイズ
************************************/
.pagination-next,
.pager-prev-next{ /*次のページ*/
  border: solid 1px #fe9B61; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  transition: all 0.8s ease; /*アニメーション*/
}
.page-numbers{ /*現ページ以外のページ番号*/
  background-color: #ffffff; /*背景色*/
  border: solid 2px #fe9B61; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  font-family: sans-serif; /*フォントゴシック指定*/
  font-size: 120%; /*フォントサイズ*/
  color: #fe9B61; /*文字色*/
  font-weight: bold; /*文字強調*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
  transition: all 0.8s ease; /*アニメーション*/
}
.pagination a.page-numbers: hover { /*現ページ以外のページ番号のホバー時*/
  background-color: #fe9B61; /*マウスオーバー時の背景色*/
  color: #ffffff; /*マウスオーバー時の文字色*/
}
.pagination .current { /*現ページ番号*/
  background-color: #ffeedd; /*背景色*/
  border: solid 2px #fe9B61; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  font-family: sans-serif; /*フォントゴシック指定*/
  font-size: 120%; /*フォントサイズ*/
  color: #fe9B61; /*文字色*/
  font-weight: bold; /*文字強調*/
  box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
.pagination-next-link.key-btn { /*次のページ★*/
  font-weight: bold; /*文字強調*/
}

/************************************
** ●人気記事ランキング表示のカスタマイズ
************************************/
 /*順位数表示のカスタマイズ*/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{
  background-color: #ffeedd!important; /*ランキング数字の背景色を統一する*/
  color:#f36924; /*ランキング数字のカラー*/
  top: -4px;
  left: -4px;
  border-radius: 6px; /*角丸コーナー*/
  border:solid 2px #f36924; /*ランキング数字の枠のカラー*/
  width: 15px;
  height: 12px;
  line-height: 12px;
  font-weight: bold;
  font-style: oblique;
}
/*タイトル縦中央*/
.popular-entry-card-title.widget-entry-card-title.card-title{
  height: 67px!important; /*メニュー縦幅設定*/
  display: flex;
  align-items: center; /*縦中央寄せ*/
}
/*フォントサイズ*/
.popular-entry-card-title{
  font-weight: bold; /*文字強調★*/
  font-size: 14px;
}
/*モバイル表示のフォントサイズ*/
@media screen and (max-width: 480px){
  .popular-entry-card-title{
    font-size: 12px;
  }
}
/*ランキング間の隔幅調整*/
.popular-entry-card-link.a-wrap{
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top: 2px;
  margin-bottom: 2px;
}
/*サムネイル画像加工*/
.attachment-thumb120.size-thumb120.wp-post-image{
  border-radius: 3px; /*角丸コーナー*/
  box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}

/************************************
** ●サムネイル画像のホバー時エフェクト処理
************************************/
/*記事一覧の画像*/
.entry-card:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*記事一覧画像の画像*/
.entry-card-wrap.a-wrap:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*人気記事の画像*/
.popular-entry-card-link.a-wrap:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*関連記事の画像*/
.related-entry-card-wrap.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*次の記事の画像*/
.prev-post.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*前の記事の画像*/
.next-post.a-wrap.cf:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*ブログカードの画像*/
.blogcard:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*ブログカード画像の画像*/
.blogcard-thumbnail:hover figure img{
  opacity: 0.6;
  transition: all 0.8s ease;
}
/*タイトル画像*/
.site-name-text:hover img{
  opacity: 0.6;
  transition: all 0.8s ease;
}

/************************************
** ●検索ウィンドウと月選択ウィンドウの枠線のカラー（フォーカス時）
************************************/
.search-edit:focus{ /*検索ウィンドウ（フォーカス時）*/
  outline: none;
  border-color: #fe9B61; /*フォーカス時の枠カラー*/
}
#archives-dropdown-3:focus{ /*月選択ウィンドウ（フォーカス時）*/
  outline: none;
  border-color: #fe9B61; /*フォーカス時の枠カラー*/
}
.goog-te-combo:focus{ /*Google翻訳の言語選択ウィンドウ（フォーカス時）*/
  outline: none;
  border-color: #fe9B61; /*フォーカス時の枠カラー*/
}

/************************************
** ●ホバー時の背景色設定
************************************/
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.navi-in a:hover,
.navi-footer-in a:hover,
.a-wrap:hover,
.comment-reply-link:hover,
.recent-comments .a-wrap:hover .recent-comment-content,
.pagination a:hover,
.pagination-next-link:hover, .comment-btn:hover,
.pager-links a:hover span,
.pager-links a:hover span,
.mobile-menu-buttons .menu-button:hover,
.menu-drawer a:hover,
.bp-login-widget-register-link a:hover{
  background-color: #ffeedd; /*背景色*/
  transition: all 0.8s ease; /*アニメーション*/
  color: #333; /*フォントカラー*/
}

/************************************
** ●スマホ時のタイトルロゴのサイズ設定
************************************/
@media screen and (max-width: 1030px){
  .logo img {
    width: 237px !important; /*ロゴ横サイズ*/
    height: 49px !important; /*ロゴ縦サイズ*/
  }
}

/************************************
** ●ヘッダーメニューカスタマイズ
************************************/
.navi.cf,
.navi-in.wrap.cf,
.menu-header,
.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu-item.current_page_item.menu-item-home,
.menu-item.menu-item-type-custom.menu-item-object-custom{
  height: 44px!important; /*メニュー縦幅設定*/
}
.navi.cf{
  background: url(https://○○○○/menu_backgroundimage_o.png) center repeat; /*バックグラウンド画像指定*/
}
.caption-wrap{
  height: 44px!important; /*メニュー縦幅設定*/
  display: flex; /*並列スタイル指定*/
  align-items: center; /*縦中央寄せ*/
  justify-content: center; /*横中央寄せ*/
  font-weight: bold; /*文字強調*/
}

/************************************
** ●フッターメニューカスタマイズ
************************************/
.footer.footer-container.nwa,
.footer-in.wrap.cf,
.footer-bottom.fdt-up-and-down.fnm-text-width.cf
{
  height: 120px!important; /*メニュー縦幅設定*/
  display: flex; /*並列スタイル指定*/
  align-items: flex-end; /*縦中央寄せ*/
  justify-content: center; /*横中央寄せ*/
}

.footer-bottom {
	margin-bottom: 25px;
}

/************************************
** ●次の記事／前の記事のフォント
************************************/
.prev-post.a-wrap.cf,
.next-post.a-wrap.cf{
  font-size: 16px; /*フォントサイズ*/
  font-weight:bold; /*文字強調*/
}
/* スマホでのフォントサイズ */
@media screen and (max-width: 1030px){
  .prev-post.a-wrap.cf,
  .next-post.a-wrap.cf{
    font-size: 14px; /*フォントサイズ*/
    font-weight:bold; /*文字強調*/
  }
}

/************************************
** ●コメントを書き込むの強調
************************************/
.comment-btn.key-btn {
  border: solid 2px #fe9B61; /*枠線*/
  border-radius: 6px; /*角丸コーナー*/
  font-weight:bold; /*文字強調*/
  font-size: 18px; /*フォントサイズ*/
}

/************************************
** ●タグクラウド カスタマイズ
************************************/
.tagcloud {
  padding: 0px 2px 0px 2px;
}

.tagcloud a {
  text-decoration: none; /*テキスト初期化*/
  color: #fff; /*タグフォントカラー*/
  font-size: 12px; /*タグフォントサイズ*/
  font-weight:bold; /*文字強調*/
  display: inline-block; /*横並びで上下左右空白有り*/
  background-color: #fe9B61; /*タグ背景色*/
  padding: 2px 6px 0px 6px; /*タグ内側余白*/
  margin-right: 2px; /*タグ外側右余白*/
  margin-bottom: 2px; /*タグ外側下余白*/
  border-radius: 9px 3px; /*タグデザイン*/
  border: 0px; /*タグ枠線無し*/
  word-break: break-all; /*テキストの途中で改行させない*/
}

.tagcloud a:hover {
  background: #ffeedd; /*ホバー時タグ背景色*/
  color: #f36924; /*ホバー時タグフォントカラー*/
  transition: all 0.6s ease; /*アニメーション*/
}

プロフィールボックスとモバイルメニューについて

プロフィールボックスとモバイルメニューのカスタマイズは入っていません。

プロフィールボックスについては、リスブロサイトの「【Cocoon】プロフィールボックスをオシャレにカスタマイズしてみたッ！！」を利用させて頂きました。

https://s41t0h.jp/cocoon-author-box-customize/

s41t0h.jp

モバイルメニューについては、同じくリスブロサイトの「【Cocoon】モバイルメニューを横並びにしてスクロール可能にするCSSカスタマイズ（β版）」をそのまま利用させて頂きました。

https://s41t0h.jp/cocoon-mobile-menu-scroollable/

s41t0h.jp

こちらのソースを「スタイルシート(style.css)」を貼り付けることで、プロフィールボックスとモバイルメニューのカスタマイズが行えます。

最後に

今回オレンジのテーマカラーを作成してみましたが、MASAa.netのテーマカラーであるピンクと違って派手さが無く落ち着いた雰囲気となりました。

次は他のテーマカラーを掲載したいと思います。

なお、Cocoon側の設定によっては正常に表示されない場合があります（目次など）。

その場合は、先日エントリー記事としてアップした「【Cocoon】MASAa.net開設3ヶ月後のCocoon設定について」で、Cocoonの設定を照らし合わせて下さい。

【Cocoon】MASAa.net開設3ヶ月後のCocoon設定について

2018年9月25日から開始したこのブログ「MASAa.net」も早いもので3ヶ月以上が経過しました。と言う事で、現時点の現状のWordPressテーマ Cocoonの設定項目についてまとめてみました。

masaa.net

2019.01.07

もし今回のデザインをご利用される方が（居ないと思うけど）おられましたら、ご一報頂ければ幸いです。