当サイトをファーストビジュアルにしよう！という目論見で四苦八苦してきた経過はこちら。
テーマ「Cocoon」ですと、スキン「メイド・イン・ヘブン」や「grayish」 1が美しい効果の入ったファーストビジュアルを実現しています。…が、スキンを適用してしまうと今まで柳が独自カスタマイズをしてきた小説ページのレイアウトが崩れるなどの問題がありまして、この時はなんとかスキンを当てずにフロントページをファーストビジュアルにしようがんばってみたのでした。
一旦はアピールエリアを利用したファーストビジュアルのフロントページをつくってみたのですが、昨今このアピールエリアのテキストがどうにも邪魔くさく感じるようになりました。
そこで今回、なんとか画像をどどーんと押し出せる構成にならんもんかな、と再び七転八倒してみた経過について書いています。
プラグインという選択肢
「メイド・イン・ヘブン」の作者様はフロントページのための拡張プラグインも作成されています。
これはカッコいい！
早速トライしたのですが、以前にも呻吟した謎のスキマ（ファーストビジュアル部分とコンテンツ部分に謎のスキマがあくのですよ）を制御しきれずに断念。
結局、現行のアピールエリア改造をもうひと味加工する方針でいくことになりました。
CSSによるアピールエリアの改造
サイトの見た目を制御するのはCSS（Cascading-Style-Seat）なのですが、どこにその制御を当てるかを決めているのがクラス（class）。 10
.entry-title{
padding: 30px;
background-color: #ffff;
}
entry-titleはこの場合、投稿のタイトルに当てられています。だからこの{}の間に、タイトルを表示する場合にこんなふうにしてね、という命令（色、フォント、大きさ、背景その他諸々）を組み込むことができます。
ちなみにdisplay:none;と指定すれば表示させない、ということもできます。テンプレートでは表示させるようになってるんだけど、このページでは要らないよねえという場合 11に使っています。
自分でゼロからhtmlを打っていた頃は、クラス名なんて自分で指定してた訳です。
タイトル、サブタイトル、区切り線、段落それぞれのクラス名を自分で決めますから、指定の有効範囲を把握することはそれほど難しいわけではありません。 12
ところがWordPressでサイトをつくる場合、サイトのCSSなんてほとんどWordPressが制御してます。クラス名はWordPressやテーマが規定しているので、そもそもその要素が何で制御されるかが非常に見えづらいという事情が存在するのです。
WordPressに慣れた方ならお思いのことかと存じますが…
ちまちまCSS手打ち制御なんかしてないで、テーマが制御してくれるんならテーマの設定画面で操作すればいいのですよ。本来はね。
しかし、どうにもデザインに納得がいかない場合は追加CSS 13で直接制御したくなるのです。
ここで、ダイレクトにコパイ先生に訊いてみます。
クラス名を調べる方法を教えて
クラス名を調べる方法はとても簡単で、以下のどれかを使えばすぐに確認できます。
実務でよく使う3つの方法を紹介しますね。
ついでに訊いてみました。
「検証（Inspect）」を選択
は、エッジだとどうなりますか
Edge でもほぼ同じ操作でできますよ。
名前だけ少し違うだけで、やることは Chrome と同じです。
これで、制御しているクラス名を絞る方法は結構わかってきたのですが…もう一押し、具体的に訊いてみることにします。
アピールエリアのテキストがどのCSSで制御されているかクリティカルに捜し出す方法はありますか
あります。しかも 100％確実に “どのCSSが効いているか” を特定できる方法です。
これはプロのフロントエンドエンジニアが日常的に使うやり方で、Cocoon のように CSS が複雑なテーマでも一発で原因を突き止められます。
大きく出ましたコパイ先生。
どこまで本当かわかりませんが、一応これで成功はしたので覚え書きとして残しておきます。
もしよければ、あなたのアピールエリアの テキスト部分の HTML（調査でコピー） を貼ってくれれば、「どのCSSが効いているか」を私の方でも解析できますよ。
こう仰ってくれたので…
柳が出した答えを、件の部分のhtmlをスクショしたものといっしょにアップして答え合わせしました。正解、という御諚をいただいたのでこれで制御してみたら、まだちゃんと指定が当たらない。上記の方法でクラスに当たっているCSSを調べたところ、取り消し線で消された表示がありました。これは、より上位のCSSによって上書きされているという状況らしい。
これは全く別件の表示ですが、まあこんな感じ。
CSSが効かない場合の対処
これについてはとても良く整理していただいているページがありましたのでそちらを参考に。
平たく言えば、折角クリティカルに指定しててもより上位のCSSで別の指定があればそっちが優先されてしまうので、より強い指定が必要だとのこと。
コパイ先生にCSSが効かない場合の対処法も教えて貰ったので備忘録として追記します。
今回の成果物
結果が今回の本館フロントページという次第。
この表示に関わったCSSはこちら。経過を示すために効かなかったらしい行も残しています。
/*アピールエリアを下端に表示*/
.appeal-in {
display: flex;
flex-direction: column;
align-items: flex-end;
height: 100vh; /* 必要に応じて調整 */
}
/*以下はアピールエリアのタイトルと文字の指定。最終的に文字は消してしまったのですが、今後文章を入れるようにしたときにはこれが使えそうなので残してあります。*/
/*.appeal-content .appeal-titleはコパイ先生の助言でいれてみた「より強い指定」。*/
.appeal-content .appeal-title {
color: #cccccc;
}
.appeal-content .appeal-message {
color: #cccccc;
}
/*アピールエリア全体の指定*/
.appeal-content {
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.02); /* 半透明背景（任意） */
padding: 16px;
border-radius: 8px;
}
/* 最初の文字色指定。効かなかったけど。（だったら消しときなさいって） */
.appeal-title {
font-size: 16px;
font-weight: bold;
color:#cccccc; /* 好きな色に変更 */
}
.appeal-message {
font-size: 13px;
color:#cccccc; /* 好きな色に変更 */
}
/*アピールボタン…最終的にはこれだけを残して画像の下端に表示させています*/
.appeal-button {
box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
padding: 6px 14px;
font-size: 14px;
border-radius: 20px;
background-color: #eee; /* 任意の背景色 */
color: #333; /* 任意の文字色 */
text-decoration: none;
display: inline-block;
}
/*ヘッダーオフ…画像を目立たせるためにヘッダーを消しました*/
.home #header-container {
display: none;
}
実は当初、RSSが上手く機能しない（画像を拾ってこない）のでそっちを修正にかかっていたのです。
あれこれいじった末、やっぱりイイコトにならなかったのでRSSはデフォルトのRSSブロックを使用し、画像は後付けすることに。
結局子サイトと本館に同じ画像をアップすることにはなってしまいましたが、まあ容量に不足はないのでとりあえず今はこれで良しとすることになりました。
ファーストビジュアル リベンジ版のご意見・ご感想をお待ちしております。
そうそう、実はこっそりメイルフォームもGoogleフォームに変更しました。この辺に関してはもう余計な意地を張らないコトにしたという次第。
実は、コワいメールが来たのでちょっと日和ってしまった…というお話については、また次回に。
※今回のアイキャッチは、ジェスター君 16が春の匂いに触れるの図。
花は撮ってきた写真を一緒にアップして、お花はこれで！と指定してみました。
今回の内容には、これっぽっちも関係ないです。はっはっは。
ちなみに、初回出てきたのはこれ。何か違うなーと「構図そのまま、質感を3Dリアル調にしてみて」とお願いしたら概ね成功。
- 当サイト「WordPressで小説サイト！」は2026/1/31現在この「grayish」スキンを使用しています。こっちはレイアウトに独自カスタマイズなんか全くやってないのでNo Problem。
- 当サイト「WordPressで小説サイト！」は2026/1/31現在この「grayish」スキンを使用しています。こっちはレイアウトに独自カスタマイズなんか全くやってないのでNo Problem。
- もう一つ、ID制御という方法もあり。要素に一意の識別子を付与し、id=”ID名”で特定要素だけにスタイルを適用する仕組み。クラスより優先度が高く、ページ内で1回のみ使用するのが基本、らしい。
- 例えば、小説ページで冒頭にででーんとタイトルを置くより、数行の導入を置いてからタイトルを絵つきで入れるといった効果。
- 微妙に語弊があります。html版千柳亭書房の頃だって、CSSは当たってるはずなのに思ったような効果が一発で出たわけではないのですよ。
- 追加CSS…【ダッシュボード】⇒【外観】⇒【カスタマイズ】⇒で出てくるエディタ。テーマファイルをあけることなくCSSをお手軽に追加できる
- RSSがちゃんと表示されなかったときについでに訊いてみた話がベースになってるので、例としてRSSにかかるCSSが引かれています。
- これは未検証です。やってみる価値はあると思うけど…上書きしてミスったら後始末が大変そう。
- 「TOP SECRET」に出演のAI。猫のホログラムでうろうろしている。
- もう一つ、ID制御という方法もあり。要素に一意の識別子を付与し、id=”ID名”で特定要素だけにスタイルを適用する仕組み。クラスより優先度が高く、ページ内で1回のみ使用するのが基本、らしい。
- 例えば、小説ページで冒頭にででーんとタイトルを置くより、数行の導入を置いてからタイトルを絵つきで入れるといった効果。
- 微妙に語弊があります。html版千柳亭書房の頃だって、CSSは当たってるはずなのに思ったような効果が一発で出たわけではないのですよ。
- 追加CSS…【ダッシュボード】⇒【外観】⇒【カスタマイズ】⇒で出てくるエディタ。テーマファイルをあけることなくCSSをお手軽に追加できる
- RSSがちゃんと表示されなかったときについでに訊いてみた話がベースになってるので、例としてRSSにかかるCSSが引かれています。
- これは未検証です。やってみる価値はあると思うけど…上書きしてミスったら後始末が大変そう。
- 「TOP SECRET」に出演のAI。猫のホログラムでうろうろしている。
コメント