超人気の『Simplicity2』の後継『Cocoon』のデモサイトを兼ねています。

その他のCSS

フォント

「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: #●●●; /* ここを変更 */
}
タイトルとURLをコピーしました