テキスト展示は背景にこだわりたい

銀魂のサブタイトルみたいになっちゃいましたが。

前のサイトではよくやっていた、テキストごとに背景を変える方法。
これをWordPressでも実現したいのです。

まずは記事ごとに個別cssを設定する方法。
各種方法を記事にしてくださってるのがこちら。

https://naifix.com/article-css/

3つ目の、CSS専用欄を作成する方法を採用しました。
なるほど投稿画面がこんな感じになるんだね。

あとは背景を設定する方法ですが、前のサイトでもやっていたとおり、背景にimgファイルを設定するCSSを専用欄に書き込みます。

結果はこちら。

あーーーーー・・・

ですよね、そう簡単に問屋は卸さない(レトロ表現)
確かに背景画像は設定出来たけど、なんかこう・・・こうじゃない感がスゴイ。

こうなってみて気づいたんですけど、個別ページでサイドバー出てるの邪魔だな・・・。
ブログタイトルとメニューの位置もイマイチ・・・。
イラストと漫画はそんなに気にならないんですけど、出来ればテキストは世界に没入していただくためにも余計な情報は最低限にしたい。

というか、メニューは一番上にあればそんなに違和感ないんですよね。
サイドバーとブログタイトル、フッターだけは消したい。

まずは一番簡単に出来そうなので、サイドバーから消しちゃいます。
何度かやってる通り、カテゴリがblogの時だけサイドバーを表示するようにif文を追加。

うん、サイドバー消えましたね。
しかしコンテンツの幅がサイドバーがあった時のまんま。

このテーマは表示形式を1カラムかサイドバー付きかを選択できるようになっているので、その条件分岐の部分を探して、カテゴリがblogの時以外は強制的に1カラムにしてしまいます。

うん、出来ました。
でもコンテンツ部分の背景色が白に設定されているので、背景画像を全部つぶしちゃってますな。
ただ、これ単純に背景色を無しにすれば良いかというと、暗めの色の背景色や画像の場合、テキストが紛れて見えなくなっちゃう。

なので、透過率を少しさげた白色の素材を作成して、コンテンツ部分の背景画像に設定します。

コンテンツ部分うっすら背景が透過して見えるようになりました。
ナビゲーションの部分も同じ透過素材を背景画像に設定します。

さてブログタイトルとメニューとフッターなんですが、これ結構フクザツで、サイト全体で同じPHPファイルを使ってるんですね。
条件文入れるのも可なのかもしれないけど、ちょっとデザイン弄るだけで違うのではと思ったので。

メニューとフッターの背景色を黒に替えてみました。
シックな感じでなかなか良いと思うんですよね。
というわけで、これでテキストもWordPressへの移行が可能になったかなと思います。