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

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

リスト表示 | ツリー表示

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

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

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

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