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

Cocoon

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

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

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

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

CSSカスタム一覧は⤵︎

Cocoon
「Cocoon」の記事一覧です。
\ Advertisements /

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

他のテーマと同じです。

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

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

\ Advertisements /

目次を中央へ移動

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
}
\ Advertisements /

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

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

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

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

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

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

#navi {

    display: none;

}

}

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

追記

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

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

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

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

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

\ Advertisements /

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

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

フッターの色変更

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;
 }
\ Advertisements /

見出し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の一本線に設定

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

\ Advertisements /

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

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;
 }
\ Advertisements /

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

黄色マーカ

赤マーカー

青マーカー

ストライプ風マーカーの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;

}

\ Advertisements /

箇条書きに枠線追加

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

こんな感じ↓

  • あああああ
  • いいいいい
  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;
}
\ Advertisements /

まとめ

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

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

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

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

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

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

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

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

CSSカスタム一覧は⤵︎

Cocoon
「Cocoon」の記事一覧です。

それじゃまた!

わたし
わたし

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

コメントを送る

  1. なるほど!32文字以内ですね。
    Cocoonでは文字数に応じて大きさが自動で調整される仕様だったのですね。今回は本当に助かりました!

  2. おおもとさま
    ありがとうござます!無事理想のかたちにすることができました。
    私も同じCocoonをテンプレートにつかっているのですが、こちらのブログではPCとモバイルでタイトル文字が適切な大きさに調整されているようですが、Cocoonでは設定で自動で変更できるのでしょうか。
    こちらのブログもこちらで教えていただいた記述方法で調整されているのでしょうか?

    • 役に立ててよかったです(*^-^*)

      当ブログでは、文字の大きさの設定はやっていません。
      ただ、タイトルの文字数を32文字前後にするように気をつけているだけです。

  3. おはようございます。
    「見出し」とは記事のタイトルのことでした。
    モバイルとPCでタイトルの大きさなどを調整できればというのが希望です。

    • 承知しました!

      タイトル大きさ変更
      
      /*PCタイトル大きさ変更*/
      .article h1{
      font-size: 200%;/*%をいじって大きさを変更してください。*/
      }
      
      /*タブレット以下の大きさ*/
      @media screen and (max-width: 768px){
      .article h1{
      font-size: 200%;/*%をいじって大きさを変更してください。*/
      }
      }
      
      /*モバイル以下の大きさ*/
      @media screen and (max-width: 480px){
      .article h1{
      font-size: 200%;/*%をいじって大きさを変更してください。*/
      }
      }

      で変更できます!

      パーセンテージをいじって大きさを変更してください。

  4. いつもブログを楽しみにしております。

    Cocoonを利用してブログをつくっているところなのですが、こちらの記事にある見出しの見え方を変更したいと思っています。

    見出しの文字の大きさを変更したいのですが、モバイルとPCでそれぞれフォントの大きさを変えたいのですが、どのようにすればよいでしょうか?
    ブログの記事のタイトル(H1?)の文字がデフォルトでは大きいような気がしており、特にモバイルを小さくしたいと思っています。

    • コメントありがとうございます!

      確認ですが、ミーさんがおっしゃている「見出し」とはタイトルの事でしょうか?

      それとも、本文内の各見出ですか?

タイトルとURLをコピーしました