ちょっとブログの雰囲気を変える為に”美しいグレーに統一されたデザインの「grayish」スキン”に変更してみました。
Cocoonではボタン一つでスキンが変更できるので、ホントこのテーマが無料で使用できていることに毎回ビックリします。
今回は以前まで使用していたCSSを記録する為に残します。
Cocoon Child: スタイルシート (style.css)
/* 目次全体デザイン */ .toc{ background:#F9F9F9; /* 目次全体の背景色を変える場合はここを変更 */ border:none; display:block; border-top:5px solid; border-top-color:#79b3ff; /* defalt#FFC679 */ box-shadow: 0 2px 2px rgba(0,0,0,0.2); padding: 20px 25px; } /* 目次の文字指定 */ .toc-title { text-align:left; margin: 0 20px 20px -10px; padding-left: -20px; font-size: 23px; font-weight: 700; color: #79b3ff; /* 目次の文字色を変える場合はここを変更 defalt#FFC679 */ } /* 目次のデザインカスタマイズ */ .toc-content ol { padding: 0 0.5em; position: relative; } .toc-content ol li { line-height: 1.5; padding: 0.7em 0 0.5em 1.4em; border-bottom: dashed 1px silver; list-style-type: none!important; } /* 目次の各節の先頭にあるアイコンを設定 */ .toc-content ol li:before { font-family: FontAwesome; content: "\f138"; /* アイコンを変える場合はここを変更 */ position: absolute; left : 0.5em; color: #79b3ff; /* 色を変える場合はここを変更 defalt#ffc679 */ } .toc-content ol li:last-of-type { border-bottom: none; } .toc-content .toc-list li { font-weight:700; /* h2のみ太文字に */ } .toc-content .toc-list li li { font-weight:normal; /* h3以降の文字サイズを普通に */ } .entry-content h2 { font-size: 24px !important;/*H2の文字のサイズ*/ border-left: 5px solid #323232;/*左線*/ padding: .5em .7em;/*余白*/ background: rgba(50,50,50,.07);/*背景色*/ color: #323232; margin-bottom: 15px; border-top: none; border-bottom: none; } /* マウスが来たら動く */ .a-wrap:hover{ transform: translateY(-2px); box-shadow: 2px 2px 6px 0 #ccc; } .a-wrap:hover { background-color: #FFFFFF; } /* サイドバー文字小さく */ .widget-entry-card { font-size: 14px; } .nwa .author-box .author-description { font-size: 14px; } .widget-sidebar ul li a { font-size: 16px; }
/* ボックスメニューの設定 */ .box-menu{ background: #FFFFFF; /* 背景色 */ box-shadow: inset 1px 1px 0 0 #F2F0EE, 1px 1px 0 0 #F2F0EE, 1px 0 0 0 #F2F0EE; /* 枠線の設定 */ } .box-menu-label{ color: #4d4d4d; /* 文字の色 */ } .box-menu-icon{ color: #2f4f4f; /* アイコンの色 */ } .wwa .box-menu { width: calc(100%/4); /* メニューの数 */ } /* オンマウス時の設定 */ .box-menu:hover{ box-shadow: none; /* 枠線を消す */ background: #F2F0EE; /* 背景色 */ } /* モバイル用の設定 */ @media screen and (max-width: 599px){ .box-menus .box-menu { width: calc(100%/2); /* メニューの数 */ } .box-menu-label{ font-size: 12px; /* 文字サイズ */ } .box-menu{ min-height: 50px; /* 高さ */ } }
/*アドセンス広告幅調整*/ .ad-area { overflow: visible; }
目次の変更だったり、H2などの見出しのカスタマイズが中心だったと思います。
「grayish」スキンを使うとなれば不要なCSSも消さないと、へんな表示になったり不具合が発生します。
もし元に戻す時が来た時の為に・・・。
Cocoon-grayish
grayish(グレイッシュ)は、無料で高機能なWordPressテーマ、Cocoonのスキンです。画面いっぱいに表示されるメインビジュアル、シンプルなデザイン、独自のテーマカスタマイザーが特徴です。どなたでも自由にご使用いただけます。
コメント