はてなブログで記事ごとに違うCSSを適用させたい
https://www.bambi.pro/entry/CSS-in-body
http://www.ptpclatter.click/entry/hatena-blog-mokuji-css
上記2サイトでは、特定のブログ記事の編集画面にCSSを追記することで、そのブログ記事にだけ効果を適用させることができると書かれています。
説明に従い、適用させたい記事のHTML編集画面で<style>~</style>で囲んだCSSを記入したのですが、ブログ内のすべての記事にCSSが反映されてしまいました。記事の先頭と末尾、どちらも試してみましたが結果は一緒でした。
やはり個別記事のIDを指定しないと、特定の記事だけに適用させることはできないのでしょうか。しかし先のサイトでは成功しているようなので不思議です。
個別記事のIDは記事を公開してからしか取得しようがないと思いますので、その方法はできるだけ避けたいです。下書きの段階でその記事だけにCSSを適用させる良い方法を探しています。
よろしくお願いいたします。
ログインして回答する
みんなの回答
-
kenichiice
1つのページに複数の記事を表示する設定になっていると、同時に表示されるほかの記事にもCSSが反映されてしまうと思います。
はてなブログの詳細設定で「トップページの記事数」を1に設定すれば、1つのページに1つの記事しか表示されなくなり、問題が解決するような気がします。 -
- その他の回答を読む
この質問へのコメント
質問の情報
- 登録日時
- 2019-07-25 02:19:29
- 終了日時
- 2019-08-01 02:20:04
- 回答条件
- 1人10回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
オカリナは、木管楽器というのでしょうか。陶器や土器で出来ています（最近は樹脂も）。また、ハーモニカは…
匿名質問者
1
2
1
-
今年の年末は気候は寒くなる予想ですか 匿名質問者1
-
行政立法の講学上の定義について疑問があります。 「行政立法の制定行為は、一般的・抽象的な法規範制定行…
minminjp20011
-
「駅ホームビジネス」を探しています 蕎麦屋さんやキオスクではなく 例えば、 西国分寺駅にあるクリニック …匿名質問者
-
リードギター、メロディギター、ベースギター、ドラムというバンドの場合ですけど、リードギターとメロディ…匿名質問者1
正直、body内にstyleタグを記述する上記のやり方はどうなんだろう、と思います。
# もしかすると特定のブラウザでは確かに成功するんだけれども
# ブログ筆者は他のブラウザでの挙動まで確認していない
# という可能性があるというわけ
つまりなんというか、クラス名を指定すれば普通に実現できるものを、
非正規なやり方で実現しようとしているように見えなくもないです。
（idは1記事内に1つしか存在できませんが、classは同じものが何度でも使えます）
↓の内容が理解できるなら、スタイルを変幻自在に操れるはずなんですが…
https://www.tagindex.com/stylesheet/basic/format2.html
クラスセレクタ
クラス名だけで指定
要素名に続けてクラス名を指定
指定方法
子孫セレクタ
の順に読むといいです。
「クラス名だけで指定」の内容が基本であり、
他の3つは変幻自在に使うためのテクニックになります。
わかりやすいサイトを教えていただきありがとうございます！クラス名を指定すればきちんとしたやり方でいろんなことができるのですね。
字数の関係上端折ってしまったのですが、私のやりたいことというのが記事ごとに背景色を変える（記事タイトル＋記事本文の背景色、つまりentry-innerの背景色を毎回変える）ことなのです。
教えていただいたクラス名指定の方法を各記事の編集画面で行うとすれば、記事本文の装飾しかできないのではないかと推測しますが合っていますでしょうか。初心者ゆえ理解不足でしたら申し訳ないです。
もし記事ごとに【記事タイトル＋本文部分】の背景色を指定する方法がありましたら、ご教示下さるとありがたいです。（手間を省くため、なるべくブログ全体のＣＳＳを都度いじるのではなく、記事編集画面の中で装飾を完結させたいと思っていますが、難しいでしょうか。）
◆head内に記述
<style>
<--
.patrn-A { background-color:red; }
.patrn-B { background-color:blue; }
.patrn-C { background-color:green; }
.patrn-D { background-color:pink; }
-->
</style>
上の内容は極めててけとーです。
ダッシュボード
→ デザイン
→ カスタマイズ（左上の工具マークをクリック）
→ {}デザインCSS
の部分に記述すると、headタグの中に個人的なスタイル宣言を書き込めます。
◆記事で呼び出し
<div class="patrn-A">
記事本文
</div>
やるべき事は毎回たったこれだけ。
patrn-Aを別のパターンに書き換えれば背景色が変わりますし、
１ページに表示される記事数を増やしてもきちんと反映される（各記事毎に背景色が異なる）はずです。
（動作確認はしていませんが＾＾；）
試したところ、タイトルの部分にHTMLを埋め込むことはできないようです。
（タグを囲む<>の文字が文字実体参照<>に置き変わってしまいます）
記事毎に変えるのは無理なようですが、
entry-titleというクラスを上書きする事で変更そのものはできるようです。
http://www.north-geek.com/entry/css-title
クラスを上書きとはどういう事かというと、
同じクラス名が複数宣言されている場合、
一番最後になされた宣言が有効になるという特徴がCSSにはあります。
したがって、ブログテーマとして元々用意されているクラス名と
同じ名前のものを「{}デザインCSS」に書き込むと、
ブログテーマの宣言は無視されて、自分の宣言したものが有効になるというわけ。