【CSSカスタマイズ】コクーンで使えるCSSを追加するオススメの方法

スポンサーリンク
Cocoon

 

まいどおおきに!おおもと(@so88qa)です

この記事は前回のCocoon(コクーン)の紹介記事からの続きでわたしが使っているCSSを教えちゃいます!

ワードプレス無料テーマCocoon(コクーン)について詳しく解説
今一番波に乗っている『有料級』のワードプレス無料テーマ【Cocoon(コクーン)】について詳しく解説して行く 記事です。ぼくは、Cocoon(コクーン)を初期の頃から使ってますが、日々の進化には目を疑います。 今なら、無料ですのでぜひ記事をみてCocoon(コクーン)を使ってください。

 

日々進化している最高の無料テーマCocoon(コクーン)なので、CSSを追加・変更した場合はこちらの記事をどんどん更新していきますので、楽しみにしてください

 

CSSカスタム一覧は⤵︎

【Cocconカスタマイズ】CSSでモバイルヘッダーを非表示にする方法
最高の無料テーマCocoon(コクーン)でスマホ記事のヘッダーを非表示にするCSSを教える記事です。 ぼくと同じように、「シンプル」・「わかりやすい」・「モバイルファースト」を考えている人は、記事を読んでください。
【カスタマイズ】コクーンのトップページをカッコよくする方法を公開
トップページはブログの顔!!! そんな、トップページをカッコよく魔改造したので その一部始終を教えちゃいます!
コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。
ワードプレスプラグインは「7つ」だけでOK!必須プラグインを紹介するよ!
プラグイン必須でググったら、「プラグインおすすめ30選」とか出てきてエグいですね プラグインを入れすぎると、最悪ブログが飛びますよ! この記事は、7つの必須プラグインを紹介する記事です。 プラグインが減らせない人のための解決作も紹介してるのでぜひ読んでくださいね。
『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!
【有名ブロガーが検証】ブログカードを100%活用するCSSカスタマイズ
有名ブロガーの「はたさん」が検証された結果 ブログカードのクリック率が高いという結果がでました。 さらに、マクリンさんがオススメする「ある一言」をCSSで入れると効果が倍増します! 今回は、そのカスタマイズを紹介する記事です!ぜひ参考にしてね
【コクーン】プラグインを使わずトップページをカッコよく改造する方法
トップページはブログの顔!!! そんな、トップページを『プラグインなし』で魔改造したので その一部始終を教えちゃいます!
コクーンカスタマイズ|メニューをカスタマイズして自分の色を出そう!
この記事は、ワードプレス無料テーマCocoon(コクーン)のちょっとしたカスタマイズ記事です。 コクーンのスマホ表示の時のヘッダー・フッターメニューってダサくないですか?今回はそこにメスを入れて自分の色を出すカスタマイズを紹介します!Cocoon(コクーン)を使っている人は参考にしてくださいね!
Cocoon|コピペで簡単JIN風のカワイイ箇条書きを作ってみた!
ワードプレス無料テーマCocoon(コクーン)の箇条書きを、ワードプレス有料テーマJIN風にカワイくカスタマイズをしてみました! 今回も、コピペで簡単に誰でも出来るカスタマイズなので参考にしてくださいね
コクーンカスタマイズ|コピペで簡単クリックを促すボタンの作り方!
ワードプレス無料テーマCocoon(コクーン)のボタンをカスタマイズする記事です。他のブログではあまり見ない動きを作って見たのでぜひ見て、コピペしてくださいね。

 

スポンサーリンク

Cocoon(コクーン)のCSSを書く場所

他のテーマと同じです。

ダッシュボードの外観→テーマの編集から上の画像の、一番下に次々追加していきます。

エラーが出た場合は、「更新せずにもう一度書き直し」をしてくださいね。

 

スポンサーリンク

目次を中央へ移動

 

Cocoon(コクーン)の目次はデフォルトで左寄せに固定されています。

それを中央に表示されるように変更

 

 

好みですが、わたしはこっちの方がスッキリして好きですね

 

(追記)目次を開閉式に変更

 

javascript.js

jQuery(function($){
 var flg = "opened";
 $(".toc-title").append('<span class="toc-toggle-label">[<a class="toc-toggle-link">表示</a>]</span>'); //切り替えボタンの設置
 $('.toc-toggle-link').on('click', function() {
 $('.toc-list').slideToggle('fast'); //.toc-listの表示・非表示の切り替え
 if(flg == 'closed'){
 $(this).text('表示'); //非表示時の切り替えボタンテキスト
 flg = 'opened';
 }else{
 $(this).text('非表示'); //表示時の切り替えボタンテキスト
 flg = 'closed';
 }
 });
});

 

スタイルシート (style.css)

/*目次変更*/
.toc{
 margin-left: auto;
 margin-right: auto;
 color:#545454;
 border:4px double;
 border-radius: 10px
}

.toc a{
 color:#545454
}

.toc-title {
 font-weight: bolder
}

.toc-toggle-label{
 font-size: 80%;
 margin: 0 5px;
 cursor: pointer
}

.toc-list{
 display: none
}

 

スポンサーリンク

モバイル表示のグローバルメニュー非表示

 

Cocoon(コクーン)は最高のテーマですが、リンク表示の折り返しをしていまうので、このグローバルメニューだけはいまいちでので表示させないように変更

 

 

すると、このようにスッキリした見た目になり、より一層シンプルになり、コンテンツが強調されます!

 

モバイル表示のグローバルメニュー非表示CSS

 

/*モバイルグローバルメニュー非表示*/

@media screen and (max-width:1110px) {

#navi {

    display: none;

}

}

最後にかっこが2つ付くので注意してくださいね!

 

追記

Cocoon(コクーン)の標準設定からモバイルのみ非表示にでき、現在はデスクトップ表示でトップページのみ非表示にするCSSを使ってます。

 

【カスタマイズ】コクーンのトップページをカッコよくする方法を公開
トップページはブログの顔!!! そんな、トップページをカッコよく魔改造したので その一部始終を教えちゃいます!

 

スポンサーリンク

スマホ記事でサイドバーを非表示

 

スマホで記事を見る時、記事の下に出てくるサイドバーってめっちゃ邪魔じゃないですか?

このCSSを使えばあら不思議、記事の下にあるサイドバーが消えちゃいます!

 

スポンサーリンク

スマホ記事でサイドバーを非表示CSS

/*スマホ記事のサイドバー非表示*/
@media screen and (max-width: 768px) {
.single #sidebar {
display:none;
}
}

 

スポンサーリンク

フッターの色変更

 

Cocoon(コクーン)のフッターの色はCSSでしか変更することができません。

わたしのブログの場合「白色」は目立ってしまうので、他の色に合わせます。

 

 

この色だと統一感があって、しっくりしますね

 

フッターの色変更CSS

 

/*フッター色変更*/

#footer {

  clear: both;

  background-color: #56a7a7;

  color: #f9fbfc;

padding: 5px;

}

 

追加フッターのホバー色の変更

2018年4月10日追記

フッターのホバー色がいまいちだったので、緑色に変更をしました。

フッターのホバー色変更CSS

 

/*フッターホバー色変更*/
 .navi-footer-in a:hover {
 background-color: #a0dbdb;
 transition: all 0.5s ease;
 }

 

スポンサーリンク

見出しh1・h2の変更

2018年4月14日追記

見出しを変えて見ました!

Cocoon(コクーン)の見出しはそのままでも、シンプルで使いやすいものとなっています。

どうしても変えたい人がいたら、参考にしてください

 

https://wvtravelclub.jp/cocoon-midasi/ ‎

 

見出しh1・h2CSS

 

/*見出し変更*/
 .post h2 {
 padding: 6px 20px;
 background:#ffffff;
 color:#333333;
 border-top: 5px solid #56a7a7;
 border-bottom: 2px solid #56a7a7;
 }

.post h3 {
 color:#333333;
 border-left:1px solid #56a7a7
 }

/*ウィジェット見出し変更*/
 .sidebar h3 {
 padding: 6px 20px;
 background:#ffffff;
 color:#333333;
 border-top: 5px solid #56a7a7;
 border-bottom: 2px solid #56a7a7;
 }

 

今回は、h2とh3のCSSを全く別の書き方にしています。

h2は

  • 見出し内の余白幅を 6pxと20pxに設定
  • 見出し内の背景を白に設定
  • 文字の色を薄い黒色に設定
  • 見出しの上の線を5pxの一本線に設定
  • 見出しの下の線を2pxの一本線に設定

というCSSです。

見出しの背景を白ではなく、“noneで”無効にしても良いかもしれません

 

h3はシンプルに

  • 文字の色を薄い黒色に設定
  • 見出しの左側の線を1pxの一本線に設定

というシンプルなものです。

 

スポンサーリンク

吹き出しのアイコンと文字の大きさの変更

 

Cocoon(コクーン)の吹き出しはちょっと小さいですよね

その悩みを解消するために、アイコンと文字を大きくして見ました!

 

吹き出しのアイコンと文字の大きさの変更CSS

 

/*吹き出し変更*/
 .speech-balloon{
 font-size: 15px;/*文字の大きさ*/
 font-weight: lighter;/*文字を細く*/
 margin-left: 12px;
 margin-right: 0px;
 margin-top: 18px;
 float:left;
 max-width: 620px;
 }

.sbp-r .speech-balloon{
 margin-left: 0px;
 margin-right: 12px;
 float:right;
 }

.speech-person{
 width: 90px;/*PC版のキャラの大きさ*/
 }

/*1240px以下*/
 @media screen and (max-width: 1240px){
 .speech-person{
 width: 50px;/*スマホ版のキャラの大きさ*/
 }
 .speech-balloon{
 max-width: 505px;
 }
 }

/*1030px以下*/
 @media screen and (max-width: 1030px){
 .speech-person{
 width: 50px;/*スマホ版のキャラの大きさ*/
 }
 .speech-balloon{
 max-width: 500px;
 }
 }

/*768px以下*/
 @media screen and (max-width: 768px){
 .speech-person{
 width: 50px;/*スマホ版のキャラの大きさ*/
 }
 .speech-balloon{
 max-width: 590px;
 }
 }

/*480px以下*/
 @media screen and (max-width: 480px){
 .speech-balloon{
 margin-left: 5px!important;
 margin-right: 5px!important;
 margin-top: 20px!important;
 max-width: 255px;
 }
 .speech-person {
 width: 85px;
 }
 }

/*370px以下*/
 @media screen and (max-width: 370px){
 .speech-balloon{
 margin-left: 5px!important;
 margin-right: 5px!important;
 margin-top: 20px!important;
 max-width: 225px;
 }
 .speech-person {
 width: 65px;
 }

 

スポンサーリンク

ストライプ風下線マーカー

黄色マーカ

赤マーカー

青マーカー

 

ストライプ風マーカーのCSS

 

/*マーカー変更*/

.marker-under {

background: none;

border-image: repeating-linear-gradient(-45deg, #fcea90, #fcea90 2px, transparent 2px, transparent 4px) 10/0 0 7px 0;

border-style: solid;

padding-bottom: 1px;

}

.marker-under-red {

background: none;

border-image: repeating-linear-gradient(-45deg, #ffd0d1,#ffd0d1,2px, transparent 2px, transparent 4px) 10/0 0 7px 0;

border-style: solid;

padding-bottom: 1px;

}

.marker-under-blue{

background: none;

border-image: repeating-linear-gradient(-45deg, #a5d7f9,#a5d7f9,2px, transparent 2px, transparent 4px) 10/0 0 7px 0;

border-style: solid;

padding-bottom: 1px;

}

 

スポンサーリンク

箇条書きに枠線追加

 

箇条書きに勝手に勝手に枠線を追加するようにしました

 

こんな感じ↓

  • あああああ
  • いいいいい
  1. ううううう
  2. えええええ

 

Cocoon|コピペで簡単JIN風のカワイイ箇条書きを作ってみた!
ワードプレス無料テーマCocoon(コクーン)の箇条書きを、ワードプレス有料テーマJIN風にカワイくカスタマイズをしてみました! 今回も、コピペで簡単に誰でも出来るカスタマイズなので参考にしてくださいね

箇条書きに枠線追加CSS

 

/*箇条書き枠線追加*/
#main ul {
background: transparent;
padding: 1em 2em;
margin:2em 0;
border: solid 2px #8EDAE5;
}

#main ul li {
line-height: 1.5; 
padding: 0.5em 0; 
}

#main ol {
background: transparent;
padding: 1em 2em;
margin:2em 0;
border: solid 2px #F99695;
}

#main ol li {
line-height: 1.5; 
padding: 0.5em 0; 
}

#main .toc ol {
background:transparent;
border:none;
padding: 0.5em 1em;
margin:0;
}

#main .toc ol li {
line-height: 1.7; 
padding:0;
}

 

スポンサーリンク

まとめ

 

2018年3月28日現在では、3ヶ所をCSSを使ってアレンジしています。

4月14日にさらに追記しています。

Cocoon(コクーン)を使われている人は参考にしてくださいペコッ ((_ _*≡*_ _)) ペコッ

 

今後、増えればどんどん追加をしていきます!

 

なお、わたしのサイトの文章の色は「#545454」にしています。

この色はAmazon・楽天など幅広いサイトで使われている文字の色です。

文字の色が真っ黒(#000000)と背景色の真っ白(#ffffff)だと、コントラストが強すぎて、目が痛くなります。

 

4月の時点でその点を調整しました。

 

CSSカスタム一覧は⤵︎

【Cocconカスタマイズ】CSSでモバイルヘッダーを非表示にする方法
最高の無料テーマCocoon(コクーン)でスマホ記事のヘッダーを非表示にするCSSを教える記事です。 ぼくと同じように、「シンプル」・「わかりやすい」・「モバイルファースト」を考えている人は、記事を読んでください。
【カスタマイズ】コクーンのトップページをカッコよくする方法を公開
トップページはブログの顔!!! そんな、トップページをカッコよく魔改造したので その一部始終を教えちゃいます!
コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。
ワードプレスプラグインは「7つ」だけでOK!必須プラグインを紹介するよ!
プラグイン必須でググったら、「プラグインおすすめ30選」とか出てきてエグいですね プラグインを入れすぎると、最悪ブログが飛びますよ! この記事は、7つの必須プラグインを紹介する記事です。 プラグインが減らせない人のための解決作も紹介してるのでぜひ読んでくださいね。
『Cocoon』CSSを使ってユーザービリティーをあげる方法
コクーンのカスタマイズ記事です! 今回のカスタマイズは、SANGOにも使われているマテリアルデザイン! このマテリアルデザインに必要ふかけるな影を使ったカスタマイズです! SANGOのようにカスタマイズしたいなら絶対読めよな!
【有名ブロガーが検証】ブログカードを100%活用するCSSカスタマイズ
有名ブロガーの「はたさん」が検証された結果 ブログカードのクリック率が高いという結果がでました。 さらに、マクリンさんがオススメする「ある一言」をCSSで入れると効果が倍増します! 今回は、そのカスタマイズを紹介する記事です!ぜひ参考にしてね
【コクーン】プラグインを使わずトップページをカッコよく改造する方法
トップページはブログの顔!!! そんな、トップページを『プラグインなし』で魔改造したので その一部始終を教えちゃいます!
コクーンカスタマイズ|メニューをカスタマイズして自分の色を出そう!
この記事は、ワードプレス無料テーマCocoon(コクーン)のちょっとしたカスタマイズ記事です。 コクーンのスマホ表示の時のヘッダー・フッターメニューってダサくないですか?今回はそこにメスを入れて自分の色を出すカスタマイズを紹介します!Cocoon(コクーン)を使っている人は参考にしてくださいね!
Cocoon|コピペで簡単JIN風のカワイイ箇条書きを作ってみた!
ワードプレス無料テーマCocoon(コクーン)の箇条書きを、ワードプレス有料テーマJIN風にカワイくカスタマイズをしてみました! 今回も、コピペで簡単に誰でも出来るカスタマイズなので参考にしてくださいね
コクーンカスタマイズ|コピペで簡単クリックを促すボタンの作り方!
ワードプレス無料テーマCocoon(コクーン)のボタンをカスタマイズする記事です。他のブログではあまり見ない動きを作って見たのでぜひ見て、コピペしてくださいね。

 

それじゃまた!

 

 

わたし
わたし

感想をコメントに記入してくださいね!