プライベートモードで閲覧中です。

sugar pot : 春木屋版・「このブログの成分解析グラフ」の見栄えをととのえる

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

春木屋版・「このブログの成分解析グラフ」の見栄えをととのえる

2006年04月13日(木) コメント:0 トラックバック:0

前項の解説を必要として読んでくださるひとは、きっと、「背景色を追加、文字色、文字サイズを変更」この辺の解説も必要なんじゃないか(逆にこれが要らないひとはそもそも解説は不要)、と思うに至り、sugさんの「性分解析」ネタで3つ目の記事。

だって面白いじゃん、流行らせようよー。(ちと手間かかるけど)

スタイルシートはここにある

このテンプレートは、テンプレートの編集の上の部分(HTML)に貼り付けたけれど、スタイルシートが<head>~</head>の中に置かれている。


  1. <style type="text/css">ここからスタイルシートだよーん
  2. <!--
  3. * {
  4. text-align: left;
  5. font-weight: 100;
  6. margin: 0; padding: 0;
  7. }
  8. body {
  9. font-size: 95%;全体の文字の大きさ
  10. line-height: 1.4;行間
  11. }
  12. a:hover {
  13. color: #c00;リンクの上にマウスを置いたときの文字色
  14. text-decoration: none;
  15. }
  16. h1 {
  17. text-align: center;見出し「(ブログ名)の成分解析」はセンタリング
  18. font-family: 'Lucida Sans', sans-serif;見出しのフォントスタイル
  19. font-size: 2em;見出しの文字の大きさ
  20. font-weight: 100;標準の太さ(normal)は400なので100は細めに、という感じ
  21. letter-spacing: -.025em;文字間少し狭めちゃおう
  22. padding-top: .5em;上部の余白
  23. }
  24. h1, h1 a, p, p a {
  25. color: #777;見出し,見出しのリンク,「このブログの成分は」「で出来ています」の文字色
  26. text-decoration: none;
  27. }
  28. ul {ここからカテゴリリストの見栄え
  29. list-style-type: none;
  30. padding-left: 1em;
  31. padding-right: 1em;
  32. }
  33. li {
  34. clear: both;
  35. padding-top: 1px;
  36. }
  37. p {ここから「このブログの成分は」「で出来ています。」部分の見栄え
  38. clear: both;
  39. text-align: center;
  40. padding: 1em;
  41. }
  42. li a {
  43. display: block;
  44. float: left;
  45. width: 40%;
  46. text-align: right;
  47. padding: 0; margin: 0;
  48. }
  49. li hr {
  50. float: left;
  51. width: auto;
  52. height: 1em;
  53. color: #9f9;
  54. background: #9f9;棒グラフの色
  55. border: none;
  56. margin-left: .5em;
  57. }
  58. -->
  59. </style>

手がかりになるかな、というところのみ注釈。あまり変えるとグラフが崩れてしまうので注意。細かい記述は以下のウェブサイトを参考にしてみてください。

そうそう、ダイジナコト。Safariユーザのかたは、編集できません。Firefox推奨。

スタイルシートリファレンス

#552
カテゴリ:107 ブログカスタマイズ

trackback

<<春木屋版・「このブログの成分解析グラフ」を自分のブログに載せるには | 恥の多い生涯を送っています>>

コメント(-0件)

コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/552-327a3e6e

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。