匿名質問者

はてなダイアリーブログ一番上の「ブログトップ・記事一覧・記事を書く」などの文字の色はCSSで変えられますか?

#simple-header { background-color:transparent; }でこの部分の背景色を透明にしたので、背景を変えると文字が見えにくくなります。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2012/09/16 12:10:45

ベストアンサー

匿名回答1号 No.2

!!!!
「はてなブログ」ではなくて「はてなダイアリー」の話ですね!うっかりうっかり。

はてなダイアリーの#simple-headerの構造は以下のようになっています。

<div id="simple-header">
  <a><img><img></a><a><img></a>
  <form class="search-form">
    <input class="search-word"><input><input class="search-button"><input class="search-button">
  </form>
  <ul class="menu">
    <li><a>ブログトップ</a></li>
    <li><a>記事一覧</a></li>
    <li><a id="editlink">記事を書く</a></li>
    <li><a>管理</a></li>
    <li><a>ログアウト</a></li>
    <li><a>ヘルプ</a></li>
  </ul>
</div>

「ブログトップ・記事一覧・記事を書く」は、#simple-headerの中の、ulの中の、liの中の、aなので、「はてなダイアリー」では予め以下のように指定されています。

#simple-header ul li a {
    color: #FFFFFF;
}

これを上書きすれば希望の色に変更できるので、上記と同様に

#simple-header ul li a {
    color: #999999;
}

のように書きましょう。

「はてなダイアリー」の場合は、ロゴ(画像)の色変更はCSSから出来ないので、
管理 > デザイン編集 > 詳細 の「ヘッダ色」からお好みに希望に添いそうなロゴ色になるようにヘッダ色を選択しましょう。
http://d.hatena.ne.jp/my/designdetail

その他の回答1件)

匿名回答1号 No.1

#globalheader-container {
  color: #CCCCCC;
}

のように#globalheader-containerのcolorを指定すると変更できますよ。
アイコン色も同時に変わるようです。
http://works.uedayworks.com/entry/hatenablog-tips

匿名質問者

質問者から

匿名質問者2012/09/16 06:35:21

匿名回答1号さん、こんなに早く早速ありがとうございます。

実はここに質問する前にこのサイトを見つけてやってみたのですが、文字色が変わらなかったのです。

-------------------------

#simple-header { background-color:transparent; }

#globalheader-container {

color: #6d9494;

}

h1{border: none;}

H1{font-family:"MS明朝";

font-size:20pt;}

H1{color:#6d9494;}

H1 a:visited {color:#6d9494;}

H1 a:hover{color:#cccccc;}

H1 a:active{color:#2d3f31;}

H1 { height:20% ; }

H1 { width : 900px; }

div.hatena-body { width:900px ; }

BODY{text-align:center;}

DIV.main{text-align:left;}

DIV.sidebar{text-align:left;}

-------------------------

スタイルシートはよく分からないのに自分流に弄っている↑ので、他の部分のスタイルシート(H1の文字色等)との関連があるかと思ったりしてH1の文字の指定を全部削除しても変わりませんでした。

また、今書いているスタイルシートを全部削除して#globalheader-container { color: #CCCCCC;}のみ張り付けても変わりませんでした。

どこか大きく勘違いしているのかもしれません。

匿名回答1号 No.2

ここでベストアンサー

!!!!
「はてなブログ」ではなくて「はてなダイアリー」の話ですね!うっかりうっかり。

はてなダイアリーの#simple-headerの構造は以下のようになっています。

<div id="simple-header">
  <a><img><img></a><a><img></a>
  <form class="search-form">
    <input class="search-word"><input><input class="search-button"><input class="search-button">
  </form>
  <ul class="menu">
    <li><a>ブログトップ</a></li>
    <li><a>記事一覧</a></li>
    <li><a id="editlink">記事を書く</a></li>
    <li><a>管理</a></li>
    <li><a>ログアウト</a></li>
    <li><a>ヘルプ</a></li>
  </ul>
</div>

「ブログトップ・記事一覧・記事を書く」は、#simple-headerの中の、ulの中の、liの中の、aなので、「はてなダイアリー」では予め以下のように指定されています。

#simple-header ul li a {
    color: #FFFFFF;
}

これを上書きすれば希望の色に変更できるので、上記と同様に

#simple-header ul li a {
    color: #999999;
}

のように書きましょう。

「はてなダイアリー」の場合は、ロゴ(画像)の色変更はCSSから出来ないので、
管理 > デザイン編集 > 詳細 の「ヘッダ色」からお好みに希望に添いそうなロゴ色になるようにヘッダ色を選択しましょう。
http://d.hatena.ne.jp/my/designdetail

匿名質問者

質問者から

匿名質問者2012/09/16 14:47:57

出来ました!!!!!

匿名回答1号さん、本当にありがとうございます。

こんな風にスタイルシートが分かるようになりたいです。

コメントはまだありません

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

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

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

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