Cocoon一覧タイトル：h1タグを装飾・h1タグタイトル前に画像を入れる時のCSS

Cocoon一覧ページのh1タグとは、カテゴリ一覧・タグ一覧・月ごとのアーカイブ一覧・書いた人author一覧などのタイトルです。

アーカイブページのh1タグ：タイトルをデォルトからホンノリ装飾したら、個性がでてプチオリジナル感もだせるのでザっと紹介します。

一覧ページのh1タグを装飾する

例えばカテゴリ一覧のビフォーアフター例として。

.archive-title {
	color: #9A9191;
	background: #ddd;
	padding: 1em;
	margin: 0 0 1em;
	border-left: 5px solid #999;
	border-radius: 0 3px 3px 0;
}
@media screen and (max-width: 500px) {
	.archive-title {
		font-size: 20px;
	}
}

.archive-title {
	color: #9A9191;
	background: #fff3f3;
	padding: 1em;
	margin: 0 0 1em;
	border-left: 8px solid #ffd7d7;
	border-radius: 0 3px 3px 0;
}
@media screen and (max-width: 500px) {
	.archive-title {
		font-size: 20px;
	}
}

.archive-title {
	color: #1e7d00;
	background: #f6fff3;
	padding: 1em;
	margin: 0 0 1em;
	border-left: 8px solid #c7ffb5;
	border-radius: 0 3px 3px 0;
}
@media screen and (max-width: 500px) {
	.archive-title {
		font-size: 20px;
	}
}

その他hタグの装飾は、以下の通り。見出し専用の装飾を探す必要はないよみたいな事も書いてます。

LINKCocoon見出しのカスタマイズ：hタグ装飾が反映しないとき試す（セレクタ）指定方法

一覧ページのタイトル前に画像をいれ、位置調整をしたいときCSS

画像のサイズを適切な大きさに調整済み・未調整によってCSSの書きかたが変わります。

WebFontより画像のほうが重たいし、画像の大きさ調整をしたほうがCSSも短くなるし、読み込む速度的にも良いのでオススメかな。

色んな状況もあるかと思うので、適当な大きさの画像・調整済み画像のとき、2種類のCSSを書いておきますね。

url(ここ画像URL指定)とある場合、画像のパスを入れてください。以下は例。

url(https://domain.com/wp-content/…/hoge.png);

適当な大きさの画像をいれる場合のCSS

.archive-title span:before {
	content:"";
	background: url(ここ画像URL指定) no-repeat; /* 背景 */
	background-size: contain; /* 背景を領域におさめる */
	display: inline-block; /* これが無いと高さ指定がね… */
	width: 1.5em; /* 幅：例）1.5文字分 */
	height: 1.5em; /* 幅と高さで画像の大きさがかわる */
	vertical-align: -20%; /* 画像上下の位置調整を */
}

適切な大きさに調整済み画像の場合、スタイル指定方法

.archive-title span:before {
	content: url(ここ画像URL指定);
	padding-right: 0.3em; /* 右余白調整を */
	display: inline-block;
	vertical-align: 10%; /* 上下の位置調整を */
}

一覧毎に画像を変更したい！h1タイトル前に文字を入れるCSS

カテゴリ・タグ・月間アーカイブ一覧ごとに違った画像を入れたい場合。

またタイトル前に文字を入れるのにPHPで編集する必要はない。と個人的に思うのでCSSで追記する方法です。※私はタイトル前に文字は入れてません

font-familyを合わす必要も合わすとキレイに表示されますが、一部のみ紹介して割愛します。

• フォントの太さやwebフォントの兼ね合いで指定（Cocoon設定：全体タブ）と同じように指定するなど…。

	font-family: "Rounded Mplus 1c",sans-serif;
	font-weight: 600;

カテゴリ一覧の場合

.archive-title .fa-folder-open:before {
	content: url(画像のURL)" カテゴリ";
}

別の指定方法.category .archive-title span:before

文字列を消したい場合は、" カテゴリ"を削除。indexにしていると、CSSで追記した文字列でるかな？確認してません。

一括変更ができる面が便利ってな話です❦

タグ一覧の場合

.archive-title .fa-tags:before {
	content: url(画像のURL)" タグ";
}

別の指定方法：.tag .archive-title span:before

文字列を消したい場合は、" タグ"を削除。

月間アーカイブ一覧の場合

.archive-title .fa-calendar:before {
	content: url(画像のURL)" 月別";
}

別の指定方法.date .archive-title span:before

文字列を消したい場合は、" 月間"を削除。

ユーザー記事一覧の場合

.archive-title .fa-user:before {
	content: url(画像のパス);
}

別の指定方法.author .archive-title span:before

 画像位置など調整が必要な場合のCSS

CSS{と}中に以下を追記

	padding-right: 0.3em; /*右に余白が欲しいとき */
	vertical-align: -10%; /*画像上下位置調整 */

例として。

.archive-title .fa-calendar:before {
	content: url(画像のURL);
	padding-right: 0.3em; /*右に余白が欲しいとき */
	vertical-align: -10%; /*画像上下位置調整 */
}

ユーザー記事一覧、タイトルの後ろに文字を入れたい場合

afterを指定し、content: "ここに文字列";文字列を書くと出力されます。

.author .archive-title:after {
	content: "が書いた記事";
}

ユーザー記事一覧は『ユーザー名（かうたっく）』だけでなく、『かうたっくが書いた記事』などでもh1タイトルとして『別に良いかな？』位な感じでつけました。

一覧記事別に表示を変えるポイント

今回のポイントは、CSSの指定方法かな！？

• カテゴリ一覧の場合

.category .archive-title span:before

上記はタイトル前ですが、以下のようにCSSを書くと

.category .archive-title:after { content: “のカテゴリ”; }

カテゴリタイトルが『WordPress』の場合：『Wordpressのカテゴリ』などとなる。

ピンク文字.categoryはカテゴリ一覧だけに反映するよ。って事。

• タグ一覧だけを指定

.tag .archive-title span:before

• アーカイブ（月間アーカイブ）一覧だけ指定

.date .archive-title span:before

• ユーザー別記事一覧だけを指定

.author .archive-title:after

こんな感じで一覧毎にスタイルの変更をするのも面白いです。

さいごに

今回一覧ページのh1タグ：タイトルの装飾で、かたいイメージがホンノリ柔らかくなればと思って。逆にハードにする事を可能だろし、サイトイメージに合わせて記事作成の合間にでも作ってみてくださいね＾＾

• AMPページにスタイルを書く必要はありません。
  • 一覧はAMP除外ページなので

ちなみにページのh2タグ前のアイコンもカテゴリIDなど指定すれば訪問者さん別に表示も変えられます。

これはまたの機会に書こうと思ってますが…まだまだ未定です。

記事を書く、体力を付けないと…(ヽ”ω`)

それでは。かうたっくでした！