Ｃocoonで見やすさの追求・モバイルカスタマイズ編（初心者var）

QOOPY

やっとサイトのデザイン調整が終わりました～
そこでタブレット端末とモバイル・スマホで見ている人が多いので、無料テンプレートのCocoonでカスタマイズしたよ！という報告。
自分のための忘備録でもあるので、カスタマイズを検討している人は参考ににしてくださいね！

コジロー先生

Cocoonは高機能なテンプレートゆえ、カスタマイズ中毒を起こすぞ！（笑）初心者はくれぐれも注意して、コードを変更するときは必ずバックアップを取る習慣を付けよう！

Index

モバイル・カスタマイズ編

モバイル・カスタマイズ編

ランさん

今回はモバイル編、コピペで簡単にカスタマイズできますよ。
カスタマイズは必ず子テーマにしてね、そうすると親テーマが更新になってもスタイルカスタマイズは保持されから♡
カスタマイズしたのは、ヘッダーメニューとSNSボタンの2か所ですよ～。

Cocoon Child: スタイルシート (style.css)に

外観→テーマエディターからCocoon Child: スタイルシート (style.css)に以下をコピペしました。
下記ではそれぞれ解説します。なんせworldPress初心者なので至らない点があるかと思いますがご了承ください。

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1030px以下*/
@media screen and (max-width: 1030px){
  /*モバイルメニューキャプションの色変更*/
	.mobile-menu-buttons .menu-caption{
	color:#ff0000;
	font-weight:800;
	opacity: inherit;}
	}
/* モバイルへッターメニューの文字色・背景色を変更 */
.mobile-menu-buttons .menu-button,
.mobile-menu-buttons .menu-button:hover,
.mobile-menu-buttons .menu-button a,
.navi-menu-content　 .menu-drawer a,
.menu-drawer a:hover{
	background-color: #000000;
	color:#aeab92;
}
/* スライドインメニュー背景色 */
.navi-menu-content {
	background: #000000;
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/

/*SNSシェアボタン*/
#main .button-caption {display: none; /*キャプション非表示*/}

.sns-share-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
font-size: 20px; /*アイコンのサイズ*/
margin: 0 8px; /*ボタン同士の間隔*/
}

#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
}

では、それぞれ変更した箇所の説明をします。

モバイルヘッダーメニューのカスタマイズ

参考にしたサイト

フッターモバイルボタン・メニューの背景色・文字色を変更したい

モバイル表示した際の「フッターモバイルボタンの文字色・背景色の変更」「フッター→メニュー→文字色・背景色の変更」の際のCSSの書き方を教えてください。よろしくお願いします。よろしくお願いいたします。

モバイルヘッダーメニュー

・モバイルキャプションの色変更
・モバイルへッターメニューの文字色・背景色を変更

モバイルヘッダー（スマホの時）

/*モバイルメニューキャプションの色・赤文字に変更*/
.mobile-menu-buttons .menu-caption{
color:#ff0000;
font-weight:800;
opacity: inherit;}
}

/* モバイルへッターメニューの文字色・背景色を変更 */
.mobile-menu-buttons .menu-button,
.mobile-menu-buttons .menu-button:hover,
.mobile-menu-buttons .menu-button a,
.navi-menu-content　 .menu-drawer a,
.menu-drawer a:hover{
background-color: #000000;
color:#aeab92;
}

メニューのフォントアイコンをテーマカラーに合わせて、アイコン下のキャプションを赤にしました。次はスライドインメニューの背景色の指定をしています。
参考にしたサイト

https://bibabosi-rizumu.com/cocoon-slidein-navi-menu/

メニューにアイコンを入れ方はコチラのサイトを参考にしました。

https://misaki-blog.com/190518-menu-icon/

スライドインメニュー

・スライドインメニュー背景色の変更

/* スライドインメニュー背景色 */
.navi-menu-content {
	background: #000000;
}

SNSボタンのカスタマイズ

デフォルト状態のSNSボタンが大きいので、モバイル表示だとなんだか違和感がありました。見た目だけでもスリムに一列横並びにして、小さな画面でみてスッキリしますよね！

SNSボタンを小さくする

タブレット端末やスマホサイズに合わせてキューブ型にしました。

/*SNSシェアボタン*/
#main .button-caption {display: none; /*キャプション非表示*/}

.sns-share-message{
font-weight: bold; /*太字*/
color: #875d5b; /*文字色*/
}
.sns-share-buttons {
flex-wrap: nowrap; /*折り返さない*/
justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
font-size: 20px; /*アイコンのサイズ*/
margin: 0 8px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

これは参考にしたサイトから一部変更してほとんどコピペしました。
参考にしたサイト

【Cocoon】SNSシェアボタン・フォローボタンを丸く＆小型化【カスタマイズ】

CocoonのSNSシェアボタンとフォローボタンをカスタマイズしました。備忘録として残しておきます。変更前→変更後のデザイン変更前のデザイン。パソコンでの表示スマホでの表示そのままのデザインではちょっと存在感があったのと、スマホでの表示だと

カスタマイズしてみての感想

Cocoonの無料テンプレートはカスタマイズの機能はもちろん、プラグインなしで十分に使えます。
そして Cocoonの基本設定でモバイルの便利機能があり、見易さの考慮は少しのプラスアルファですみました。

Cocoon の基本設定はコチラ

Cocoonテーマの仕様・初期設定・機能説明など

Cocoonテーマの設定、仕様、使い方全般に関する情報です。ひとまとめにしてあります。

大切なのは内容の充実ですが、サイトの色やデザインで読者に印象付けすると覚えやすいですよね！当サイトは基本3色に絞っています。
去年の10月からリニューアル作業が続き、やっとデザインやら微調整が済んでほっとしています。これからもタブレットやスマホがどんどん進化していくので「見易さ重視」というのは常に勉強です。コツコツ更新していきます～。