ダイアリーのテーマをメモ
現在このダイアリーで使っているテーマの設定をメモしておく。
設定画面を開かないでも設定が見れたらいいな、というのも理由。
以下、すごく長いです。
この設定をあなたのところで使うには、「詳細デザイン設定」の画面で、「テーマ」に「指定無し」を選び、「ヘッダ色」に「白」を選び、以下3つの内容をそれぞれ「ページのヘッダ」「ページのフッタ」「スタイルシート」のテキストエリア欄にコピーして「この内容に変更する」ボタンを押す。
ページのヘッダ
<div class="main"> <hatena name="calendar" template="allmonth">
ページのフッタ
<br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> </div> <div class="sidebar"> <hatena name="profile"> <hatena name="searchform" template="hatena-module"> <hatena name="calendar2" template="hatena-module"> <div class="hatena-module"> <div class="hatena-moduletitle">記事一覧</div> <div class="hatena-modulebody"> <ul class="hatena-urllist"> <li><a href="/peanutsjamjam/archive">記事一覧</a></li> </ul> </div> </div> <hatena name="section" template="hatena-module" listlimit="10" moduletitle="最近の記事" showcategory="false"> <hatena name="sectioncategory" template="hatena-module"> <hatena name="comment" template="hatena-module" titlelength="15" listlimit="5" dateformat="%m/%d"> <hatena name="trackback" template="hatena-module" titlelength="15" listlimit="5" dateformat="%m/%d"> <div class="hatena-module"> <div class="hatena-moduletitle">リンク集</div> <div class="hatena-modulebody"> <ul class="hatena-urllist"> <li><a href="http://www.f3.dion.ne.jp/~asugawar/">PeanutsJamJam</a> @dion</li> <li><a href="http://f.hatena.ne.jp/peanutsjamjam/">Fotolife</a></li> <li><a href="http://ideaman.g.hatena.ne.jp/peanutsjamjam/">ideaman日記</a></li> <li><a href="http://freebsd.g.hatena.ne.jp/peanutsjamjam/">freebsd日記</a></li> <li><a href="http://photozou.jp/">写真共有「フォト蔵」</a></li> </ul> </div> </div> <hatena name="ring" rid="noextend" sid="193799" mode="image" template="hatena-module"> <hatena name="counter"> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> </div>
スタイルシート
スタイルシートは、はてな提供の Hatena-green と d:id:PultraMan さんの d:id:PultraMan:20060130:1138621578 を元にして作ったもの。モジュールの類が右ではなく左に来るようにイジった。PultraMan さんにはホントお世話になってます。このページ。
スタイルシートの中では、私の Fotolife にアップロードしてある画像を h1 の background-image として呼び出している。自分の好みの画像をタイトル画像として使いたい場合は、その画像を自分の Fotolife にアップロードして、その URL を書き込めばよい。
/*************************/ /* hatena-green-pjam.css */ /*************************/ span.highlight { color: black; background-color: yellow; } img.photo { float: right; margin: 10px; border: 0; } img.hatena-fotolife { border: 1px solid #606060; } img.asin, img.barcode { border: 0; } h3 span.timestamp { font-weight: normal; font-size: 80%; } table.furigana { } ul.hatena_photo li { display: inline; } img.hatena_photo { border: 0px; } div.ad { margin: 0% 5% 0% 5%; padding: 4px; text-align: left; } img.aws { padding: 3px; margin-right: 2px; } a.aws img { border: 1px solid white; } a.aws:hover img { filter:none; background-color: #ffcc66; border-bottom: 1px solid #ffcc66; } div.recentitem_diary { margin: 2% 5% 0 6%; font-size: 10pt; } div.hatena-body { position: relative; width: auto; _width: 100%; top: 0; left: 0; } div.hatena-module { margin: 0; padding: 0; width: 100%; } div.hatena-modulebody ul, ul.hatena_antenna, ul.hatena_section, ul.hatena_groupantenna, ul.hatena_keyword, ul.hatena_hotkeyword, ul.hatena_hoturl, ul.hatena_hotasin { display: block; font-size: 80%; list-style-type: none; margin: 0; padding: 0; } div.hatena-modulebody dl { display: block; font-size: 80%; margin: 0; padding: 0; } div.hatena-modulebody dd { margin-left: 0; margin-bottom: 0.2em; } ul.hatena-photo li { display: inline; } ul.hatena-photo img { border: none; padding: 1px; } form.hatena-searchform { padding: 0; margin: 0; } div.hatena-profile { font-size: 80%; } div.hatena-profile p { margin: 0; padding: 0; } div.hatena-profile p.hatena-profile-image { text-align: center; } div.hatena-profile p.hatena-profile-id { text-align: center; } div.hatena-profile p.hatena-profile-image img { border: 0; } table.hatena-question-detail { width: 500px; font-size:90%; } table.hatena-question-detail th { text-align: left; } td.hatena-question-detail-label { width: 200px; } td.hatena-question-detail-value { width: 300px; } img.hatena-question-image { border: 0; } img.hatena-profile-image { border: 0; } div.hatena-clock { text-align: center; } body { color: black; background-color: #ffffff; margin: 0px; padding: 0px; } div.adminmenu { font-size: 90%; margin: 2% 5% 0% 0%; text-align: right } span.adminmenu {} div.pjjnote { font-size: 90%; margin: 0 5% 0 5%; padding: 0; text-align: right; } div.calendar { font-family: monospace; font-size: 90%; margin: 0 5% 0 5%; padding: 0; text-align: right; } div.calendar a { text-decoration: underline; } .headline { font-size: 90%; margin: 0% 10% 0% 10%; padding: 2%; text-align: left; background-color: #ffee99; } div.intro{ margin-top: 2%; margin-right: 5%; margin-bottom: 2%; margin-left: 5%; } div.day { margin: 0% 5% 0% 5%; padding: 4px; } td.main div.day div.body{ _width: auto; } div.section { margin-top: 2%; margin-bottom: 2% } h3 { font-size: 120%; font-weight: bold; margin-top: 2%; margin-bottom: 0.1% } h5 { font-size: 100%; margin: 0.5em 0 0 0.7em; } div.day span.canchor { color: black; } div.day p { margin-bottom: 0.5%; margin-top: 0.5%; text-indent: 1em } div.section p { padding-top: 0.2%; padding-bottom: 0.2%; } div.comment { font-size: 90%; line-height: 1.5; } div.comment p { margin-left: 0em! important; text-indent: 0em } div.refererlist { font-size: 90%; margin: 0px; padding: 0px; width: auto; _width: 100%; } hr {} hr.sep { display: none } .sfooter {} div.footer { color: #cccccc; margin: 5px; font-size: 80%; text-align: center; } div.footer a { color: #cccccc; } div.form { font-size: 90%; line-height: 1.5; margin: 1% 5% 1% 5%; padding: 1%; text-align: center; } div.form form { width: 100%; } input.select { text-indent: 0em ! important; } p.message { color: red; background-color: #ffffff; font-size: 100%; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; text-align: center; } div.body dl { margin-left: 2em; } div.body dt { font-weight: bold; margin-bottom: 0.2em; } div.body dd { margin-left: 1em; margin-bottom: 0.5em; } div.section blockquote p { margin-left: 0em; text-indent: 0em } em { font-style: italic; } strong { font-weight: bold; } .hide { color: #000000; background-color: #ffffff } /* calendar2 */ table.calendar { font-size: 0.8em; line-height: 100%; background-color: transparent; margin: 0; } table.calendar td { margin: 0; padding: 1px 2px 0px 2px; text-align: right; } table.calendar td.calendar-prev-month, table.calendar td.calendar-current-month, table.calendar td.calendar-next-month { text-align: center; } table.calendar td.calendar-sunday { color: red; } table.calendar td.calendar-saturday { color: blue; } table.calendar td.day-today{ text-decoration: underline; } table.calendar td.day-selected{ text-decoration: underline; } table.calendar td.day-selected a{ text-decoration: underline; } td.calendar-day img { width: 15px; height: 15px; border: 0; } /* ツッコミ省略版本文 */ div.commentshort { margin-bottom: 10px; } span.commentator { } div.commentshort p { margin: 0.2em 0 0.2em 0; line-height: 1.2em; } div.commentshort p .canchor a{ color:black; } /* ツッコミ本体 */ div.commentbody { margin: 0.5em; line-height: 1.2em; } /* ツッコミした人の情報 */ div.commentator { line-height: 1.5em; font-weight: bold; } /* ツッコミ本文 */ div.commentbody p { margin: 0.5em; } /* フォームの設定 */ div.form form { margin: 0em; } div.field { display: inline; margin-right: 2em; } div.textarea { display: block; vertical-align: top; text-align: center; } form.comment textarea { width: 40em; height: 3em; } div.button { display: block; } /* 更新フォーム */ form.update { padding-top: 0.5em; padding-bottom: 0.5em; } form.update input, form.update textarea, form.commentstat input { background-color: #ffffff; color: #06040F; } form.update span.field { display: inline; margin-left: 0em; margin-right: 0.5em; } form.update div.field.title { display: block; margin-top: 1em; } form.update div.field.title input { margin-left: 0.5em; } form.update div.textarea { display: block; margin-top: 1em; text-align: center; } form.update textarea { display: block; margin-bottom: 1em; width: 35em; height: 15em; margin-left: auto; margin-right: auto; } form.update span.checkbox.hidediary { margin-left: 1em; } div.day.update div.comment { text-align: center; } div.comment form{ margin-top: 0em; } td.sidebar { width: 120px; padding: 10px 0px 0px 0px; vertical-align: top; } td.main { width: 100%; padding: 0px; vertical-align: top; } div.main { margin-left: 170px; } div.sidebar { position: absolute; top: 0px; left: 0px; width: 150px; margin-left: 5%; } /* recent_list, title_list */ div.recentsubtitles { font-size: 10pt; margin-top: 0px; margin-bottom: 1em; margin-left: 0em; line-height: 110%; } div.hatena-asin-detail { margin: 10px; padding-left: 10px; } div.hatena-asin-detail p { text-indent: 0em ! important; line-height: 150%; } div.hatena-asin-detail ul { list-style-type: none; margin: 0; margin-top: 10px; padding: 0; } img.hatena-asin-detail-image { float: left; border: 0; } div.hatena-asin-detail-info { margin-left: 10px; float: left; word-break: break-all; } p.hatena-asin-detail-title { font-weight: bold; } div.hatena-asin-detail-foot { clear: left; } td.furigana { border: #666666 1px solid; text-align: center; padding: 5px; } h4.hatena-module { margin: 1em 0 0.3em 0; padding: 0; font-size: 80%; text-align: center; font-weight: normal; border-color: #666666; border-style: solid; border-width: 0px 0px 1px 0px; } div.hatena-moduletitle { margin: 1em 0 0.3em 0; padding: 0; font-family: Verdana, Osaka, sans-serif; font-size: 90%; text-align: center; font-weight: normal; color: #fff; background-color: #666666; } .hatena-moduletitle a { text-decoration: none; color: #fff; } h1 { background-image: url("http://f.hatena.ne.jp/images/fotolife/p/peanutsjamjam/20060913/20060913180715.jpg"); background-position: left; background-repeat: no-repeat; /* width, height を background-image のサイズに一致させる */ width: 750px; height: 320px; text-align: left; font-family: Verdana, Osaka, sans-serif; font-size: 125%; font-weight: bold; color: #fff; margin: 10px 5% 10px 5%; padding: 4px 4px 4px 4px; } h2 { font-size: 100%; background-color: #666666; padding: 3px 0px 2px 10px; margin: 5px 0 0 0; width: auto; _width: 100%; } h2 span.date { color: #fff; font-size: 100%; font-style: normal; margin-left: 2px; margin-right: 2px; } h2 a { text-decoration: none; } a.edit { color: #fff; } h2 span.title { color: #FFFFFF; font-size: 100%; font-style: normal } h2 span.title a { color: #ffffff; } div.body { font-size: 90%; border-color: #666666; border-style: solid; border-width: 0 0 0 1px; margin-top: 0px; margin-bottom: 0px; padding: 3px 10px 3px 10px; line-height: 1.5; width: auto; _width: 100%; } h4 { font-size: 100%; font-weight: bold; margin: 0.6em 10% 0 0.4em; border-left: 5px solid #666666; border-bottom: 1px solid #666666; padding: 0px 0.5em 0.1em 0.5em; } div.day span.sanchor { color: #666666; } div.referer { font-size: 90%; border-top: #666666 1px solid; border-bottom: #666666 1px solid; text-align: right; line-height: 1.5; } div.refererlist ul { background-color: #CFEFD8; padding: 5px; margin: 0; list-style-type: circle; list-style-position: inside; } div.refererlist ul ul { background-color: #CFEFD8; padding: 0; margin: 0 0 0 5%; list-style-type: disc; list-style-position: inside; } div.caption { margin: 8px 0 0 0; border-bottom: #666666 1px solid; } input.field { color: #06040F; background-color: #ffffff; border: 1px solid #666666; text-indent: 0em ! important; } textarea { font-size: 90%; color: #06040F; background-color: #ffffff; border: 1px solid #666666; height: 30em; width: 50em; } pre { background-color: #CFEFD8; padding: 8px; } div.body blockquote { color: #333333; background-color: #ffffff; border: #666666 1px solid; margin: 1% 2%; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; } p.recentitem { padding: 1px; font-size: 10pt; text-align: center; margin-top: 0px; margin-bottom: 2px; border-color: #666666; border-style: solid; border-width: 0px 0px 1px 0px; } div.section p.sectionfooter { font-size: 90%; text-align: right; margin-top: 1em; } /* テーブル記法 */ div.day table{ margin:10px; } div.day table tr th{ font-size:90%; padding:3px; background:#EEE; border-bottom:1px solid gray; } div.day table tr td{ font-size:90%; padding:3px; border-bottom:1px dashed gray; } div.day table.plaintable{ margin:0px; } div.day table.plaintable tr td{ padding:0px; font-size:100%; border:none; } div.day table.plaintable tr th{ padding:0px; background:transparent; border:none; font-size:100%; } /* グラフ記法 */ div.hatena-graph a img{ border:none; } img.hatena-graph-image{ border:none; } /* keywordcloud */ ul.keywordcloud { margin: 10px; padding: 0; } ul.keywordcloud li { font-size:90%; display: inline; font-family: 'Arial',sans-serif; color:gray; } a.keywordcloud0 { font-size: 80%; } a.keywordcloud1 { font-size: 100%; } a.keywordcloud2 { font-size: 120%; } a.keywordcloud3 { font-size: 140%; } a.keywordcloud4 { font-size: 160%; } a.keywordcloud5 { font-size: 180%; } a.keywordcloud6 { font-size: 200%; } a.keywordcloud7 { font-size: 220%; } a.keywordcloud8 { font-size: 240%; } a.keywordcloud9 { font-size: 260%; } a.keywordcloud10 { font-size: 280%; } a.keywordcloud0, a.keywordcloud1, a.keywordcloud2, a.keywordcloud3, a.keywordcloud4, a.keywordcloud5, a.keywordcloud6, a.keywordcloud7, a.keywordcloud8, a.keywordcloud9, a.keywordcloud10 { text-decoration: none; } /* profile image */ img.hatena-id-icon { vertical-align:middle; margin-right:2px; margin-bottom:4px; border:none; } img.hatena-id-image { border:none; } .footnote { font-size: 90%; } img.pjjimg { border: 0; } ul.hatena-section li { margin: 0 0 4px 0; }