まいどおおきに！おおもと(@so88qa)です
この記事は前回のCocoon（コクーン）の紹介記事からの続きでわたしが使っているCSSを教えちゃいます！
日々進化している最高の無料テーマCocoon（コクーン）なので、CSSを追加・変更した場合はこちらの記事をどんどん更新していきますので、楽しみにしてください
CSSカスタム一覧は⤵︎
![Webコピーライティングの新常識 ザ・マイクロコピー [ 山本琢磨 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/9243/9784798049243.jpg?_ex=128x128)
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;
}
}
最後にかっこが２つ付くので注意してくださいね！
追記
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;
}追加フッターのホバー色の変更
２０１８年４月１０日追記
フッターのホバー色がいまいちだったので、緑色に変更をしました。
フッターのホバー色変更CSS
/*フッターホバー色変更*/
.navi-footer-in a:hover {
background-color: #a0dbdb;
transition: all 0.5s ease;
}見出しｈ１・ｈ２の変更
2018年４月１４日追記
見出しを変えて見ました！
Cocoon（コクーン）の見出しはそのままでも、シンプルで使いやすいものとなっています。
どうしても変えたい人がいたら、参考にしてください
https://wvtravelclub.jp/cocoon-midasi/
見出しｈ１・ｈ２CSS
/*見出し変更*/
.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;
}今回は、ｈ２とｈ３のCSSを全く別の書き方にしています。
ｈ２は
- 見出し内の余白幅を ６ｐｘと２０ｐｘに設定
- 見出し内の背景を白に設定
- 文字の色を薄い黒色に設定
- 見出しの上の線を５ｐｘの一本線に設定
- 見出しの下の線を２ｐｘの一本線に設定
というCSSです。
見出しの背景を白ではなく、“noneで”無効にしても良いかもしれません
ｈ３はシンプルに
- 文字の色を薄い黒色に設定
- 見出しの左側の線を１ｐｘの一本線に設定
というシンプルなものです。
吹き出しのアイコンと文字の大きさの変更
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; }
箇条書きに枠線追加
箇条書きに勝手に勝手に枠線を追加するようにしました
こんな感じ↓
- あああああ
- いいいいい
- ううううう
- えええええ
箇条書きに枠線追加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;
}まとめ
２０１８年３月２８日現在では、３ヶ所をCSSを使ってアレンジしています。
４月１４日にさらに追記しています。
Cocoon（コクーン）を使われている人は参考にしてくださいﾍﾟｺｯ ((_ _*≡*_ _)) ﾍﾟｺｯ
今後、増えればどんどん追加をしていきます！
なお、わたしのサイトの文章の色は「#545454」にしています。
この色はAmazon・楽天など幅広いサイトで使われている文字の色です。
文字の色が真っ黒（#000000）と背景色の真っ白（#ffffff）だと、コントラストが強すぎて、目が痛くなります。
4月の時点でその点を調整しました。
CSSカスタム一覧は⤵︎
それじゃまた！
感想をコメントに記入してくださいね！
コメントを送る
なるほど！32文字以内ですね。
Cocoonでは文字数に応じて大きさが自動で調整される仕様だったのですね。今回は本当に助かりました！
おおもとさま
ありがとうござます！無事理想のかたちにすることができました。
私も同じCocoonをテンプレートにつかっているのですが、こちらのブログではPCとモバイルでタイトル文字が適切な大きさに調整されているようですが、Cocoonでは設定で自動で変更できるのでしょうか。
こちらのブログもこちらで教えていただいた記述方法で調整されているのでしょうか？
役に立ててよかったです(*^-^*)
当ブログでは、文字の大きさの設定はやっていません。
ただ、タイトルの文字数を３２文字前後にするように気をつけているだけです。
おはようございます。
「見出し」とは記事のタイトルのことでした。
モバイルと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%;/*%をいじって大きさを変更してください。*/ } }で変更できます！
パーセンテージをいじって大きさを変更してください。
いつもブログを楽しみにしております。
Cocoonを利用してブログをつくっているところなのですが、こちらの記事にある見出しの見え方を変更したいと思っています。
見出しの文字の大きさを変更したいのですが、モバイルとＰＣでそれぞれフォントの大きさを変えたいのですが、どのようにすればよいでしょうか？
ブログの記事のタイトル（H1?)の文字がデフォルトでは大きいような気がしており、特にモバイルを小さくしたいと思っています。
コメントありがとうございます！
確認ですが、ミーさんがおっしゃている「見出し」とはタイトルの事でしょうか？
それとも、本文内の各見出ですか？