WordPressテーマ Cocoonの設定サイトフォント
WordPressテーマ Cocoonで設定できるサイトフォントは、現在
- 游ゴシック体, ヒラギノ角ゴ
- メイリオ, ヒラギノ角ゴ
- ＭＳ Ｐゴシック, ヒラギノ角ゴ
- 源ノ角ゴシック（Webフォント）
- Mplus 1p（Webフォント）
- Rounded Mplus 1c（Webフォント）
- はんなり明朝（Webフォント）
- こころ明朝（Webフォント）
- さわらびゴシック（Webフォント）
- さわらび明朝（Webフォント）
の10種類となっています。
このうち４～10のサイトフォントについてはWebフォントが、1～3のサイトフォントについては内蔵フォントが使用されています。
WordPressテーマ Cocoonでのフォント設定は「Cocoon設定」→「全体」→「サイトフォント」から出来ます。
Webフォントを使用するとサーバーからフォントデータを引っ張ってくるため、どの環境でも同じように表示されると言う利点があります。
しかし、その反面サーバーからデータを引っ張ってくるため、内蔵フォントと比較すると表示速度が遅くなると言う欠点があります。
源ノ角ゴシックから游ゴシック体, ヒラギノ角ゴに変更する
このMASAa.netは「源ノ角ゴシック（Webフォント）」を使用してきました。
「源ノ角ゴシック（Webフォント）」を使用した理由は、ガチッとした強調の有るフォントが好みと言う理由からです。
「PageSpeed Insights」などのウェブページ読み込み時間計測サイトで計測すると、Webフォントを使用している場合スコアが低くなってしまいます。
そこで、Webフォントから内蔵フォント（游ゴシック体, ヒラギノ角ゴ）に切り換えることにしました。
但し、これだとフォントが弱々しいので、表示についてこれまでカスタマイズした内容について若干修正してみました。
カテゴリー表示
【Cocoon】カテゴリー表示をカスタマイズする
WordPressテーマ Cocoonの「カテゴリー表示」のカスタマイズについてまとめてみました。カスタマイズの内容は、アイコンの設置、ボーダーラインの表示、記事数デザイン変更、上下左右空間の設定についてカスタマイズを行いました。
masaa.net
2018.12.06
で、「カテゴリー表示」についてカスタマイズを行いましたが、このソースを修正します（★印が修正した箇所です）。
修正内容は、文字の強調を行いフォントサイズと間隔を調整してみました。
/************************************
** ●カテゴリーのカスタマイズ
************************************/
.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 #ffc5e0; /*親カテゴリー下側にボーダーライン*/
}
.widget_categories ul li a::before{ /*親カテゴリーのアイコン設定*/
font-family: FontAwesome;
content: "\f07c";
color: #fe619a;
padding-right: 6px; /*アイコン右側空間*/
font-weight: normal; /*文字強調クリア★*/
}
.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 #ffc5e0; /*子カテゴリー下側にボーダーライン*/
}
.widget_categories ul li ul li a::before{ /*子カテゴリーのアイコン*/
font-family: FontAwesome;
content: "\f115";
color: #f41945;
padding: 0px 6px 0px 2px; /*アイコン右側空間*/
}
.widget_categories ul li a .post-count{ /*記事数設定*/
display: inline-block; /*インラインボックス生成*/
float: right; /*右寄せ配置*/
margin-left: 8px; /*右側空間*/
color: #fe619a; /*文字色*/
background: #ffddee; /*背景色*/
font-weight: bold; /*文字強調*/
font-style: oblique; /*斜体フォント*/
font-size: 14px; /*フォントサイズ★*/
white-space: nowrap; /*1つの空白にまとめて表示。折り返し無し。*/
line-height: 1.4; /*行の高さ★*/
padding: 0px 10px 0px 10px; /*上下空白★*/
text-decoration: none; /*テキスト装飾無し*/
border-radius: 2px; /*角丸コーナー*/
}
.widget_categories ul li a:hover{ /*マウスホバー時設定*/
background: #ffddee; /*背景色*/
color: #333; /*文字色*/
transition: all 0.8s ease; /*アニメーション*/
}
.widget_categories ul li a:hover .post-count{ /*記事数のマウスホバー時設定*/
background: #fe619a; /*背景色*/
color: #fff; /*文字色*/
transition: all 0.8s ease; /*アニメーション*/
}
記事一覧（インデックス）
【Cocoon】インデックスをカスタマイズする
WordPressテーマ Cocoonの【インデックス（カードタイプ：縦型カード2列）】をカスタマイズしてみました。主なカスタマイズの内容は、インデックスの枠を表示し、マウスカーソルをホバーすると枠を強調するものとなっています。
masaa.net
2018.11.14
で、「記事一覧（インデックス）」についてカスタマイズを行いましたが、このソースを修正します（★印が修正した箇所です）。
修正内容は、フォントサイズと間隔を調整してみました。
/************************************
** ●記事一覧（インデックス）のカスタマイズ
************************************/
.main{
border:1px solid #fe619a!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,97,154,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,97,154,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: 1240px){ /*タイトル スマホ表示設定*/
.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;
}
人気記事ランキング
【Cocoon】人気記事ランキングをカスタマイズする
WordPressテーマ Cocoonの【人気記事ランキング】をカスタマイズしてみました。主なカスタマイズの内容は、ランキング数字のデザイン変更、全ランキング数字の背景色統一、タイトルを縦中央寄せ、アイキャッチ画像の修正などとなっています。
masaa.net
2018.11.16
で、「人気記事ランキング」についてカスタマイズを行いましたが、このソースを修正します（★印が修正した箇所です）。
修正内容は、文字の強調を行ってみました。
/************************************
** ●人気記事ランキング表示のカスタマイズ
************************************/
/*順位数表示のカスタマイズ*/
.widget-entry-cards.ranking-visible .widget-entry-card-thumb::before{
background-color: #ffddee!important; /*ランキング数字の背景色を統一する*/
color:#f32469; /*ランキング数字のカラー*/
top: -4px;
left: -4px;
border-radius: 6px; /*角丸コーナー*/
border:solid 2px #f32469; /*ランキング数字の枠のカラー*/
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); /*シャドー（影）*/
}
ページ送りボタン／戻りボタン
【Cocoon】ページ送りボタン／戻りボタンをカスタマイズする
WordPressテーマ Cocoonの「ページ送りボタン／戻りボタン」のカスタマイズについてまとめてみました。カスタマイズの内容は「ページ送りボタン／戻りボタン」の強調やシャドー（影）、角丸コーナーに変更してみました。
masaa.net
2018.12.02
で、「人気記事ランキング」についてカスタマイズを行いましたが、このソースを修正します（★印が修正した箇所です）。
修正内容は、「次のページ」の文字を強調してみました。
/************************************
** ●ページ送りボタン／戻りボタンのカスタマイズ
************************************/
.pagination-next,
.pager-prev-next{ /*次のページ*/
border: solid 1px #fe619a; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
transition: all 0.8s ease; /*アニメーション*/
}
.page-numbers{ /*現ページ以外のページ番号*/
background-color: #ffffff; /*背景色*/
border: solid 2px #fe619a; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
font-family: sans-serif; /*フォントゴシック指定*/
font-size: 120%; /*フォントサイズ*/
color: #fe619a; /*文字色*/
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 { /*現ページ以外のページ番号のホバー時*/
/*.pager-numbers a:hover .page-numbers{ 現ページ以外のページ番号のホバー時*/
background-color: #fe619a; /*マウスオーバー時の背景色*/
color: #ffffff; /*マウスオーバー時の文字色*/
}
.pagination .current { /*現ページ番号*/
/*.pager-links .current{ 現ページ番号*/
background-color: #ffddee; /*背景色*/
border: solid 2px #fe619a; /*枠線*/
border-radius: 6px; /*角丸コーナー*/
font-family: sans-serif; /*フォントゴシック指定*/
font-size: 120%; /*フォントサイズ*/
color: #fe619a; /*文字色*/
font-weight: bold; /*文字強調*/
box-shadow: 3px 3px 2px 0 rgba(0,0,0,0.3); /*シャドー（影）*/
}
.pagination-next-link.key-btn { /*次のページ★*/
font-weight: bold; /*文字強調*/
}
最後に
「游ゴシック体, ヒラギノ角ゴ」は以前利用していた「源ノ角ゴシック（Webフォント）」と比べると弱々しいので、文字を強調とフォントサイズ変更を行ってみました。
只さえ表示速度が遅いサイトなので、内蔵フォントに切り換えたことで少しでも表示スピードが上がれば納得です。
コメント