このブログのテーマをSimplicity2からCocoonに変えました、えむ氏（@mlog_xyz）です。
Simplicity2でも特に問題なかったんですけど、仕事でCocoonを使ったら面白くなってきて、勢いでこのブログでもテーマをCocoonに変えてしまいました。
Cocoonの説明は割愛します。もう誰もが知っているWordPressテーマ「Simplicity」の後継のテーマです。
以前使っていた「Simplicity」では、いろいろとCSSでブログをカスタマイズしました。
しかしながら、CocoonとSimplictyではid名やclass名が変わっていて、そのままCSSをコピペするだけでは使用できませんでした。なので、そのへんも修正しつつ、カスタマイズをまとめていきます。
テーマデザインは以前のものとほぼ同じです。テンプレートやスタイルシートにコピペしていただければ、同じようにカスタマイズできますので、よかったら参考にしてみてください。
- 画面の大きさによって背景画像の拡大・縮小
- ヘッダー、メイン、サイドバー、フッターの背景を透過させる
- 記事ごと、サイドバーウィジェットごとに枠線で囲む
- 見出しのカスタマイズ
- グローバルメニューのカスタマイズ
- サイトロゴ画像のカスタマイズ
- トップへ戻るボタンのカスタマイズ
- アーカイブページのカスタマイズ
- フッターのカスタマイズ
- サムネイル画像のカスタマイズ
- 次ページボタンのカスタマイズ
- ページネーションのカスタマイズ
- モバイルメニューのカスタマイズ
- 画面幅がせまくなったら、グローバルメニューを削除
- ウィジェット内リストのカスタマイズ
- リンク色、マウスオーバー時のリンク色の変更
- ブログキャッチフレーズの色の変更
- NO IMAGE画像のカスタマイズ
- 404エラーページのカスタマイズ
画面の大きさによって背景画像の拡大・縮小
Cocoonでは「Cocoon設定」という項目が新たに作られて、様々なカスタマイズがHTMLやCSSをいじらずに行うことができます。
背景画像も設定することが可能ですが、画面の大きさに併せて背景画像を拡大・縮小することはできないので、CSSで指定しています。
/** 背景 ********************/
body{
background: #30415d url(https://mlog.xyz/wp-content/uploads/2016/11/background.jpg) no-repeat fixed center center;
background-size: cover; /* 画面に合わせて拡大・縮小 */
}
ヘッダー、メイン、サイドバー、フッターの背景を透過させる
Simplicityではデフォルトで透過していましたが、Cocoonでは背景に色が指定されていました。
このままだと、せっかくの背景もあまり見えなくなってしまいますし、次に行う「記事ごと、サイドバーウィジェットごとに枠線で囲む」が際立ってこなくなるので、ヘッダー、メイン、サイドバー、フッターの背景を透過させます。
/** 背景透過 ********************/
.header-container{ /* ヘッダー */
background: transparent; /* 背景透過 */
}
#main{ /* メイン部分 */
background: transparent; /* 背景透過 */
}
#sidebar{ /* サイドバー */
background: transparent; /* 背景透過 */
}
#footer{ /* フッター */
background: transparent; /* 背景透過 */
}記事ごと、サイドバーウィジェットごとに枠線で囲む
Simplicityの時も行っていた枠線囲みです。
Simplicityとはid名やclass名が変わっていたので、少し修正しました。
/** 枠線 ********************/
.a-wrap{ /* インデックスページの記事部分 */
border: 5px solid #031424; /* 枠線 */
background-color: #FFF; /* 背景白 */
}
#related-entries .a-wrap, #pager-post-navi .a-wrap{ /* 関連記事、前記事、次記事部分の枠線は除外 */
border: none;
}
.single #main, .page #main{ /* 投稿ページ、固定ページの記事部分 */
border: 5px solid #031424; /* 枠線 */
background: #FFF; /* 背景白 */
}
#sidebar .widget{ /* サイドバーのウィジェット */
border: 5px solid #031424; /* 枠線 */
background: #FFF; /* 背景白 */
padding: 10px; /* ボックスの余白 */
}関連記事、前記事、次記事部分の枠線は除外
上記ソースコードの2段落目の「#related-entries .a-wrap, #pager-post-navi .a-wrap」は関連記事の部分と前記事、次記事の部分です。
インデックスページの記事部分を枠線で囲む時、クラス名「.a-wrap」を使っていますが、このままだと関連記事の部分と前記事、次記事の部分も枠線で囲まれてしまいます。
なので、「#related-entries（関連記事部分）」の「.a-wrap」と「#pager-post-navi（前後記事部分）」の「.a-wrap」は枠線「border: none;」にして枠線を消しています。
サイドバーのウィジェットの枠内の余白
上記ソースコードの4段落目の「sidebar .widget」の部分では、他の部分にはない「padding: 10px; 」があります。
「padding」とは枠内の余白です。
サイドバーのウィジェットに枠線をつけると、枠線と枠内の文字が接近しまくります。
そこに余裕をもたせるように枠内にすきまをいれてます。
見出しのカスタマイズ
記事のタイトルタグ（h1タグ）、記事本文中に挿入する見出しタグ（h2タグ、h3タグ、h4タグ）、サイドバーの見出しタグ（h3タグ）をスタイルシートでカスタマイズしました。
デザインはSimplicityの時と同じデザインです。
/** 記事タイトル見出しh1 ********************/
.article h1{
position: relative;
color: #333;
background-color: rgba(142,174,189,0.8);
font-size: 30px;
line-height: 117%;
margin: 0 -45px 30px -45px;
padding: 20px 45px;
-webkit-box-shadow: 0 1px 3px #777;
box-shadow: 0 1px 3px #777;
}
.article h1:after, .article h1:before{
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}
.article h1:before{
right: 0;
border-left: 5px solid #333;
}
.article h1:after{
left: 0;
border-right: 5px solid #333;
}
/** 記事見出しh2 ********************/
.article h2{
border-left: 50px solid rgba(142,174,189,0.8);
margin: 0 -45px 30px -45px;
padding: 25px 30px;
font-size: 26px;
background-color:transparent;/* 背景透過 */
}
.article h2:before{
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
left: -49px;
border-right: 5px solid #333;
}
/** 記事見出しh3 ********************/
.article h3 {
font-size: 23px;
padding: .25em 0 .25em .75em;
border-left: 6px solid #CF6766;
border-bottom: none; /* 下線削除 */
border-right:none; /* 右線削除 */
border-top:none;
}
/** 記事見出しh4 ********************/
.article h4 {
border-left: 30px solid #CF6766;
border-bottom: 0px; /* 下線削除 */
border-right:none; /* 右線削除 */
border-top:none;
padding: 5px 0 5px 10px;
margin-bottom: 30px;
}
/** サイドバーの見出しh3 ********************/
#sidebar h3{
position: relative;
color: #FFF;
background-color: rgba(48,65,93,0.8);
line-height: 117%;
margin: 0 -25px 30px -25px;
padding: 20px 25px;
-webkit-box-shadow: 0 1px 3px #777;
box-shadow: 0 1px 3px #777;
}
#sidebar h3:after, #sidebar h3:before{
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #663333;
}
#sidebar h3:before{
right: 0;
border-left: 5px solid #663333;
}
#sidebar h3:after{
left: 0;
border-right: 5px solid #663333;
}
帯（リボン）風の見出しタグ
記事のタイトルタグ（h1タグ）と記事見出しタグ(h2タグ)とサイドバーの見出しタグ（h3タグ）は帯（リボン）風のタグになっています。
これは疑似要素「after」と「before」を使って構築しています。
SimplicityとCocoonの見出しタグは別物
SimplicityとCocoonではもとから見出しタグのデザインが変わっています。
なので、 Simplicityでは特に指定しなくてもよかった項目も、Cocoonでは指定しなくてはならない項目も増えています。
指定するというと追加している感じですが、Cocoonのデフォルトである見出しの線を消すとか、色のついた背景を透過させるとかいったニュートラルの状態に戻すような感覚の指定です。
Simplicityではなかった指定項目には「/* 背景透過 */」みたいな感じで備考を書いてあります。
グローバルメニューのカスタマイズ
グローバルメニューのデザインもSimplicity時代とほぼ同じです。
Simplicity時代は左寄せでしたが、Cocoonでは現行にならって中央寄せです。
id名やclass名を直しました。
/** グローバルメニュー ********************/
#navi{
background: transparent; /* 背景透過 */
}
.navi-in > ul li{
width:auto; /* width:176pxを解除 */
height:auto; /* height:60pxを解除 */
line-height:normal; /* line-height:60pxを解除 */
}
.navi-in > ul .sub-menu{
min-width:0; /* min-width:240pxを解除 */
background: transparent;
}
.navi-in > ul > .menu-item-has-children > a::after{
content: none; /* 疑似クラスの削除 */
}
.item-description{ /* 説明文 */
display:none;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap {
height:auto; /* 幅の指定を解除 */
}
#navi ul li a{
border: 5px solid #031424; /* 枠線 */
background-color: #FFF; /* 背景色白 */
display: block;
color: #031424; /* リンク色 */
text-decoration: none; /* リンク下線削除 */
-webkit-transition: all 1s;
transition: all 1s; /* 1秒で */
padding:5px; /* ボックス内の隙間 */
margin:0 5px; /* ボックス外の隙間 */
}
#navi ul li a:hover{ /* マウスオーバー時 */
background-color: #30415D; /* 背景色 */
color: #FFF; /* リンク色 */
}Simkicity時代と同様に、マウスオーバーするとじんわり色が変わる仕様にしました。
幅指定、高さ指定の解除
CocoonにはCocoon設定という項目があり、その中でグローバルメニューをある程度カスタマイズすることができます。
そこでは、グローバルナビメニュー色やグローバルナビメニュー幅をいじることができますが、そちらでもいじって、なおかつCSSでもいじるとよくわからなくなるので、 Cocoon設定ではいじらずCSSのみでいじっています。
Cocoon設定でグローバルナビメニュー幅がデフォルトとして決まっていますので、それらをCSSで解除しています。
擬似クラスと説明文の削除
Simplicityでは搭載されていたかはわかりませんが、メニューにカテゴリを指定し、そのカテゴリに説明文があると、メニューに表示されてしまいます。
また、メニューにサブメニューがあると、擬似クラスとFont Awesomeを使ってアイコンフォントが表示されます。
上記ソースコードの4段落目と5段落目ではそれらを表示させないようにしています。
サイトロゴ画像のカスタマイズ
サイトロゴの画像はCocoon設定→ヘッダー→ヘッダーロゴで設定しています。
Simplicity時代と同様、マウスオーバーすると少し透過するようにしています。さらに前回はしてなかったんだけど、マウスアウトしたときじんわり元に戻るようにしました。
/** タイトル画像 ********************/
.site-name-text-link{
-webkit-transition: all 1s;
transition: all 1s; /* 1秒で元通り */
}
.site-name-text-link:hover{
opacity: 0.7; /* 透過率70% */
-webkit-transition: all 1s;
transition: all 1s; /* 1秒で透過 */
}
トップへ戻るボタンのカスタマイズ
こちらもSimplicity時代と同様、透過させながら回転させてます。
/** トップヘ戻る画像 *********************/
.go-to-top-button{
width:auto; /* width:40px解除 */
margin-bottom:20px; /* ボタンの下に隙間 */
}
.go-to-top-button-image{
-webkit-transition: all 1s;
transition: all 1s;
}
.go-to-top-button-image:hover{
-webkit-transform: rotate(720deg);
transform: rotate(720deg); /* 720度回転 */
opacity: 0.7; /* 透過率70% */
}
画像はCocoon設定→ボタン→ボタン画像で登録しています。
そのままだと幅が40pxに固定されて画像が小さくしか表示されないので、「width:auto;」をかましてます。
アーカイブページのカスタマイズ
アーカイブページとは、カテゴリページやタグページ、検索ページのタイトル部分です。
背景が暗い画像なので、文字も黒系だと見えづらいので、文字色を白くしました。
/** アーカイブページのタイトルと説明文 /** トップヘ戻る画像 *********************/
#archive-title {
color: #FCFCFC; /* 文字色 */
font-size: 30px; /* 文字の大きさ */
line-height: 117%;
}
.category-header #archive-title, .tag-header #archive-title{
background-color: transparent; /* 背景透過 */
-webkit-box-shadow: none;
box-shadow: none; /* 影なし */
margin-bottom:0px; /* マージンなし */
}
.category-header #archive-title:after, .category-header #archive-title:before,
.tag-header #archive-title:after, .tag-header #archive-title:before{
display:none; /* 表示なし */
}
.category-content{ /* カテゴリ本文 */
color:#FFF;
}
.category-content a{ /* カテゴリ本文のリンク */
color:#FFF;
}アーカイブタイトルはh1タグあり
アーカイブタイトルはh1タグがあります。なので、記事タイトル見出しh1（.article h1あたり）で指定したスタイルもここに反映されてしまいます。
なので、上記のソースコードの2段落目と3段落目はCSSの打ち消しのために指定してます。
フッターのカスタマイズ
アーカイブページのカスタマイズ同様、背景で文字が見えづらくなったので、文字をすべて白色にしました。
/** フッター部分全体 ********************/
#footer{ /* フッター全体 */
color:#FFF;
}
#footer .widget{/* フッターのウィジェット内 */
color:#FFF;
}
#footer .widget a{ /* フッターのウィジェット内リンク */
color:#FFF;
}
#footer .widget a:hover{ /* フッターのウィジェット内リンク（マウスオーバー時） */
color:#8EAEBD;
}サムネイル画像のカスタマイズ
インデックスページの記事リストのサムネイル画像、関連記事のサムネイル画像、前後記事のサムネイル画像をマウスオーバーした時に、少し動きが出るようにしました。
/** サムネイル画像 ********************/
.card-thumb{
overflow: hidden; /* はみ出した部分を隠す */
}
.card-thumb img{
-webkit-transition: all 0.3s ;
transition: all 0.3s; /* 0.3秒で回転 */
-webkit-transform: scale(1.4,1.4) rotate(15deg);
transform: scale(1.4,1.4) rotate(15deg); /* 1.4倍拡大・15度回転 */
}
.card-thumb img:hover{
opacity: 0.7; /* 画像透過 */
-webkit-transform: scale(1.0,1.0);
transform: scale(1.0,1.0); /* 拡大の解消 */
}はじめのうちに画像を少し大きくし傾けさせといて、マウスオーバーすると元の大きさと角度に戻しながら、少し透過させています。
次ページボタンのカスタマイズ
Simplicityにはなかったと思う「次ページボタン」。インデックスページの下のほうにあります。
次に書く「ページネーション」があればいらなそうな気はするけど、とりあえずデザインに併せてカスタマイズしました。
/** 次のページボタン ********************/
.pagination-next-link{
background-color:transparent; /* 背景透過 */
border: 5px solid #031424; /* 枠線 */
color: #8EAEBD; /* 文字色 */
-webkit-transition: all 1s;
transition: all 1s; /* 1秒で色が戻る */
}
.pagination-next-link:hover{
background: #30415D; /* 背景色 */
color: #FFF; /* 文字色 */
-webkit-transition: all 1s;
transition: all 1s; /* 1秒で色が変わる */
}
ページネーションのカスタマイズ
ページネーションとはサイトの下の方にある次のページに行ったり前のページにもどったりするリンクです。
Simplicty時代のデザインより少しシンプルにしました。
/** ページネーション ********************/
.page-numbers{
border: 5px solid #031424;
color: #031424;
margin:0 -2.5px; /* 枠線がちゃんと重なるように各2.5ずつで5px */
border-radius: 0px; /* 枠線角の丸みをなくす */
-webkit-transition: all 1s;
transition: all 1s;
line-height: 36px; /* 元々の46-枠線5×2＝36 */
}
.pagination .current{
background-color:transparent;
color: #8EAEBD;
}
.page-numbers.dots{
background-color:transparent;
color: #031424;
opacity: 1.0;
}
.pagination a:hover{
background: #30415D;
color: #FFF;
-webkit-transition: all 1s;
transition: all 1s;
}
@media screen and (max-width: 480px){
.page-numbers {
line-height: 24px; /* 元々の34-枠線5×2＝24 */
}
}
ページネーションの気をつけるべき「margin」
上記のソースコードで気を使った点の1つは「margin」です。
ページネーションはブロックが連なったものです。うまく並べないと枠線がきれいに重ならずダサいです。
「margin」で横余白を-2.5px にすることで、枠線がきれいに重なります。
枠線が5pxですので、連なるボックスがお互いに2.5pxずつくっついてくれると、ちょうど5pxの枠線がきれいに重なるというわけです。
ページネーションの気をつけるべき「line-height」
上記のソースコードで気を使った点のもう1つは「line-height」です。
「line-height」はブロック内の文字の上下位置を決めます。
ブロックのデフォルトの高さ（height）が36pxなため、文字を上下位置真ん中にするためにデフォルトで行の高さ（ line-height ）が36pxに指定されています。
僕のブログのデザインは、5pxの枠線を多様していますので、そのままの「line-height」では、文字が少し下の位置に配置されています。
文字を上下位置真ん中にするためにデフォルトの「line-height」から枠線（上と下）を引いた数値にします。36-(5*2)=26ってことです。
同じように 画面幅が 480px以下のときは「メディアクエリ」を使って、ブロックの高さ、行の高さがともに34pxになっています。なので、line-height=34-(5*2)=24pxにしました。
モバイルメニューのカスタマイズ
Cocoonでは、モバイル環境で表示するモバイルボタンレイアウトを選ぶことができます。
これはSimplicityにはなかったと思います。Simplicityでは「トップボタン」がデフォルトだった記憶がありますが、Cocoonでは、「スライドインボタン」が仕様です。
この「 スライドインボタン 」もカスタマイズしました。
/** モバイルメニューボタン ********************/
.mobile-menu-buttons{
background: #30415D;
color:#FFF;
}
.mobile-menu-buttons .menu-button > a{
background: #30415D;
color:#FFF;
}
.blogcard{
border:0;
}
画面幅がせまくなったら、グローバルメニューを削除
サイドバーは画面幅1023px以下になったとき、表示されない仕様になっています。
なので、それと同じタイミングでグローバルメニューも表示しないようにカスタマイズしました。
/** グローバルメニューの削除 ********************/
@media screen and (max-width: 1023px){
.navi-in > .menu-header {
display: none; /* サイドバーが消えるタイミングでメニュー削除 */
}
}メディアクエリを使っています。
ウィジェット内リストのカスタマイズ
テーマをSimplicityからCocoonに変えて一番気になったところがここです。
Cocoonでは、カテゴリウィジェットのようなウィジェット内で（縦に）リスト化させているものを、（リンクっぽくではく）ボタンっぽくしています。
マウスオーバーすると文字だけでなく、そのブロック全体に色が付くようになっており、そのブロックは（ボタンのようなので）余裕のある余白を用いた仕様になっています。
デザイン的には悪くないですが、ここだけボタンっぽくなるのも少しおかしいし、リンクに下線がないのもおかしいし、何よりサイドバーやフッターが高さを取りまくって、縦に伸びまくったサイトになるのが嫌でした。
これを何とか普通っぽくしようとカスタマイズしました。
/** ウィジェットのリスト ********************/
.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 {
text-decoration: underline; /* リンクの下線 */
padding: 2px 4px; /* ボックスの縦余白を小さく調整 */
}
.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 {
background-color: transparent;
color: #CF6766;
}
リンク色、マウスオーバー時のリンク色の変更
リンク色、マウスオーバー時のリンク色をCSSで指定しました。さらに色がじんわり変わるようにしときました。
/** リンク ********************/
a {
color:#30415d;
}
a:hover {
color:#cf6766;
transition: all 0.7s ease;
}
サイトのリンク色とマウスオーバー時のリンク色はCocoon設定→全体→サイトリンク色、サイト選択文字色で設定が可能です。
ブログキャッチフレーズの色の変更
Simplicityではブログタイトルの下にくるのが仕様でした。
Cocoonでは、ブログキャッチフレーズはヘッダーのトップ、タイトルの上にくるのがデフォルトです。 これはデフォルトのままいきます。
もし変えたければ、Cocoon設定→ヘッダー→キャッチフレーズの配置で変更できます。
キャッチフレーズの文字色をCSSで指定しました。
/** ヘッダー ********************/
#header{
color:#FFFFFF;
}
こちらも Cocoon設定→ヘッダー→ヘッダー全体色→ヘッダー全体文字色で変更可能です。
NO IMAGE画像のカスタマイズ
アイキャッチ画像を設定しなかった場合のアイキャッチサムネイル画像の設定です。
Cocoon設定→画像→NO IMAGE設定→NO IMAGE画像で画像を設定しました。
デフォルトの画像が幅320px高さ180pxの画像だったので、同じ大きさの画像を設定しました。
404エラーページのカスタマイズ
404エラーページとは、ブログを見てくれる人が存在しないページにアクセスしたときに表示されるページのことです。存在しないURLにアクセスしてみると見ることができます↓
Cocoon設定→404ページ→404ページ設定→404ページ画像で画像を設定しました。
デフォルトの画像が幅1024px高さ602pxの画像だったので、同じ大きさの画像を設定しました。
また、404ページタイトルと404ページメッセージも少し変えてみました。
/** 枠線 ********************/
.error404 #main { /* 投稿ページ、固定ページの記事部分 */
border: 5px solid #031424; /* 枠線 */
background: #FFF; /* 背景白 */
}上記のようにCSSで指定し、背景白+枠線をつけました。404エラーページは「.error404」らしいです、知らなかったー。
コメント