[無料WordPressテーマ] Cocoonの見出しカスタマイズ用に主なclassセレクタを調べてみました
リリース当初から何かと話題になっている無料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;
}
記事内の各見出し
記事内の各見出しはこんな感じで指定します。サンプルはh2とh3しか用意していませんが、h4からh6も同様の書き方でOKです。
.article h2 {
color: #fff;
background: -webkit-linear-gradient(#66cdaa 0%, #008080 100%);
background: linear-gradient(#66cdaa 0%, #008080 100%);
}
.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;
}
フッターウィジェット
フッター左・中・右で共通です。こちらもidセレクタでよさそうですがフッターだけ違うのもな…という事でclassセレクタに統一してあります。
.footer h3 {
padding: 5px 10px;
background-color: #f0fff0;
border: 1px solid #008080;
}
上記以外のウィジェット
メインカラムに表示するウィジェットです。ウィジェットの名称が投稿・固定ページ・インデックスリストから始まるウィジェットがこれに該当します。
.main-widget-label {
padding: 10px;
text-align: center;
border-bottom: 1px solid #008080;
}
ちなみにこの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 見出し」でググれば詳しいサイトがヒットしますので、そういったサイトを参考に頑張っていただければと思います。
ディスカッション
[…] https://unlimitedchaos.net/uc/headline-customization-of-wordpress-theme-cocoonunlimitedchaos.net […]