[無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました

WordPressテーマ

WordPressテーマ Cocoon イメージ

リリース当初から何かと話題になっている無料WordPressテーマのCocoonですが、Simplicityと同様に機能はこれでもかってくらい盛り沢山なのに対して、見た目的にはちょっと寂しいと感じている人もいるのではないかと思います。

私とか(またそれか)

そこで、せめて見出しだけでもカスタマイズしたいという事で、Cocoonの各見出し部分のclassセレクタをひと通り調べてみました。カスタマイズ例として簡単なサンプルも挙げていますが、あくまでもclassセレクタの紹介がメインなのでスタイル自体は自分で頑張って下さいね?という点はご了承を。

投稿・固定ページの見出しなど

デベロッパーツールの使い方がよくわからない内は、簡単そうに見えて意外と苦労させられる事もあるのがこの記事内の見出しではないでしょうか。テーマと言うかテーマの作者さんによってclassセレクタが微妙に違う事もあって、汎用的なCSSの単純コピペではうまくいかない場合もあります。

単純にh2やh3としてしまうと思わぬ部分にまで影響を及ぼす場合があるので、確実に装飾したい部分だけピンポイントで適用するclassセレクタを指定するのがベストです。とか言って当エントリーで紹介するclassセレクタが必ずしもそうとは限りませんが、出来るだけそうなるようにはしたつもりです。

余談ですが、デフォルトのボーダーがジャマな時は1本づつ消すより

一旦クリアした後であらためてボーダーを設定
.class {
	border: 0;
	border-bottom: 1px solid #008080;
}

このように一旦クリアしてから引きたい部分のボーダーを設定するとスッキリします。

記事のタイトル

これは.article h1でも構いませんが、タイトル部分に限定する意味であえてこうしてみました。一般的に記事内でh1を使う事はまず無いので、ぶっちゃけそこまで気にする必要は無いかもしれません。

投稿・固定ページタイトル
h1.entry-title {
	text-shadow: 1px 1px 0 #3f3f3f;
}
ちなみに.entry-titleだけだと.article h1より優先順位が低いので、そちらで指定されているスタイルが上書き出来ないからという理由もあります。Cocoonの場合はline-heightとfont-weightだけなのでさほど影響は無さそうですけど。

記事内の各見出し

記事内の各見出しはこんな感じで指定します。サンプルはh2とh3しか用意していませんが、h4からh6も同様の書き方でOKです。

見出し2
.article h2 {
	color: #fff;
	background: -webkit-linear-gradient(#66cdaa 0%, #008080 100%);
	background: linear-gradient(#66cdaa 0%, #008080 100%);
}
見出し3
.article h3 {
	background-color: #f0fff0;
	border: 0;
	border-left: 5px solid #008080;
}

引用文

背景色を変えたり引用符に少し手を加えるだけで雰囲気は結構変わるものです。と言うか、classセレクタでもCocoon独自のものでもありませんがそこはスルーで。

引用文
blockquote {
	background-color: #f0fff0;
}

blockquote::before,
blockquote::after {
	color: #008080;
	content: '”';
}

アイキャッチに重ねたカテゴリー

記事の先頭に挿入されるアイキャッチ画像の左上にあるカテゴリーラベルです。細かい部分ではありますが、拘りのある人はこういう所までイジりたいんじゃないかと。

アイキャッチに重ねたカテゴリー
.eye-catch .cat-label {
	border: 0;
	background-color: #008080;
}

記事下カテゴリー

こちらは記事下に表示するカテゴリーです。

記事下カテゴリー
.cat-link {
	color: #fff;
	background-color: #008080;
}

記事下タグ

同じく記事下に表示するタグです。

記事下タグ
.tag-link {
	background-color: #f0fff0;
}

「関連記事」見出し

関連記事の一覧に表示される各記事の見出しでは無く、「関連記事」という見出しそのものです。

「関連記事」見出し
.related-entry-heading {
	padding: 10px 20px;
	color: #008080;
	background-color: #f0fff0;
	box-shadow: 2px 2px 0 #f0f0f0;
}

「コメント」見出し

「関連記事」見出しと同様に「コメント」という見出しです。ちなみにサンプルではFont Awesomeを使用してみました。

「コメント」見出し
.comment-title {
	padding: 10px 20px;
	color: #008080;
	border-left: 8px solid #008080;
}

.comment-title::before {
	font-family: "FontAwesome";
	content: "\f086";
}

ウィジェットのタイトル

ウィジェットのタイトル部分のclassセレクタは配置するウィジェットエリアによって変わります。

サイドバーウィジェット

サイドバーとサイドバースクロール追従で共通です。idセレクタを使った方がいいような気がしなくもないですが、Cocoonで使用しているclassセレクタに合わせてみました。

サイドバーウィジェット
.sidebar h3 {
	padding: 5px 10px;
	background-color: #f0fff0;
	border-bottom: 1px solid #008080;
}
カスタムHTMLで作成したコンテンツ内のh3にも適用されます。

フッターウィジェット

フッター左・中・右で共通です。こちらもidセレクタでよさそうですがフッターだけ違うのもな…という事でclassセレクタに統一してあります。

フッターウィジェット
.footer h3 {
	padding: 5px 10px;
	background-color: #f0fff0;
	border: 1px solid #008080;
}
サイドバー同様にカスタムHTMLで作成したコンテンツ内のh3にも適用されます。

上記以外のウィジェット

メインカラムに表示するウィジェットです。ウィジェットの名称が投稿・固定ページ・インデックスリストから始まるウィジェットがこれに該当します。

メインカラムに表示するウィジェット
.main-widget-label {
	padding: 10px;
	text-align: center;
	border-bottom: 1px solid #008080;
}

ちなみにこのclassセレクタですが、デフォルトでは何も設定されていません。

投稿関連記事下とメインカラムスクロール追従には.widget h2というclassセレクタも使われているので、その分のスタイルもプラスされる事に注意です。

ウィジェット毎のclassセレクタ

ウィジェット単位で個別指定も出来るようにそれぞれのclassセレクタをまとめてみました。中には命名規則的に「ん?」と思う部分もありますが、現時点(バージョン0.4.6)ではこれで間違い無いはずです。

サイドバー
.widget-sidebar-title
サイドバースクロール追従
.widget-sidebar-scroll-title
メインカラムスクロール追従
.widget-main-scroll-title
投稿タイトル上
.widget-above-single-content-title
投稿タイトル下
.widget-below-single-content-title
投稿本文上
.widget-single-content-top-title
投稿本文中
.widget-single-content-middle-title
投稿本文下
.widget-single-content-bottom-title
投稿SNSボタン上
.widget-above-single-sns-buttons-title
投稿SNSボタン下
.widget-below-sns-buttons-title
投稿関連記事下
.widget-below-related-entries-title
固定ページ本文上
.widget-page-content-top-title
固定ページ本文中
.widget-page-content-middle-title
固定ページ本文下
.widget-page-content-bottom-title
固定ページSNSボタン上
.widget-above-page-sns-buttons-title
固定ページSNSボタン下
.widget-below-page-sns-buttons-title
インデックスリストトップ
.widget-index-top-title
インデックスリストミドル
.widget-index-middle-title
インデックスリストボトム
.widget-index-bottom-title
フッター左
.widget-footer-left-title
フッター中
.widget-footer-center-title
フッター右
.widget-footer-right-title
フッター(モバイル用)
.widget-footer-right-title
404ページ
.widget-404-page-title

フロントページ・記事一覧など

主に投稿・固定ページやウィジェット以外の部分になります。

通知エリア

グローバルメニューの下に表示されるお知らせ用の帯状の部分です。背景や文字の色はCocoon設定から変更出来ますが、グラデーションやシャドウで装飾したい場合などに使用します。

通知エリア
.notice-area {
	background: -webkit-linear-gradient(#66cdaa 0%, #008080 100%);
	background: linear-gradient(#66cdaa 0%, #008080 100%);
}

アピールエリア

このアピールエリアも通知エリアと同様にCocoon設定から変更出来るので、デフォルトのままで良ければ特にカスタマイズする必要はありません。

アピールエリア タイトルとボタン
.appeal-title {
	border-bottom: 2px solid #008080;
}

.appeal-content .appeal-button {
	text-shadow: 2px 2px 2px #000;
	box-shadow: 2px 2px 2px #000;
}

記事一覧・スライダーのカテゴリーラベル

カルーセルスライダーと一覧リストのサムネイル左上に表示しているカテゴリーのラベルです。同じclassセレクタを使用しているので両方に反映されます。

記事一覧・スライダーのカテゴリーラベル
.cat-label {
	color: #fff;
	background-color: #008080;
}

カテゴリー・アーカイブページのタイトル

カテゴリーやタグ、月別のアーカイブページのタイトル部分です。

カテゴリー・アーカイブページのタイトル
.archive-title {
	text-shadow: 5px 5px 1px #999;
}

テーマのカスタマイズはまず見出しから

ユーザーが多ければ多いほど当然デザインも被る事になるので、何かしら工夫しない限りサイトの外観に関しては他のCocoonを利用しているサイトと同じになってしまいます。確かに大切なのはコンテンツの内容だと思いますが、サイトの見た目も疎かにしてはいけないのではないかと思います。

そんな時に労力の割に効果が大きいのが見出しのカスタマイズだと思いますので、当エントリーがその手助けになれば幸いです。デザインに関しては「css 見出し」でググれば詳しいサイトがヒットしますので、そういったサイトを参考に頑張っていただければと思います。