このブログ、WPに移転当初（２０１８年5月）より「LION MEDIA」というテーマを使っています。
それなりに色を変更などして使えているし、しばらくカスタマイズはいいかなと思っていたのですが、メッセージをいただき、
初回のカスタマイズでそのままにしていたカテゴリー別ページのタイトルの変更をやってみようと思い立ちました。
前回苦戦したのはなぜか子テーマCSSに書いてもうまく動かないと言うところ。
セレクタの名前が間違ってるのか、書き方がまずいのか、、
見よう見まねでやっているのでなにが正しいのかは、今もわかりません。
ただ、とりあえずなんとかなったのでメモしておきます。
初回にカスタマイズ記事はこちら。（この時カテゴリー別ページのページはなんともなりませんでした）
→https://misako1104.com/wp-lion-media-01/
ヘッダー画像（キービジュアル）を無理やりつけた話はこちら
→https://misako1104.com/wp-lion-media-02/
LION MEDIAの特徴的なデザイン
LION MEDIAを使い始めて一番気になったのが、結構濃い！と言うこと。
メディア向けと言うこともあり、黒を効果的に使って、画面をはっきりさせているような印象があります。
私のサイトはどちらかと言うと白っぽくしたかったので、このはっきりしたところを白くしていくようなカスタマイズになっています。
LION media配布サイトはこちら→http://lionmedia.fit-jp.com/
カテゴリー別ページのタイトル変更のやり方
WPにあまり詳しくないのですが、どうやらテーマのCSSをそのまま変えるのではなく、子テーマのCSSに書いていくことで、
元々のファイルは残しつつ、上書きするようなカスタマイズ方法がいいようなんですね。
と言うわけで、カテゴリー別ページのタイトルのCSSセレクタをまずは確認してみます。
（私はGoogle Choromeのデベロッパーツールを使っています。@media only screen and (max-width: 767px)の部分は繰り返しになるので省略）
content: “”;
background-color: rgba(0,0,0,0);
background-image: linear-gradient(90deg, rgba(0,0,0,.15) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.15) 50%, transparent 50%);
background-size: 2px 2px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
こんな風になっています。
今回は格子状のグラデーションを外し、なにかしらグラデーションにしたかったので、上のブルーマーカー部分を子テーマに書き足してみます。
background-image: linear-gradient(to right, #405362 0%, #f7f7f7 100%); /*グラデーションはお好みです*/
background-size: auto; /*デフォルトにする*/
}
こんな風に、子テーマのCSSを書いてアップロードしてみたものの、動かない・・・なぜか子テーマのCSSが読み込まれないんですよね。
似たような形になっている個別ページのタイトルの部分は同じようにしてできたのでわからなくって・・・
そこでピンときました。
カテゴリーってカテゴリー種別毎にイメージカラーが設定できるので、
それを反映させるためにCSSクラス名が色々あります。
class=”categoryDescription bgc”
とか
class=”categoryDescription bgc-rosepink”
とか・・・
そのせいかなと・・・？今回、categoryDescription側しかCSSを書いていないので、後半のbgc-●●側がうまくいかない要因かもしれないです。
（未検証）
そういえば、同じように子テーマのCSSがうまく動かないのはヘッダーのカラーでした。
ここもテーマ側でカラーが設定できるためにうまくいかないのかもと思ったんです。
と言うわけで、テーマのカスタマイズから設定できる「追加CSS」に書いてみたところできました！
ちなみに追加CSSにがっつり色を書いてしまうので、イメージカラーは全く反映されなくなります。
反映するにはまた色々と考えないといけないと思いますが、（例えばイメージカラーのクラス毎に書いていくなど）
カテゴリー毎のイメージカラー・・・このブログはカテゴリーが現在親カテゴリーだけで１３個あり、なんかセンス良く１３色決められないので、
使っていないのでいいかあなと思っています。
現在の子テーマCSSと追加CSS
と言うわけで現在のCSSをメモしておきます。
子テーマCSS
/*フォントサイズ変更*/
body{font-size:1.4rem;}
html{font-size:70%;}
/*キービジュアル*/
.key {
display: block;
height: 340px;
background: url(----) no-repeat center center;
background-size: cover;
opacity: 0.8;
}
@media only screen and (max-width: 767px){
.key{
height: 200px;
}
}
.key__list {
display:none;
}
/*外部リンク用アイコン表示*/
.content a[target="_blank"]::after{
margin-right: 3px;
content: "\f08e";
font-family: FontAwesome;
display: inline-block;
vertical-align: -1px;
}
/*WPカードの幅を100%に*/
.wp-embedded-content {
max-width: 100%;
}
/*アイキャッチの小さいの非表示PC版のみ*/
.eyecatch.eyecatch-singleTitle{ display:none;}
/*タイトルを100%幅で書くPC版のみ*/
.singleTitle__heading{
width:100%;
}
/*エントリータイトルのシングル化スマホ版のみ*/
@media only screen and (max-width: 767px){
.archiveItem{
width:calc(100% - 20px);
}
}
/*記事タイトルの背景変更*/
.singleTitle::before{
background-image:none;
background-color: rgba(255,255,255,0.7);}
@media only screen and (max-width: 767px){
.singleTitle::before{
background-image:none;
background-color: rgba(255,255,255,0.7);}
}
.heading.heading-singleTitle,.dateList__item{color:#191919;}
@media only screen and (max-width: 767px){
.heading.heading-singleTitle,.dateList__item{color:#191919;}
}
/*記事タイトル下日付・カテゴリーなどの背景削除*/
.dateList.dateList-singleTitle{
background-color: inherit;}
@media only screen and (max-width: 767px){
.dateList.dateList-singleTitle{background-color: inherit;}
}
/*サイドバーカテゴリーのlistスタイル*/
/*サイドバーウィジェット カテゴリー調整*/
.widget ul li {
font-weight:bold;
}
.widget ul li .cat-item{
font-weight:normal!important;
}
.widget ul li .cat-item:before{
display:none!important;
}
.widget ul li {
margin-bottom: inherit!important;
border-top: inherit!important;
}
.widgetSticky {
padding-top: 130px;
}
/*アイキャッチ画像上のカテゴリー表示*/
.eyecatch__cat {
background: #FFF!important;
opacity: 0.8;
}
.eyecatch__cat a{
color:#3f3f3f;
}
.eyecatch__cat a:hover {
background: #3f3f3f;
color: white !important;
}
.u-txtShdw {
text-shadow: none!important;
}
/*スクエアボタン*/
.square_btn {
font-weight:normal!important;
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #ff0844;
border: solid 1px #ff0844;
border-radius: 3px;
transition: .4s;
}
.square_btn:hover {
background: #ff9899;
color: white !important;
}
追加CSS
ほんとは子テーマに書きたいけどうまくいかないCSSたちは追加CSSに書いたらうまくいきました。
/*ヘッダーカラー・ナビアイコンのカラー*/
.l-header{background-color:#FFFFFF;}
.menuNavi__link{color:#191919;}
/*カテゴリー別ページの背景変更*/
.categoryDescription::before{
background-image: linear-gradient(to right, #405362 0%, #f7f7f7 100%);
background-size: auto;
}
@media only screen and (max-width: 767px){
.categoryDescription::before{
background-image: linear-gradient(to right, #405362 0%, #f7f7f7 100%);
background-size: auto;
}
}
