はてなブログで記事ごとに違う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を適用させる良い方法を探しています。
よろしくお願いいたします。

回答の条件
  • 1人10回まで
  • 登録:
  • 終了:2019/08/01 02:20:04

回答2件)

id:kenichiice No.1

回答回数49ベストアンサー獲得回数7

1つのページに複数の記事を表示する設定になっていると、同時に表示されるほかの記事にもCSSが反映されてしまうと思います。

はてなブログの詳細設定で「トップページの記事数」を1に設定すれば、1つのページに1つの記事しか表示されなくなり、問題が解決するような気がします。

id:jemmyjem

ご回答ありがとうございます。トップページの記事数を1にしたところ、おっしゃるように追記した記事にだけCSSが反映されました!また、「ブログURL/archive」で記事を一覧表示をさせた際も、CSSを追記した記事の個別記事ページのみ装飾が反映されていました。できればトップページに複数の記事を表示させるのが理想的なのですが、ひとまず全記事に反映されるのを回避する仕組みがわかって大変助かりました。またいろいろ考えてみたいと思います。ありがとうございました。

2019/07/25 13:11:39
id:psne No.2

回答回数605ベストアンサー獲得回数334

はてなブログの「見たままモード」を利用してHTMLタグを挿入することができます。

見たままモードにてブログ編集画面を開き「HTML編集」タブを選択します。
f:id:psne:20190725155730p:image
styleタグを利用して、適切な装飾をします。

「編集」タブを選択して、通常のブログ編集画面に戻すことができます。
f:id:psne:20190725155830p:image

id:psne

なお、記事IDは一度下書き保存をする事で取得することができます。

2019/07/26 00:32:58
  • id:jwrekitan
    HTMLの仕様的にはstyleタグはhead内に書き込む事になっているので、
    正直、body内にstyleタグを記述する上記のやり方はどうなんだろう、と思います。

    # もしかすると特定のブラウザでは確かに成功するんだけれども
    # ブログ筆者は他のブラウザでの挙動まで確認していない
    # という可能性があるというわけ

    つまりなんというか、クラス名を指定すれば普通に実現できるものを、
    非正規なやり方で実現しようとしているように見えなくもないです。
    (idは1記事内に1つしか存在できませんが、classは同じものが何度でも使えます)

    ↓の内容が理解できるなら、スタイルを変幻自在に操れるはずなんですが…
    https://www.tagindex.com/stylesheet/basic/format2.html
  • id:jwrekitan
    上記リンク先の補足:

    クラスセレクタ
    クラス名だけで指定
    要素名に続けてクラス名を指定
    指定方法
    子孫セレクタ

    の順に読むといいです。
    「クラス名だけで指定」の内容が基本であり、
    他の3つは変幻自在に使うためのテクニックになります。
  • id:jemmyjem
    椶櫚さま

    わかりやすいサイトを教えていただきありがとうございます!クラス名を指定すればきちんとしたやり方でいろんなことができるのですね。

    字数の関係上端折ってしまったのですが、私のやりたいことというのが記事ごとに背景色を変える(記事タイトル+記事本文の背景色、つまりentry-innerの背景色を毎回変える)ことなのです。
    教えていただいたクラス名指定の方法を各記事の編集画面で行うとすれば、記事本文の装飾しかできないのではないかと推測しますが合っていますでしょうか。初心者ゆえ理解不足でしたら申し訳ないです。

    もし記事ごとに【記事タイトル+本文部分】の背景色を指定する方法がありましたら、ご教示下さるとありがたいです。(手間を省くため、なるべくブログ全体のCSSを都度いじるのではなく、記事編集画面の中で装飾を完結させたいと思っていますが、難しいでしょうか。)
  • id:jwrekitan
    ええとですね、まずはパターンを幾つか前もって用意しておきます。

    ◆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を別のパターンに書き換えれば背景色が変わりますし、
    1ページに表示される記事数を増やしてもきちんと反映される(各記事毎に背景色が異なる)はずです。
    (動作確認はしていませんが^^;)
  • id:jwrekitan
    あぁ、記事タイトルは記事とは別物なんだっけ。
    試したところ、タイトルの部分にHTMLを埋め込むことはできないようです。
    (タグを囲む<>の文字が文字実体参照&lt;&gt;に置き変わってしまいます)

    記事毎に変えるのは無理なようですが、
    entry-titleというクラスを上書きする事で変更そのものはできるようです。
    http://www.north-geek.com/entry/css-title

    クラスを上書きとはどういう事かというと、
    同じクラス名が複数宣言されている場合、
    一番最後になされた宣言が有効になるという特徴がCSSにはあります。
    したがって、ブログテーマとして元々用意されているクラス名と
    同じ名前のものを「{}デザインCSS」に書き込むと、
    ブログテーマの宣言は無視されて、自分の宣言したものが有効になるというわけ。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません