はてなダイアリーのスタイルシートについて


http://q.hatena.ne.jp/1327815602
↑の瑠奈さんの質問のwindofjulyの回答で、

・文字や画像を表示する大きさを指定できる
・文字や画像の表示する位置を指定できる
・文字の色や、背景の色などを指定できる
・マウスカーソルの形を指定したりもできる
・マウスが来たときに色を変えたりもできる

というものがありますが、それぞれどうやってするのですか?

上記URLの質問は終了していたため、こちらで質問させていただきます

回答の条件
  • 1人50回まで
  • 登録:2012/01/29 21:12:53
  • 終了:2012/02/05 21:15:11

ベストアンサー

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492012/01/29 22:49:49

全部一度に回答するのは大変なので、一部だけにしますよ

(1)ダイアリー全体のレイアウトを変える場合の例
ダイアリーの管理画面のメニューで「デザイン」→「デザイン編集」
デザイン編集の画面に切り替わったら「詳細」をクリックして、
スタイルシートの欄に下記のスタイルを書き加えます

記事タイトルの文字の大きさと色を変えて右に寄せてみます

#title { font-size:15px; color:pink; text-align:right; }

このような改造を行うためには、
はてなダイアリーのHTML構造を調査する能力が必要になりますので、
まずはホームページの作り方を基礎からしっかりと学ぶ必要があります

(2)記事の一部分のスタイルを変えたい場合の例
ダイアリーの記事を書く場所で、
下記のようにHTMLタグとスタイルシートを合わせて書きます

<p style="font-size:30px; color:blue; text-align:right;">右によるぜ!</p>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kuttuku/20110415/20110415232026.jpg" style="height:163px;width:240px;" />
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kuttuku/20110415/20110415232026.jpg" />

部分的に変えたいだけなら、人力検索などで訊いてみるとすぐにでも教えてくれる場合がありますが、全体的に変えたいとなると回答を作る側も大変な負担になるので、過度の期待はしないでください

(3)スタイルの指定方法
大きさなど以外に色々とありますので、下記参照してみるといいでしょう
(CSSバージョン3への移行が進んでいるので今後はもっと増えます)
http://www.htmq.com/style/index.shtml

色はRed、Maroon、Fuchsia、Purple、Lime、Green 、Yellow、Olive、
Blue、Navy、Aqua、Teal、White、Silver、Gray、Blackの指定が出来ます
もっと細かな色調整をしたい場合は16進数で指定します
有名どころの数値は下記参照
http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88

id:kuttuku

回答まことにありがとうございました。
参考にさせていただきます。

2012/02/02 18:41:59

その他の回答(1件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492012/01/29 22:49:49ここでベストアンサー

全部一度に回答するのは大変なので、一部だけにしますよ

(1)ダイアリー全体のレイアウトを変える場合の例
ダイアリーの管理画面のメニューで「デザイン」→「デザイン編集」
デザイン編集の画面に切り替わったら「詳細」をクリックして、
スタイルシートの欄に下記のスタイルを書き加えます

記事タイトルの文字の大きさと色を変えて右に寄せてみます

#title { font-size:15px; color:pink; text-align:right; }

このような改造を行うためには、
はてなダイアリーのHTML構造を調査する能力が必要になりますので、
まずはホームページの作り方を基礎からしっかりと学ぶ必要があります

(2)記事の一部分のスタイルを変えたい場合の例
ダイアリーの記事を書く場所で、
下記のようにHTMLタグとスタイルシートを合わせて書きます

<p style="font-size:30px; color:blue; text-align:right;">右によるぜ!</p>
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kuttuku/20110415/20110415232026.jpg" style="height:163px;width:240px;" />
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kuttuku/20110415/20110415232026.jpg" />

部分的に変えたいだけなら、人力検索などで訊いてみるとすぐにでも教えてくれる場合がありますが、全体的に変えたいとなると回答を作る側も大変な負担になるので、過度の期待はしないでください

(3)スタイルの指定方法
大きさなど以外に色々とありますので、下記参照してみるといいでしょう
(CSSバージョン3への移行が進んでいるので今後はもっと増えます)
http://www.htmq.com/style/index.shtml

色はRed、Maroon、Fuchsia、Purple、Lime、Green 、Yellow、Olive、
Blue、Navy、Aqua、Teal、White、Silver、Gray、Blackの指定が出来ます
もっと細かな色調整をしたい場合は16進数で指定します
有名どころの数値は下記参照
http://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88

id:kuttuku

回答まことにありがとうございました。
参考にさせていただきます。

2012/02/02 18:41:59
id:grankoyama No.2

グラ娘。回答回数560ベストアンサー獲得回数1702012/01/29 23:05:41

そもそもスタイルシートというのは、共通の大きさや位置、色などを設定しておくところです。
例えばブログの記事のタイトルとか全体のフォントサイズとか自分で決めたサブタイトルとかです。
毎日毎日ブログのタイトルの文字だけ大きくするなんて手間なので、それをスタイルとして定義して
スタイルシートで文字の大きさとか色とかを決めておきます。
それにしたがって書いていけば、ちょっと色を変えたくなったときにスタイルシートを変更するだけで全部のタイトルの文字の大きさとか色とかが変えられるのです。
なので、共通のどこのなにをどう変えたいかという情報がないとスタイルシートを一から全部勉強するはめになって回答者も大変です。


一回こっきりで大きさとかサイズを変えるのだったら、スタイルシートを使うまでもありません。
フォントサイズを変えたり、画像のサイズを指定する方法は他にあります。
普通にHTMLのタグとか使って。


ちなみにマウスカーソルを変える質問などは人力検索でもなんどか上がっています。
http://q.hatena.ne.jp/1324466842 こんなん。


まずは、あなたのダイアリーをどう変えたいのか。
それを個別に聞く方が良いとおもいます。
どこを変えるのかをはっきりしないとダイアリーのデザインによって書く内容が変わってきますし、スタイルのIDとかよくわかんない人には例を出されても自分ではできなかったりします。

それか、スタイルシートを一から勉強したいのならどんなサイトがあるかどんな本を読めばいいのか聞くとか。


わたしなんかは、

.day {background-color: #FDFCF7;}
.section {background-color: #FEFDF8; font-size:small;}
.footnote{font-size:small;}
table {font-size:small;}

とだけスタイルシートに書いてます。
.day とか .section というのがダイアリーのどの部分かを指すID? かなんかでこれを割り出すことから全てが始まります。それにそれぞれ色とかフォントサイズとかを指定していくわけです。
たしか、各記事の背景色をちょっと変えて全体的に文字を小さめに設定している感じです。


回答になってませんが、コメントだと見づらいので回答に書きました。

id:kuttuku

なるほど…
次回からはポイントを絞って質問していくようにします。
回答ありがとうございました。参考になります。

2012/02/02 18:44:10

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

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

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

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

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