WordPress(Cocoon)のカスタマイズ覚書

WordPress

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標準機能] ナビゲーションメニュー2段表示

TOPのナビゲーションメニューにサブタイトルを追加して2段表示したいと思って試してみたことの覚書です。

  • 「外観」⇒「メニュー」
  • 画面上部「表示のオプション▼」
  • 「 詳細メニュー設定を表示 」⇒「説明」☑チェック
  • メニュー構造を開くと「説明」欄が追加されているので・・
  • サブタイトルを記入して
  • 「メニューを保存」

「Cocoon設定」⇒「ヘッダー」の「ヘッダーレイアウト」は 「トップメニュー」を選択

「トップメニュー小」or「トップメニュー小(右寄せ)」の選択では2段表示されない仕様のようです。

[cocoon標準機能] パンくずリスト設定

  • 「Cocoon 設定」
  • 「投稿」
  • 「パンくずリスト設定」
  • 「パンくずリストの配置」 メインカラムトップ
  • 「パンくずリストに記事タイトルを含める」☑

具体的には? >【Cocoon】パンくずリストの設置方法

[cocoon標準機能] 関連記事設定

  • 「Cocoon 設定」
  • 「投稿」
  • 「表示タイプ」ミニカード
  • 「表示数」 8

[cocoon標準機能] ソースコード設定

  • ハイライト表示 ☑
  • 行番号表示 ☑
  • ハイライトスタイル googlecode

サイドバー 記事内の目次

  • 外観
  • ウイジェット
  • [C]目次
  • サイドバースクロール追従

コメント

タイトルとURLをコピーしました