WordPress（Cocoon）のカスタマイズ覚書です。メモしておかないと「あれ？」ってなってしまうので・・。このサイトにとっては、重要な「虎の巻」です。
Cocoonは、完成度の高いWordPressテーマです。ありがたく利用させて頂いてます。
WordPress（Cocoon）のカスタマイズ覚書
スタイルシート ( Cocoon Child: style.css)
スキン：Fuwari -褐色(かちいろ)- を利用させていただいてます。
背景色全体を調整
/* 背景色 */
body{
background-color: #fcfcfc;
}
.header-container, .main, .sidebar, .footer {
background-color: #fcfcfc;
}
タイトルを少し太く・大きく・薄く調整
/* タイトルを少し太く・大きく・薄く調整 */
.entry-card-title{
font-size: 1.5rem;
color: #7B7B7B;
font-weight:600 !important;
}TOPページの抜粋
/* TOPページ抜粋 文字を大きく・行間を開けて */
/* Cocoon設定 自動生成抜粋文字数 128 */
.entry-card-snippet{
font-size: 1em;
line-height: 1.9 !important;
}「cocoon」で試したことの覚書（適応させてません）
カテゴリ・アイコンボタンのデザインをカスタマイズ
背景色と文字色を替えてみました。まずは一括設定してから、必要に応じて個別設定するんじゃないかな？と想像しました。・・正解か知りません。^^;
結果的に変更しませんでした。
まず一括設定で全体を変更して・・
/* カテゴリ アイコン */
.cat-label,
.cat-link{
color: #fff;
background-color: #3b5998;
}（#3b5998」はfacebookの基本色）
その後・・個別にカテゴリーアイコンを設定
- [投稿]
- ->[カテゴリー]
- ->[編集]
- ->カテゴリ色
- -> 背景色[色を選択] 文字色[色を選択]
cocoon サードバーの見出しデザインを少し変更してみた
デザイン変更というと大袈裟ですね。
/* サイドバーの見出しデザイン */
.sidebar h3 {
padding: 3px 10px; /* 上下の隙間をすこし狭く */
font-size: 15px; /* 文字をちょっと小さく */
letter-spacing: 2px; /* 文字の間隔を調整 */
}ちょっと触ってみて、元に戻しました。^-^; 適応させてません。
cocoon標準機能の変更部分 メモ
[cocoon標準機能] ナビゲーションメニュー２段表示
ＴＯＰのナビゲーションメニューにサブタイトルを追加して２段表示したいと思って試してみたことの覚書です。
- 「外観」⇒「メニュー」
- 画面上部「表示のオプション▼」
- 「 詳細メニュー設定を表示 」⇒「説明」☑チェック
- メニュー構造を開くと「説明」欄が追加されているので・・
- サブタイトルを記入して
- 「メニューを保存」
「Cocoon設定」⇒「ヘッダー」の「ヘッダーレイアウト」は 「トップメニュー」を選択
「トップメニュー小」or「トップメニュー小(右寄せ)」の選択では２段表示されない仕様のようです。
[cocoon標準機能] パンくずリスト設定
- 「Cocoon 設定」
- 「投稿」
- 「パンくずリスト設定」
- 「パンくずリストの配置」 メインカラムトップ
- 「パンくずリストに記事タイトルを含める」☑
具体的には？ >【Cocoon】パンくずリストの設置方法
[cocoon標準機能] 関連記事設定
- 「Cocoon 設定」
- 「投稿」
- 「表示タイプ」ミニカード
- 「表示数」 ８
[cocoon標準機能] ソースコード設定
- ハイライト表示 ☑
- 行番号表示 ☑
- ハイライトスタイル googlecode
サイドバー 記事内の目次
- 外観
- ウイジェット
- [C]目次
- サイドバースクロール追従
コメント