はてな各テーマの CSS を参照したい。

はてなの各テーマの CSS 内容はどこから参照できますか? また CSS セレクターの使い方を教えてください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/25 18:44:22
  • 終了:2011/11/01 18:45:08

回答(0件)

回答はまだありません

  • id:flandlescarlet
    はてなのCSSとはこのコメントを書くという所や部品をさしているのですか!?
    でしたらブラウザのChromeで知りたい部分で右クリックして要素の検出および
    Firefoxでしたら自分はfirebugで取得しています

    CSSはBOXの形式をとっている為、撮る場所によりclassなりidなり入れ子の場所を取るのには悩みますが一応回答(x件)のスタイルは

    <div class="header">となっておりますよってclass="header"のheaderクラス名を
    <link rel="stylesheet">の中よりCtrl+Fを経由して[ .header ]と検索すれば一覧の
    headerタグが見つかります

    しかし大体はてなではタグは入れ子の状態で長く記述してありますので
    凝って探さなければなりません

    <div class="header">では足りないためそのさらに中にある
    <h2>そして<span>など重ねる必要がありますそうすると

    .header h2 span{
    font-size: 100%;
    font-weight: bold;
    }

    この要素が見つかります
  • id:rouge_2008
    はてなの各テーマ(デザイン)に限らず、どのページでも同じ方法でCSSの内容を確認できます。

    1.ダイアリーにテーマを適用した状態か、任意のテーマをプレビュー表示をしている状態で、HTMLソースを表示し、ソースの中の次の記述を探します。
    (※IEは右クリックしてから「ソースの表示」、FirefoxとGoogle Chromeでは、右クリックしてから「ページのソースを表示」で、HTMLソースが表示されます。)


    <link rel="stylesheet" href="http://d.st-hatena.com/statics/css/base.css?ランダムな英数字" type="text/css" media="all">
    <link rel="stylesheet" href="http://d.st-hatena.com/statics/css/headerstyle_te.css?ランダムな英数字" type="text/css" media="all">
    <link rel="stylesheet" href="http://d.st-hatena.com/statics/theme/テーマ名/テーマ名.css?ランダムな英数字" type="text/css" media="all">

    2.先ほど見つけたHTMLタグの「href="~.css"」に記述されているURLがCSSのURLです。
    ※はてなダイアリーの場合、一番下の「http://d.st-hatena.com/statics/theme/テーマ名/テーマ名.css」が、テーマ(デザイン)のCSSです。(上の2つは、はてなダイアリー共通のCSSです。「headerstyle_te.css」は、使用していない場合もあります。)

    3.「href="~.css"」のCSSのURL部分をクリックした場合に、IEではCSSが一時フォルダにダウンロードされてから、関連付けているソフトで表示されますが、FirefoxとGoogle Chromeでは、そのままブラウザ(※Firefoxの場合は、ソース表示の画面)でCSSのソースが表示されます。


    上記の方法の他に、ブラウザの開発ツールで確認する事もできます。
    ※ただし、IEの開発者ツールの場合、HTMLタグは大文字で表示され、まとめて指定したプロパティと値が、1個ずつに分解されて表示されます。
    (例えば、「ul.hatena-photo li {」が「UL.hatena-photo LI」と表示され、「background:none repeat scroll 0 0 transparent;」が「background-image:~;background-attachment:~;background-repeat:~;background-position-x:~;...」という具合に表示されますので、意味は同じですが、IEの開発者ツールではCSSファイルそのままの記述を確認する事はできません。)


    もう一つ、セレクターの使い方という事ですが、どの点が分からないのでしょうか?
    以下の特集ページでCSSが詳しく説明されています。
    まずは一通り確認してみて、もし分からない点があれば、再度どの点が分からなかったのかを教えてください。
    http://www.mdn.co.jp/di/articles/517/?page=1
  • id:okikeiji
    八咫烏さん、rouge_2008さん、ありがとうございました。謝礼の件は気がつきませんでした。次回からは気をつけます。とりあえずどこを探せばCSSが見つけることができそうかがわかりました。やってみます。セレクターはまずご紹介の特集頁を読んでみます。

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません