「スタイルシート」について RSSフィード
 

2011年7月15日をもちまして、はてなサポート掲示板は新規投稿の受付を停止致しました。
今後は、人力検索はてなの「はてなの使い方」カテゴリーをご利用ください。
※ご要望や不具合のご報告ははてなアイデア、はてなからのご返信が必要な質問はお問い合わせページをご利用ください。

リスト表示 | ツリー表示

1hatenasupporthatenasupport   「スタイルシート」について

スタイルシートを使って自分の日記やアンテナ、ブックマークのデザインを変更したいけれど、どのように設定したら良いかわからないときはここに質問してください。

返信2007/10/01 13:18:19

2adattinonadattinon  

返信2007/11/20 18:18:00

3adattinonadattinon   ブログペット

ぶろぐぺっとを貼り付けたいのですが、貼り付け方に書いてあったページが出せません。

貼り付け方の説明↓

「ページ左にある管理メニューから「デザイン」をクリックしてください。

テンプレート一覧が表示されますが、ページ最下部周辺に「BlogPet」の入力欄が用意されています。

フォームの中にブログペット設定JavaScriptをコピーして貼り付け「この内容に変更する」ボタンを押してください。」

この様に書かれていました。

でも、テンプレート一覧というのが出てきません。

どうしてですか?

返信2007/11/20 18:16:48

4xnissyxnissy   3  Re:ブログペット

ぶろぐぺっとを貼り付けたいのですが、貼り付け方に書いてあったページが出せません。

貼り付け方の説明↓

「ページ左にある管理メニューから「デザイン」をクリックしてください。

テンプレート一覧が表示されますが、ページ最下部周辺に「BlogPet」の入力欄が用意されています。

フォームの中にブログペット設定JavaScriptをコピーして貼り付け「この内容に変更する」ボタンを押してください。」

この様に書かれていました。

でも、テンプレート一覧というのが出てきません。

どうしてですか?

なるほど、ブログペットの設置方法 ブログペット♪ Blogをごらんになったのですね。この後にはてなダイアリー側の仕様変更があったのかもしれません。

貼り付け方はBlogPetを表示する(blogpetモジュール) - はてなダイアリーのヘルプをごらんください。

返信2007/11/21 18:04:45

5YuichirouYuichirou   3  Re:ブログペット

id:adattinonさんへ

その説明は、おそらく「かんたんデザイン設定」におけるものだと思われます。

はてなダイアリーには、表示されるテーマなどを選択するだけでデザインを設定できる「かんたんデザイン設定」と、HTMLやCSSといった専門的な知識を持っている人がより高度なデザイン設定を行える「詳細デザイン設定」という2つの設定モードがあります。

どちらのモードになっているかは、管理ツールから「デザイン」を選択した時に「かんたんデザイン設定 - adattinonさんのデザイン」のように表示されることでわかります。

「詳細デザイン設定」である場合の「BlogPet」の貼り付け方は、id:xnissyさんの書き込みにあるようにg:hatenadiary:keyword:BlogPetを表示する(blogpetモジュール)に書かれています。

「かんたんデザイン設定」である場合、お読みになった説明文が書かれた頃から機能が一部改良されたので、以下のように操作してください。

  1. 「かんたんデザイン設定 - adattinonさんのデザイン」と書かれている下に、タブが4つ表示されていると思いますので、「サイドバー」を選択します。
  2. サイドバーに表示するモジュールが2ページに渡って表示されますので、必要ならページ右側にある「http://d.hatena.ne.jp/images/admin/themenav-right.gif」ボタンをクリックします。
  3. 一番下に「ブログパーツ」という項目がありますので、そこにあるチェックボックスにチェックを入れてください。
  4. 文字の入力欄が表示されるはずですので、そこに「ペットの貼り付けコード」をコピペして「決定」します。
  5. あとは一番下にある「この設定に変更する」ボタンを押せば完了です。
返信2007/11/21 23:29:37

6: このエントリーは削除されました

このエントリーは削除されました

返信2008/09/09 23:26:51

7yoopicyoopic   デザインをデフォルトの状態に戻したい

公開デザインをインポートして使用した後、hatena2の公式デザインに戻したりしていたら、はてなスターなどが表示されなくなり、なぜだ?と色々いじっているうちに、デザインがぐちゃぐちゃになってしまいました。

元のデフォルト(hatena2が綺麗に表示される)状態に戻すには、どのような作業をしたら良いですか?

かんたんデザイン設定でhatena2に何度適用しても、今のような状態になってしまいます。

どなたかご存知の方、教えてください、宜しくお願いします。

返信2008/09/18 01:02:04

8: このエントリーは削除されました

このエントリーは削除されました

返信2008/10/05 15:45:25

9ri_ccori_cco   日記タイトルの下に説明文を入れたい

トップページでのタイトル表示を

 ABCの青空日記     (←タイトル)

  ~明日天気になぁれ~ (←説明文)  のようにしたく

『 <div id="main"> の前に

<div id="message">メッセージ</div> を追加し(内容は適当に)

div#message { position: absolute; top: -100px; left: 80px; }

とスタイルシートで設定すれば、日記タイトルの下に要素を持っていくことができます』

ということを聞き、そのように設定したのですが、うまく表示されません。

プレビューの状態ではきちんと表示されるのですが、普通に日記TOPを開いた時には出てなくて、

「最近の日記」の表示に切り替えた所のページで表示される状態です。

     

使用しているデザインは公開デザインの「modoriame」

http://d.hatena.ne.jp/designset/776  こちらをお借りしています。

    

CSSは全く分からないので自分の設定ミスなのか、どこをどう直せばいいのかサッパリ分かりません。

お詳しい方、なにとぞお助け下さい。 宜しくお願いいたします。

返信2008/10/05 15:48:12

10YuichirouYuichirou   9  Re:日記タイトルの下に説明文を入れたい

id:ri_ccoさん

プレビューの状態ではきちんと表示されるのですが、普通に日記TOPを開いた時には出てなくて、

「最近の日記」の表示に切り替えた所のページで表示される状態です。

はてなダイアリーでは一般的に、「最新の日記」ページ(http://d.hatena.ne.jp/ri_cco/、ri_ccoさんの言うところの『「最近の日記」の表示に切り替えた所のページ』)こそが日記のトップページとされています。ri_ccoさんは別のページを『日記TOP』と思われているようですが、そのページは「ページのヘッダ・フッタ」が適用されないページであると思われます。

「ページのヘッダ・フッタ」は、「最新の日記」ページや各日付・各記事のページなど、日記本文が表示されるページでのみ適用されます。例えばプロフィールページ(http://d.hatena.ne.jp/ri_cco/about)や記事一覧ページ(http://d.hatena.ne.jp/ri_cco/archive)では適用されず、説明文を表示することができません。

返信2008/10/05 16:25:34

11ri_ccori_cco   10  Re:Re:日記タイトルの下に説明文を入れたい

>>Yuichirou さま

 

なるほどなるほど!そうなんですねー。分かりました!

ご丁寧な説明をありがとうございましたm(_ _)mm(_ _)mm(_ _)m

返信2008/10/05 17:55:16

12chaposchapos   サイドにはてな以外の方のブログのリンク集をつくりたい

はてな以外からのコメントの名前をクリックしても、そちらのブログに飛べないので

サイドバーに、はてな外のブログ仲間のリンク集を作りたいのですが。

ハンドルネームやブログ題名をクリックするとポップアップするようにしたいです。

ちなみに自分のブログデザインは「詳細デザイン設定」でしています。

返信2008/10/05 23:32:14

13: このエントリーは削除されました

このエントリーは削除されました

返信2008/10/06 15:54:45

14: このエントリーは削除されました

このエントリーは削除されました

返信2008/10/12 22:26:04

15moon56moon56   コメントのアイコンを消したい

コメントのアイコンを消したいのですが、上手く行きません。

過去ログを読み、

img.hatena-id-icon { display: none; }

を、スタイルシートに書き込むとあったので、やってみましたが消えず…。

スタイルシートの書く場所が悪いのでしょうか?

お力をお貸しください。

よろしくお願いします!

http://d.hatena.ne.jp/moon56/

返信2009/01/16 10:36:43

16sa_to_esa_to_e   15  Re:コメントのアイコンを消したい

id:moon56さん


スタイルシート欄の最後の行の --> よりも上に img.hatena-id-icon { display: none; } を記入すれば大丈夫だと思います。




下記のようにしてみて下さい。

 .message {
  *position: absolute;
  _position: absolute;
 }


-->



      ↓




 .message {
  *position: absolute;
  _position: absolute;
 }


img.hatena-id-icon { display: none; }


-->
返信2009/01/16 12:15:18

17kuippakuippa   はてなIDをもつコメントスパムの人

どこに通報すればいいですか?

アダルトコメントスパムがついていたので通報してから消したほうがいいかなと探したのですが見つかりませんでした。

ブックマークとか人力とかにはありますがダイアリーにはついていませんか?

よろしくお願いします。

返信2009/01/16 12:17:26

18YuichirouYuichirou   17  Re:はてなIDをもつコメントスパムの人

id:kuippaさん

日記編集ページ(「その場編集モード」の場合は「編集」を押した後表示される「詳細編集」リンクから行けます)でコメントを削除する際、「コメントを削除する」ボタンの横に「スパムコメントとして報告する」チェックボックスがあるので、それにチェックを入れて削除してみてください。

http://f.hatena.ne.jp/images/fotolife/h/hatenadiary/20070216/20070216214515.jpg

返信2009/01/16 17:15:20

19moon56moon56   16  Re:Re:コメントのアイコンを消したい

id:sa_to_eさん

返信ありがとうございます!

早速教えて頂いたように記入したのですが…消えません;

コメントのアイコンとは、記事の時間の横の、手紙マークの事を指していますが

合っていますよね?

もしかして「コメントアイコン」って、私が思ってるアイコンではないのかな?と

不安になりまして…。どうしてだろぅ…。

また何かアドバイスありましたら、お願い致します。

返信2009/01/19 10:12:25

20sa_to_esa_to_e   19  Re:Re:Re:コメントのアイコンを消したい

id:moon56さん


もしかして「コメントアイコン」って、私が思ってるアイコンではないのかな?

「コメントアイコン」というのはコメントした人の名前の前に表示される コメントのアイコン このマークの事を指します。




記事の時間の横の、手紙マークの事を指していますが

合っていますよね?

記事のタイトルと はてなスターの間にある スターコメントボタン このマークの事でしょうか?

これは はてなスターのコメントボタンです。

初期設定ではスターコメントボタン こういった吹き出し型のマークになっています。

このマークはmoon56さんの日記では、moon56さん本人(ログインした状態)と、moon56さんと相互に はてなスターを付けたユーザーだけに表示されます。

試しにログアウトしてmoon56さんの日記をご覧になってみて下さい。

このマークは表示されないと思います。

参照:スターコメントとは - はてなスター ヘルプ -


ログインした状態で このマークを表示されないようにするには

.hatena-star-comment-container {
 display: none;
}

とスタイルシートに記入して下さい。

前回の img.hatena-id-icon { display: none; } は削除して下さい。

返信2009/01/19 15:48:24

21moon56moon56   20  Re:Re:Re:Re:コメントのアイコンを消したい

sa_to_eさん

やはり私の勘違いでしたね…。

あの手紙マークは「コメントアイコン」ではなかったのですね;

ログアウトすると表示されない事も、不思議に思ってたんです!

教えて頂いた通りに記入で、消すことが出来ました。

丁寧に教えていただき、ありがとうございました!!

返信2009/01/19 16:11:45

22moon56moon56   コメントのフォント

コメント(みんなからのコメント)のフォントを小さく(10px)したいのですが、出来ません。

スタイルシートを、順番に

font-size: 10px;

と書き足して行ったのですが、出来ませんでした。

どの部分を書き換えればいいでしょうか?

何か特別な記述が必要ですか?

よろしくお願い致します

http://d.hatena.ne.jp/moon56/

返信2009/03/11 10:14:32

23YuichirouYuichirou   22  Re:コメントのフォント

結論から言うと、以下のような記述を追加するとうまくいくと思います。

div.commentshort p {
  font-size: 10px;
}

ちなみに、今まで設定がうまく適用されなかった原因は、以下の記述にあります。

p {
margin: 5px 20px 0 20px;
font-size: 12px;
letter-spacing : 2px;
line-height: 140%;
font-family:"Osaka","sans-serif"
}

p 要素は主に日記本文の各段落として使われていますが、実はコメント部分でも、以下のような構造の中で使われているのです。

  • div.comment
    • div.caption (「コメントを書く」部分)
    • div.commentshort
      • p (1つのコメント:コメントの数だけある)
        • span.commentator (コメントを書いた人の名前)
        • span.timestamp (コメントが書かれた時刻)
        • span.commentbody (コメント本文)
      • ...

このため、例えば div.commentshort に対して font-size: 10px を指定しても、その内側にある p 要素で 12px になってしまい、効果が表れなかったのです。

返信2009/03/11 12:08:50

24moon56moon56   23  Re:Re:コメントのフォント

Yuichirou さん

詳しく説明、ありがとうございました!出来ました♪

なるほど、そういう事だったんですね!

なんとなくですけど(苦笑)、理解出来ました!

ありがとうございました。

返信2009/03/11 13:21:21

25: このエントリーは削除されました

このエントリーは削除されました

返信2009/03/26 06:39:32

26kawashimakawashima   はてなスターのCSSについて

はてなスターを別の画像に変更してみたのですが、スターが付いた場合に見出しの文字・コメントアイコン等が下にずれてしまいます。

スターのベースラインにそろえるか、またはすべてを文字の中央で揃えたいのですが、どのように記述すればいいのでしょうか?

よろしくお願いいたします。

返信2009/04/03 04:26:27

27YuichirouYuichirou   26  Re:はてなスターのCSSについて

以下のように設定してみてください。

img.hatena-star-star {
  vertical-align: middle;
}
返信2009/04/03 21:35:53

28kawashimakawashima   27  Re:Re:はてなスターのCSSについて

Yuichirouさま

早速修正してみましたところ、希望通りになりました!!

大変ありがとうございました!

返信2009/04/04 03:17:06

29chocochipchocochip   スタイルシートの設定について

今「Ymck」とゆうデザインを使っているのですが、

全体的に左寄りになってしまっているのですが、できることなら真ん中に設定したいのです。

はてなに問い合わせたところ、スタイルシートを設定する必要があるらしいのですが、

それはサポート対象外らしく、方法がわからないままでいます。。

どなたかわかる方いらっしゃったら教えてくださいませ!

よろしくお願いいたします。

返信2009/04/09 21:24:36

30YuichirouYuichirou   29  Re:スタイルシートの設定について

うーん、このデザインで中央寄せは難しい……

以下のような設定を「詳細デザイン設定」の「スタイルシート」に書けば、Internet ExplorerやMozilla Firefoxでは良い感じに表示されるけど、Macintoshの標準ブラウザSafariではうまくいかない……

誰かこの掲示板を見ている他の方、妙案はないでしょうか?

body {
  background-image: none;
  text-align: center;
}
table#banner {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
h1 {
  margin-left: auto;
  margin-right: auto;
  background-color: #8AB6F8;
  text-align: left;
}
.hatena-body {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: #8AB6F8;
  text-align: left;
}
.main {
  width: 500px;
  overflow: hidden;
}
.sidebar {
  top: -70px;
  left: 500px;
}
返信2009/04/09 22:50:31

31CountLiouCountLiou   カテゴリーとカテゴリーの間隔を狭くしたい

SchizoidManというテーマを使っています

記事を一日単位にして都度書き足しています

一日ごとの記事の間隔は良いのですが

一日の中での記事と記事の間隔(カテゴリーとカテゴリー)が広すぎてもう少し狭くしたいと思っています


色々調べてスタイルシートなども書き換えたり加えたりしてみたのですがダメでした


スタイルシートはこのようになっています


body,div{background-color:#000 ! important;color:#fff ! important;}

a{color:800000 ! important;}

a.keyword{color:#fff ! important;border:none ! important;}

span.title{color:#fff;}

.section{margin-bottom:100px;}

.section li{margin:10px auto;}

.comment{margin-top:-100px ! important;margin-bottom:100px ! important;}

.hatena-module ul{margin-left:10px ! important;}

.hatena-module ul li{list-style-position:outside ! important;line-height:100%;margin:10px auto;}

big{font-size:x-large;font-weight:bold;}


どうかよろしくお願い致します

返信2009/04/12 00:59:37

32YuichirouYuichirou   31  Re:カテゴリーとカテゴリーの間隔を狭くしたい

スタイルシートの .section と .comment をそれぞれ次のように書き換えてみてください。

before

.section{margin-bottom:100px;}
.comment{margin-top:-100px ! important;margin-bottom:100px ! important;}

after(現状の半分にする場合)

.section{margin-bottom:50px;}
.comment{margin-top:-50px ! important;margin-bottom:100px ! important;}
返信2009/04/12 14:19:40

33CountLiouCountLiou   32  Re:Re:カテゴリーとカテゴリーの間隔を狭くしたい

丁寧に教えて下さりありがとうございました!

思うような間隔にすることが出来ました、感謝!

返信2009/04/13 03:18:21

34CountLiouCountLiou   行間と段落間について

度々失礼します

行間を狭く段落間を広く取りたいと思い

検索して調べたところ

div.section p {

line-height: 1.2em;

margin-top: 0.1em;

margin-bottom: 0.1em;

}

>行間を狭くするには line-height を、段落間の間隔を狭くするには margin

と書いてあったので上記の記述を加えてみたのですが

行間は狭くすることができるのですが段落間をうまく広げることができません

例えば段落間を今の3倍とりたい場合どの数値を変えればよいのでしょうか?

どうかよろしくお願いします

現在スタイルシートはこうなっています

body,div{background-color:#000 ! important;color:#fff ! important;}

a{color:FF0033 ! important;}

a.keyword{color:#fff ! important;border:none ! important;}

span.title{color:#fff;}

.section{margin-bottom:10px;}

.section li{margin:10px auto;}

.comment{margin-top:-10px ! important;margin-bottom:100px ! important;}

.hatena-module ul{margin-left:10px ! important;}

.hatena-module ul li{list-style-position:outside ! important;line-height:100%;margin:10px auto;}

big{font-size:x-large;font-weight:bold;}

返信2009/04/13 03:39:05

35YuichirouYuichirou   34  Re:行間と段落間について

CountLiouさんの使っているHatena-simple2テーマでは、「.body .section p」というセレクタで段落間の広さが指定されています。CSSの仕様では、「.section p」というセレクタで指定された設定は、「.body .section p」というセレクタによる設定で打ち消すことができるとされています。このため、CountLiouさんの書いた設定はHatena-simple2テーマでの設定で打ち消されてしまっているのです。

Hatena-simple2テーマで段落間を調節するには、「.body .section p」というセレクタを使って、

.body .section p {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}

と書いてください。

返信2009/04/16 17:38:20

36CountLiouCountLiou   35  Re:Re:行間と段落間について

前回に続き丁寧で親切な説明をして頂きありがとうございます、助かりました、感謝!

返信2009/04/18 01:32:42

37CountLiouCountLiou   35  Re:Re:行間と段落間について

前回に続き丁寧で親切な説明をして頂きありがとうございます、助かりました、感謝!

返信2009/04/18 01:32:48

38nano_annano_an   asinlog

サイドバーにasinlogを表示しています。

現在は縦1列に8つ並んでいるのですが、これを横2列縦4つに見栄えよく並べたいのですが

どうすればいいのでしょうか。どなたかご教授お願いします。

返信2009/05/20 21:28:37

39caramelmaffincaramelmaffin  

サイドバーにアマゾンのライブリンクを設置しておいたのですが、数日前に突然表示されなくなり、

Error : amazon module is not found.

という文字が出てしまいます。なぜでしょうか?

返信2009/06/07 00:04:16

40YuichirouYuichirou   39  Re:

はてなダイアリーのシステムに何らかの不具合が発生しているものとみられます。すぐ直されると良いのですが……

関連:はてなアイデア - Amazonライブリンクが昨日から表示されません。 Error : amazon module is not found. だそうです。 よろしくお願いいたします。

返信2009/06/07 00:25:50

41caramelmaffincaramelmaffin   40  Re:Re:

あ、直ってました。

返信2009/06/08 14:15:34

42ENERGYENERGY   「コメントを書く」自体の表記を変更したいのですが…

「コメントを書く」というリンク自体の表記を変更したいのですが、

どの部分に何を入れればいいのか検討がつきません…。

メニュー部分などの表記はなんとなく分かり出来たのですが、

どの部分を触れば「コメントを書く」の変更ができるのでしょうか?

返信2009/09/10 13:08:49

43YuichirouYuichirou   42  Re:「コメントを書く」自体の表記を変更したいのですが…

そのような機能は要望されているものの、現在は「コメントを書く」から変更することはできません。

返信2009/09/11 00:04:40

44FikaFika   デザインがおかしくなる

右側のページ、フッタのデザインが、はてなモジュールの「最近言及したURL」

言及URL
』を使うと、

色デザインがくるって、「最近言及したURL」の枠が伸びてしまいます。

一番右下のフッタを部分です。これを直すにはどうしたらいいでしょうか?

http://d.hatena.ne.jp/Fika/

ご教授いただけたら幸いです。

返信2009/09/12 12:56:06

45YuichirouYuichirou   44  Re:デザインがおかしくなる

これは、サイドバーを構成するdiv要素の中に、いくつかの要素がきちんと入っていないためです。具体的には、「最新タイトル」と「プロフィール」、Amazonの「おすすめ」はサイドバーのdiv要素に入っているものの、その後ろの「Amazon.co.jp

」や「最近のURL」が入っていないため、特に背景色のある「最近のURL」の表示がおかしくなっているのです。

これを直すには、詳細デザイン設定の「ページのフッタ」で、

</div>

  <script type="text/javascript"><!--
amazon_ad_tag = "fika06-22"; amazon_ad_width = "160"; amazon_ad_height = "600"; amazon_ad_logo = "hide"; amazon_ad_link_target = "new"; amazon_ad_price = "retail"; amazon_ad_border = "hide"; amazon_ad_discount = "remove"; amazon_color_border = "C3E569"; amazon_color_price = "2C1818"; amazon_color_logo = "1C1C1C";//--></script>
<script type="text/javascript" src="http://www.assoc-amazon.jp/s/ads.js"></script>
<br>

↑のような記述を探し、この1行目にある「</div>」を削除してみてください。

返信2009/09/12 19:05:02

46FikaFika   45  Re:Re:デザインがおかしくなる

Yuichirouさん、

どうもありがとうございました。おかげさまで直りました。

返信2009/09/12 20:34:19

47: このエントリーは削除されました

このエントリーは削除されました

返信2009/10/08 22:48:49

48: このエントリーは削除されました

このエントリーは削除されました

返信2010/01/18 13:57:30

49YuichirouYuichirou   48  Re:前の日次の日の文字

nishi-ogikuboさんのスタイルシートの設定を見てみたところ、2つの問題点がありました。

1つ目は、

body{
background-color:#663300;

という設定の閉じカッコ } が抜けている点で、このせいでこの記述以降の設定が効かない状況になっていました。


これを解決しても残る2つ目の問題は、「新しいエントリー」のまわりのHTML構造に起因します。

nishi-ogikuboさんは div.calendar に対し色の設定をしていますが、「新しいエントリー」や「前の日」「次の日」の部分はリンクになっており、HTMLコードでは div.calendar の中の a 要素として記述されています。

ここで面倒なことに、デザインテーマ「Memo」では「div.calendar a」、すなわち div.calendar の中の a 要素に対し色の設定を行っています。この場合、

  • div.calendar の中の a 要素でない部分は、nishi-ogikuboさんが設定された色
  • div.calendar の中の a 要素は、デザインテーマ「Memo」で設定された色

となってしまうのです。

このため、nishi-ogikuboさんは「div.calendar a」でも色設定を行う必要があります。ここで、具体的に値を記述せず、その要素の外側で指定された色を利用するCSSの記法として「inherit」というのがあるので、

div.calendar a {
  color: inherit;
}

と付け足しで記述すると、うまく色が変えられると思います。

返信2009/10/09 13:28:50

50nishi-ogikubonishi-ogikubo   49  Re:Re:前の日次の日の文字

Yuichirouさま

大変分かりやすい解説ありがとうございました!

返信2009/10/09 16:24:05

51 49  このエントリーは削除されました

このエントリーは削除されました

返信2009/10/09 16:24:47

52nishi-ogikubonishi-ogikubo   小見出しの色の変更について

テーマは「memo」を使っております。□のあとの「**」で表される小見出しの色を変更しようとスタイルシートのh3の部分を変更してみたのですが、変更されません。どのように記述すればよいのでしょうか? よろしくお願いいたします。

返信2009/10/30 17:09:29

53YuichirouYuichirou   52  Re:小見出しの色の変更について

えーと、nishi-ogikuboさんが色を設定したいのは「見出し」でしょうか、それとも「小見出し」でしょうか。はてなダイアリーではある時期からそれぞれh3、h4に対応する用語として使われるようになっています。確かに「**」ははてな記法の「小見出し記法」のものですが、しかしnishi-ogikuboさんの日記でhttp://d.hatena.ne.jp/theme/memo/hall.gifのマークが付くのは「見出し」ですよね?

とりあえずh3の「見出し」のこととして話を進めると、デザインテーマ「memo」では見出し中のリンクに対するCSS設定が「.body h3.title a」というセレクタで指定されているため、「h3」というセレクタでの指定はデザインテーマの設定で上書きされてしまいます。なのでこちらも「.body h3.title a」というセレクタで指定するとうまくいくと思います。

CSSではこのようなセレクタの詳細性 (specificity) の違いから、後に付け足したはずの設定がより前に記述された設定で上書きされてしまうということがよく起きます。最近のブラウザはこのようなCSS設定の重なり方を調べるツールが内蔵されているので(例えばInternet Explorer 8ではF12キーで呼び出せる「開発者ツール」)、ぜひ使ってみてください。

返信2009/10/30 19:04:51

54nishi-ogikubonishi-ogikubo   53  Re:Re:小見出しの色の変更について

Yuichirouさま> すみません、小見出しでなく見出しでした<(_ _)>。さっそく追加記述してみましたところ変更できました(毎回分かりやすい説明に色々と勉強させていただいております。このたびも非常に分かりやすい回答ありがとうございました!

返信2009/10/30 22:31:32

55: このエントリーは削除されました

このエントリーは削除されました

返信2010/01/20 22:59:00

56: このエントリーは削除されました

このエントリーは削除されました

返信2010/03/06 23:08:03

57nichietunichietu   既存のデザインのアイコンを変えたい

初めてHatenaを使います。

既存のデザインをベースに、

タイトル画像とアイコンを変えたいと挑戦しました。

タイトル画像は変更できたのですが、

記事の中のアイコン(猫のシルエット)の変更方法が分かりません。

この色の付いた猫とグレーの猫を、オリジナルアイコンに変更する方法を教えてください。

よろしくお願いします。

http://d.hatena.ne.jp/nichietu/

返信2010/04/06 15:17:43

58YuichirouYuichirou   57  Re:既存のデザインのアイコンを変えたい

問題のアイコンは、スタイルシートを用いて背景画像として設定されています。それぞれ以下のような設定を行うことで画像を変更することができますよ。

記事見出しのアイコン

.day {
  background-image: url("./bg-day.jpg");
}

コメント欄のアイコン

div.comment {
  background-image: url("./bg-commnet.jpg");
}
返信2010/04/07 23:05:22

59nichietunichietu   58  Re:Re:既存のデザインのアイコンを変えたい

ご教示頂きましたようにやってみましたところ、

無事できました。

Yuichirou様、

ご丁寧にありがとうございました。

返信2010/04/08 10:01:51

60: このエントリーは削除されました

このエントリーは削除されました

返信2010/06/11 20:56:01

61nekoshasinnekoshasin   ブログ全体の横幅が崩れました

初歩的な質問で申し訳ありません。

最近になってなぜか、ブログの横幅が崩れてしまい、本文とサイドバーの間が開き、

横にスクロールしないと全体が見れなくなってしまいました。

デザインの変更で、どこを直せば良いのか教えてください。

返信2010/06/03 17:20:23

62ken3memoken3memo   61  Re:ブログ全体の横幅が崩れました

5/6 の 日記が悪さをしているのでは?

ttp://d.hatena.ne.jp/nekoshasin/20100506

前日 ttp://d.hatena.ne.jp/nekoshasin/20100430

次の日 ttp://d.hatena.ne.jp/nekoshasin/20100511

は大丈夫なので?(私のXP+IE8では5/6以外は普通に崩れていないので)

トップページ ttp://d.hatena.ne.jp/nekoshasin/ は、5/6を含んでいるので崩れているのかなぁと予想。

で、5/6のどこが悪いか・・・肝心なところがわかりません(ぉぃぉぃ)

が、5/6のソース(html)中を見ると、

空の

    タグが異常に多いので、これがレイアウトを崩していると思います。 ※
      タグは箇条書きなので、空の箇条書きが多いのかなぁ。 5/6を編集してみてください。 勘違いだったらスミマセン。
返信2010/06/03 22:33:59

63ken3memoken3memo   62  Re:Re:ブログ全体の横幅が崩れました

すいません、下記タグをそのまま書いてしまって。

空のタグが異常に多いので、これがレイアウトを崩していると思います。

※タグは箇条書きなので、空の箇条書きが多いのかなぁ。

5/6を編集してみてください。

勘違いだったらスミマセン。

5/6の日記で空の<UL>タグが多いのが原因なのでは?

本文中の★が1つへんな感じになっていると思います。

返信2010/06/03 22:44:19

64nekoshasinnekoshasin   63  Re:Re:Re:ブログ全体の横幅が崩れました

ご指摘いただきました通り、★部分を削除したら無事に直りました。

本当に助かりました!ありがとうございました!

返信2010/06/04 08:44:10

65: このエントリーは削除されました

このエントリーは削除されました

返信2010/06/17 22:39:10

66SOUTASOUTA   透過について。

はてなダイアリーで、ヘッダ、サイドバー、記事部分の所を、全て「ugomemo_sky」の背景を透過させたいのですが、どうやってスタイルシートをいじっていいのか分かりません。

どう記載したらいいのか教えてください。

返信2010/07/01 20:29:53

67Risa_sRisa_s   既存のデザインの背景を変えたい。

http://d.hatena.ne.jp/sample/?publicdesignset=866

公開デザインにあるこちらのデザインの背景を自分で変更したいのですが、どのように設定したらいいのか教えて下さい。

①サイドの模様を消したい。

②たての点線を消したい。

以上の2つの方法を教えて下さい。

返信2010/08/30 15:05:33

68chocochipchocochip   30  Re:Re:スタイルシートの設定について

Yuichirou様

はじめまして!

chocochipです。

お礼の言葉が、かなり遅くなってしまい、申し訳ありません!

教えていただいた方法で設定してみたところ、うれしい仕上がりになりました。

ありがとうございました!

ほんとにありがとうございました!

返信2010/09/02 15:52:48

69ui8888ui8888   公開デザインのスタイルシートが知りたい

パソコン、ブログ共に初心者です。

公開デザインから出来るだけシンプルなデザインを選び、そこから自分の好きなデザインに変えていこうと思ったのですが、cssを使っていじっているうちに、思うように適応されなくなりました。

初めに選んだデザインのcssとかぶって混乱しているのかなと思うのですが、どちらにせよ既存のスタイルシートの構成などを見ながら少しずつ変えていくやり方にしたいのですが、表示させる方法はあるのでしょうか?

もしないようでしたら、最初から自分で作るには、どのページ(フォーム?)から作ることができるのでしょうか?

わかる方がいらっしゃいましたら教えてください。

よろしくお願いします。

返信2010/09/13 21:34:33

70kanamesroomkanamesroom   1  Re:「スタイルシート」について

cream. dog.を使っています。

日記を書くごとに編集画面で文字色を指定するのではなく

スタイルシートを使って

日記の本文の文字色と大きさを変更したいのですが

スタイルシートの記述の中で

どの部分が日記の本文のフォントの指定を指すのか

どうしてもわかりません。

お手数ですが教えていただけないでしょうか。

宜しくお願いします。

返信2010/11/22 10:02:29

71kanamesroomkanamesroom   1  Re:「スタイルシート」について

cream. dog.を使っています。

日記を書くごとに編集画面で文字色を指定するのではなく

スタイルシートを使って

日記の本文の文字色と大きさを変更したいのですが

スタイルシートの記述の中で

どの部分が日記の本文のフォントの指定を指すのか

どうしてもわかりません。

お手数ですが教えていただけないでしょうか。

宜しくお願いします。

返信2010/11/22 10:02:33

72kanamesroomkanamesroom   71  Re:Re:「スタイルシート」について

いろいろやってみたら出来ましたので解決しました。

どうもすみませんでした。

返信2010/11/22 16:35:15

73 1  このエントリーは削除されました

このエントリーは削除されました

返信2010/12/03 16:04:41

74 70  このエントリーは削除されました

このエントリーは削除されました

返信2010/12/03 16:02:48

75 71  このエントリーは削除されました

このエントリーは削除されました

返信2010/12/03 16:03:25

76kizunamail_pkizunamail_p   ブログタイトルの文字色変更について

テーマはsimplerを使っています。

文字色が薄いので黒にしたいと思って

スタイルシートに

h1 { color: #000000; }

入れましたが、反映してくれません。

h1の文字色を変更すればいいと考えていましたが、

違うのでしょうか。

返信2010/12/31 00:53:15

77xnissyxnissy   76  Re:ブログタイトルの文字色変更について

http://hatena.g.hatena.ne.jp/bbs/1/521 が参考になるのではないかと思います。

返信2011/01/02 14:58:46

78kizunamail_pkizunamail_p   77  Re:Re:ブログタイトルの文字色変更について

http://hatena.g.hatena.ne.jp/bbs/1/521 が参考になるのではないかと思います。

返事おそくなりましたがありがとうございます!。できました。

返信2011/01/05 17:14:18

79masayan37masayan37   コメント欄を大きくしたい

コメント欄の記入枠の大きさを変更する記述を教えてください。

返信2011/01/30 19:32:20

80xnissyxnissy   79  Re:コメント欄を大きくしたい

81hanakaihanakai   サイドバーにツイッターを表示させたい

みなさん こんにちは。助けてください。

ツイッターのガイドに従って、ウィジッドの式をスタイルシートに挿入して、サイドバーに表示させたかったのですが、上手くいきません。

単に式を挿入したらサイトがフリーズしてしまいます。 はてなにお問い合わせしていますが、なかなかお返事がこなくて解決しません。

私は式についての知識がほとんどないため、何が悪いのか全然わかりません。知識のある方、助けてください。 なにぞとよろしくお願いします。

●参照したツイッターのガイド →http://twitter.com/goodies/widgets

●エラーが起きた時の状況:最初にエラー表示が出た時にwidth*** と表示があったので、幅が250位のツイッターの式で、他に、今入っているものが150だったので、それが悪いのかと思い150に変更してみましたが、それでもプレビューでフリーズしてしまいます。

●ツイッターのガイドに従って出来上がった式。

※式をいれたら、ここのサイトで表示されるので、式だけ表示させたいのに、式の最初の<とかとっても、うまくここで問い合わせ表示でできません。。どうしよう。。

●また、当初エラーが発生して以来、なぜか、右側のピンクの枠が幅広くなってしまっています。サイドバーが2列になっているように見える。そもそも2列だったのか、あまり思い出せません。。。150という幅は広すぎるのでしょうか。

 サンプル→http://d.hatena.ne.jp/themesample?sakura-core

 私のサイト→http://d.hatena.ne.jp/hanakai/

ツイッターが表示されるようになれば、方法はどんなでも構いません(この式でなくても)。

あと贅沢をいえば、私のサイトは着物kimonoがテーマなので、本当は#kimono でコメント書いていらっしゃる方々のツイッターも表示されるようになったら素敵だな、と思っています。(他のサイトでそういうのを見たことがあって)

もし一緒に教えていただけたら本当にありがたいです。

どうぞよろしくお願いします。

返信2011/06/22 14:56:15

82hanakaihanakai   81  サイドバーにツイッターを表示させたい2

スクリプトの間にある式だけコピーしてみます。

new TWTR.Widget({ version: 2, type: 'profile', rpp: 4, interval: 6000, width: 150, height: 300, theme: { shell: { background: '#333333', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: false, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('hanakaikimono').start();

返信2011/06/22 15:00:46

83 81  このエントリーは削除されました

このエントリーは削除されました

返信2011/06/27 22:59:52

84hanakaihanakai   81  Re:サイドバーにツイッターを表示させたい

2つめの●の「幅」については、はてなサポートスタッフ様のお陰様で原因が分かり、解決できました。

サイドバーにツイッターがまだ表示できません。引き続き、お分かりになる方がいらっしゃいましたら、ご教示ください。

どうぞよろしくお願いいたします。

返信2011/06/27 22:58:28