Cocoon一覧ページのh1タグとは、カテゴリ一覧・タグ一覧・月ごとのアーカイブ一覧・書いた人author一覧などのタイトルです。
アーカイブページのh1タグ:タイトルをデォルトからホンノリ装飾したら、個性がでてプチオリジナル感もだせるのでザっと紹介します。
一覧ページのh1タグを装飾する
例えばカテゴリ一覧のビフォーアフター例として。

デフォルト一覧ページ

以下CSSで装飾した一覧の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; } }

以下CSSはグリーン系
.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

一覧ページのhタグ前に画像:例)ユーザー記事一覧

例2)月間アーカイブ
画像のサイズを適切な大きさに調整済み・未調整によって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タイトルとして『別に良いかな?』位な感じでつけました。

一覧ページのhタグ画像を入れた例
一覧記事別に表示を変えるポイント
今回のポイントは、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
こんな感じで一覧毎にスタイルの変更をするのも面白いです。
CSSだけでなくPHPファイルで指定する方法もあります。
さいごに
今回一覧ページのh1タグ:タイトルの装飾で、かたいイメージがホンノリ柔らかくなればと思って。逆にハードにする事を可能だろし、サイトイメージに合わせて記事作成の合間にでも作ってみてくださいね^^
- AMPページにスタイルを書く必要はありません。
- 一覧はAMP除外ページなので
ちなみにページのh2タグ前のアイコンもカテゴリIDなど指定すれば訪問者さん別に表示も変えられます。

子供の誕生日サプライズの見出し

ダイエット系記事の見出し

料理系記事の見出し
これはまたの機会に書こうと思ってますが…まだまだ未定です。
記事を書く、体力を付けないと…(ヽ”ω`)
それでは。かうたっくでした!
Comments