『tachimade』のカテゴリーとは別のジャンルでページを作りたくなったので、ちまちまとサイトのカスタマイズを行っております。
今回は、固定ページに新しく子サイトを作成するイメージでやってみたのですが、ヘッダーの変更など、割と手間取ったので記録しておきたいと思います。
正しいやり方なのかは分かりません！(笑)
いろいろ試してみた結果なので、使用しているテーマによってクラス名など変わるところがあると思いますがご了承ください。
私は無料テーマのcocoonを使用しています。
失敗しても元に戻せるようにバックアップを取っておくと安心ですよ。
固定ページやカテゴリーページのヘッダーロゴの切り替え方
PHPファイルを編集…す…る…
ヘッダーの変更をする方法を探していると、PHPファイルのheader.phpを編集する方法を紹介しているサイト様にはたくさん出会いました。
そちらの方が簡単なのかな？
ただ、PHPを触るたびにエラーを出すPHP恐怖症の私には到底理解できるものではないので、ここでは全力でスルーしたいと思います。(笑)
気になる方はググってみてください。
トップページとは別のヘッダーロゴを固定ページで表示させる
トップページのヘッダーロゴはダッシュボードの外観でセットしたものになりますよね。
トップページにはそのままのヘッダーロゴを使い、固定ページやカテゴリーページではヘッダーロゴを変える場合のカスタマイズです。
追加のヘッダーロゴはメディアで画像をアップロードしておきましょう。
使用したい画像の画像URLを取得しておきます。
画像URLをCSS中の（”画像URL”）の中にコピペします。
以下のCSSは、赤文字の部分だけ変更してください。
全ての固定ページでヘッダーロゴを変える
css.page .logo > a img {
visibility: hidden;
}
.page .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
指定した固定ページのみヘッダーロゴを変える
visibility: hidden;
}
.page-id-●●● .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
ページIDは、固定ページの編集から取得します。
固定ページによってIDが異なるので、変更したい固定ページのIDを確認してみてください。
全てのカテゴリーページでヘッダーロゴを変える
css.category .logo > a img {
visibility: hidden;
}
.category .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
指定したカテゴリーページのみヘッダーロゴを変える
visibility: hidden;
}
.category-●● .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
特定のカテゴリーに属する記事のヘッダーロゴを変える
visibility: hidden;
}
.categoryid-●● .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
全てのタグページでヘッダーロゴを変える
visibility: hidden;
}
.tag .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
指定したタグのみヘッダーロゴを変える
visibility: hidden;
}
.tag-●● .logo > a .site-name-text {
display: inline-block;
background: url(“画像URL“) no-repeat;
background-size: contain;
background-position: center;
}
グローバルナビを特定のページで非表示にする
大体のヘッダーにはロゴとナビバーが設定されていると思います。
トップページではグローバルナビを表示したいけど、特定のページでは非表示にしたい場合
display:none;
}
そのほかは.page部分に入るクラス名を変更してください。
（navはそのまま）
クラス名.page /*全ての固定ページ*/
.page-id-●● /*指定の固定ページ*/
.category /*全てのカテゴリーページ*/
.category-●● /*指定のカテゴリーページ*/
.categoryid-●● /*指定したカテゴリーに属する記事*/
.tag /*全てのタグページ*/
.tag-●● /*指定のタグページ*/
複数のページを指定する場合
『.クラス名-●●』で複数のページIDを指定をする場合は、カンマ（,）で区切って記載します。
記入例
.page-●●,●●,●●
.category-●●,●●,●●
おわり
ここまで書いてきましたが、これはcocoonを使用している場合のセレクタになります。
編集したい箇所のクラス名が分からない場合は、デベロッパーツールなどで調べることが出来るので活用してみてください。
そして、この記事で書いたCSSよりも簡単なものがあるかもしれません。
むしろあると思います！
そんな場合は、ぜひ私にも教えてください:-P