フォント
「Cocoon設定>全体」でフォントは設定出来ますが、Google Chromeで表示した際、『游ゴシック』になっていなかったので追加しました。
style.css
/*フォント*/
body {
font-family: "游ゴシック", "YuGothic", "Yu Gothic", "YuGothic Medium",
'Hiragino Kaku Gothic ProN',
Meiryo, Helvetica, Arial, sans-serif;
color:#333333;
}
エントリーカードを小さく
1ページに表示するカテゴリー 一覧の数を多くしたかったのでエントリーカードのサイズ変更をしました。
サムネイルなど画像サイズの正方形化の takayuki様の案を頂戴しました。
style.css
/*--------------------------------------
エントリーカード小さく
--------------------------------------*/
.entry-card-thumb {
width: 200px;
}
.entry-card-content {
margin-left: 210px;
}
追加のボタンやアンダーライン
Simplicity2で使っているものを持って来ました。(テーマのもののアレンジと自作混在)
style.css
/*--------------------------------------
ボタンやアンダーライン
--------------------------------------*/
/* ボタンのデザイン*/
.botan-blue {
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 3px 10px;
margin: 0px 5px;
border-radius: 3px;
color: #ffffff;
background-color: #1486b8; border-style: solid; border-width: 1px; border-color: #026892;
}
.botan-white {
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 3px 10px;
margin: 0px 5px;
border-radius: 3px;
color: #333333;
background-color: #ffffff; border-style: solid; border-width: 1px; border-color: #333333;
}
.botan-black {
font-size: 16px;
font-weight: bold;
text-align: center;
text-decoration:none;
padding: 3px 10px;
margin: 0px 5px;
border-radius: 3px;
color: #ffffff;
background-color: #000000; border-style: solid; border-width: 1px; border-color: #000000;
}
/* アンダーライン*/
.grn-under {
border-bottom: solid 3px #00ff00;
}
.pink-under {
border-bottom: solid 3px #ff00ff;
}
.mizu-under {
border-bottom: solid 3px #00ffff;
}
/*黄色マーカーの頭に文字追加*/
.grnmarker {
background: linear-gradient(transparent 0, #ccffcc 0);
}
.pinkmarker {
background: linear-gradient(transparent 0, #ffccff 0);
}
.mizumarker {
background: linear-gradient(transparent 0, #ccffff 0);
}
/*黄色アンダーラインマーカーの頭に文字追加*/
.grnmarker-under {
background: linear-gradient(transparent 50%, #ccffcc 50%);
}
.pinkmarker-under {
background: linear-gradient(transparent 50%, #ffccff 50%);
}
.mizumarker-under {
background: linear-gradient(transparent 50%, #ccffff 50%);
}
モバイルメニュー
モバイルメニュー時のメニューを装飾したかったんです。
Cocoonメンバーの『かうたっく』先生に教えていただきました。
CocoonスライドインのNaviメニュー!背景など可愛くカスタマイズするCSS
設置例
style.css
/* ---------------------------------------
スライドインのカスタマイズ
--------------------------------------- */
/* モバイルメニューバー背景色を変更 */
.mobile-menu-buttons {
background: #●●●;
}
/* メニュー背景画像に変更 */
.navi-menu-content {
background: url("images/bg.png") top left;
background-attachment: fixed;
}
/* リンク文字色を変更 */
.menu-drawer a {
color: #●●●;
}
/* マウスオン文字色を変更 */
.menu-drawer a:hover {
background-color: #●●●;
font-weight: bold; /* 文字を太く */
color: #●●●; /* ここを変更 */
}