ふとんのなかから

びまん性大細胞型B細胞リンパ腫にかかったあとだらだらしている人のブログ

はてなデザインLCARS化　その9

日記

出来た！はてなダイアリー用LCARS完成であります。
テーマ「90」を元に改造したものなのでGPLの規定に則り以下にソースを公開します。もし使いたいという方がいましたら遠慮なくどうぞ。不具合等ありましたらお知らせください。


主な特徴

  • 設定画面で入力したブログタイトルをh1要素に表示する。
  • モジュールはサイドバー上に置かれる。
  • 画面サイズ1280×960まで対応。
  • 動作確認済みブラウザ　Opera ver7.23 IE ver6.0 Netscape ver7.1
  • Opera推奨。
  • IEでは文字サイズを「小」にするとデザインが正常に表示される。
  • Netscapeではデザインが若干崩れる。テキストを「90%」に縮小すると改善される。
  • width幅の都合上、h2要素は日付表示専用。見出しはh3要素に書いてください。

準備

  1. 画像を保管できる場所を用意する。
  2. 下記アドレスの画像をダウンロードし、保管場所にアップロードする。

http://urawa.cool.ne.jp/subark/h1.gif
http://urawa.cool.ne.jp/subark/h2.gif
http://urawa.cool.ne.jp/subark/h3.gif
http://urawa.cool.ne.jp/subark/right.gif
http://urawa.cool.ne.jp/subark/left.gif
http://urawa.cool.ne.jp/subark/back.gif
http://urawa.cool.ne.jp/subark/bar.gif

  1. 下記スタイルシートの「画像のURL」部分を画像を保管したURLに変える。
  2. 下記参考例htmlの「img src="画像のURL/bar.gif"」を画像を保管したURLに変える。


使い方

  1. 設定画面を開く
  2. テーマを「指定なし」にする。
  3. 日付の書式を「%y-%m%d」にする。
  4. スタイルシート欄にソースを貼り付ける（既存のソースがあったら削除すること）。
  5. html欄にソースを書く（下記「html欄の書き方」を参照）。
  6. 「この内容に変更する」ボタンを押す。
  7. 終わり。


スタイルシートのソース

<!-- @charset "euc-jp";

html {
margin:0;
padding:0;
border:none;
}

html * {
-moz-box-sizing: border-box ;
box-sizing: border-box ;
}

body{ 
font-size: 80%; 
/* MacIE5 \*/ 
letter-spacing: 1px;
/*  */
font-family: sans-serif, Verdana, Osaka;
line-height: 1.5; 
color: #ffffff; 
background-color: #000000;
text-align: center;
margin: 0; 
padding: 0;

word-break: break-all ;
word-wrap: break-word ;
}

h1 {
font-family: "Trebuchet MS",osaka,sans-serif;
text-align: right;
line-height: 1px;
font-size: 13px;
font-weight: bold;
margin: 0 3% 0 3%;
letter-spacing: 0.2em;
background: url("画像のURL/h1.gif") no-repeat top right;
padding: 29px 35px 141px 0;
border: none;
background-color: #000000;
color: #000000;
}

.hatena-body{
position: relative ;
margin: 0 3% 0 3%;
padding: 0;
width: auto;
_width: 100%;
}

.main{
position: absolute;
top: -90px;
left: 0px;
right: 0px;
padding: 0 10px 10px 190px;
margin: 0;
width: 100%;
border-style: none;
}

.day {
margin: 0 0 15px 0;
padding: 0;
width: auto;
_width: 100% ;

text-align:left;
}

h2 a{
color: #ffff9c;
border: none;
}

h2 a:hover{
color: #ff9c00;
border: none;
}

h2 {
width:7em;
color: #ffff9c;
font-size: 18px;
text-decoration:none;
text-align: left;
line-height: 15px;
font-weight: bold;
margin: 30px 35px -10px 10px;
padding: 0 5px;
border-left: 10px solid #f7bd5a;
border-right: 33px solid #f7bd5a;
}

span.date{
font-family: Arial, Helvetica, sans-serif;
}

span.title{
font-size: 100%;
letter-spacing: 1px;
font-family: sans-serif, Verdana, Osaka,; 
font-weight: bold;
margin-left: 15px;
}

.body {
padding: 1.5em 0 0 0;
margin: 0 0 0 0;
width: auto;
_width: 100% ;
}

.section{
padding: 0 0 25px 0;
margin: 0;
border-bottom: solid 1px #000000;
}

h3 a{
border:none;
color: #000000;
}

h3 a.keyword,
h3 a.okeyword {
text-decoration: none;
border-bottom: dotted 1px #000000;
}

h3 {
font-weight: bold;
border: none;
color: #000000;
letter-spacing: -0.1em;
font-size:130%;
margin: 0 0 1em 0;
padding:0;
text-align:left;
background: url("画像のURL/right.gif") no-repeat right center #97567b;
}

a.sectioncategory{
border-bottom: solid 1px #000000;
}

span.sanchor{
 color: #97567b;
 font-size: 5px;
 text-decoration: none;
 margin: 0;
 padding: 16px 19px 11px 0;
 background: url("画像のURL/left.gif") no-repeat left center #000000;
 border: none;
}

span.sanchor a{
 border: none;
}

span.timestamp{
font-size:70%;
font-weight: normal;
letter-spacing: 0px; 
}

.section P {
margin: 1em 1em;
text-align:left;
padding: 0;
}


/**************** decoration *************************/

a{
text-decoration: none;
color: #ffffff;
border-bottom:solid 1px #ffffff;
}

a.keyword,
a.okeyword {
text-decoration: none;
border-bottom: dotted 1px #dddddd;
}

a img{
border: none;
}

a:link    { }

a:visited { } 

a:hover   { 
color: #ff9c00;
}
  
a:active  { 

} 

h4 {
color: #ffffff;
font-size:120%;
   font-weight: normal;
margin:0;
padding: 1em;
text-align:left;
word-break:break-all;
}

blockquote{
border: solid 1px #808080;
background-color: #002;
margin: 1em 1em;
padding: 1em;
}

blockquote p{
margin: 0;
padding: 0;
}

cite{
font-weight: normal;
font-style: normal;
display:block;
text-align: right;
}

cite a{
border: none;
}

pre{
border: dotted 1px #808080;
background-color: #001;
margin: 1em 1em;
padding: 1em;
}

font{
line-height: 1.2em;
}

em,
em a{
font-weight: normal;
font-style: normal;
border: none;
background-color: yellow;
}

ins,
ins a{
text-decoration: none;
border: none;
color: #666666;
}

s{
text-decoration: line-through;
}


/************************* list **********************/

.section ul{
margin: 1em 1em 1em 2em;
padding: 0;
}

.section ol{
margin: 1em 1em 1em 2.5em;
padding: 0;
}

.section ul li,
.section ol li,
.section ol ul,
.section ol ol,
.section ul ul,
.section li li {
margin: 0 0 0 1em;
padding: 0;
}



.section dl{
margin: 1em 1em;
}

.section dt{
font-weight: normal;
}

.section dd{
}


/********************** img ***************************/

img.photo{
float: right;
padding: 0;
margin: 0 1em 10px 10px;
}

img.asin{
float: right;
margin: 0 0 10px 10px;
padding: 0;
}

/********************* footnote **********************/

span.footnote{
font-size: 70%;
}

span.footnote a{
border: 0;
}

div.footnote{
margin: 1em;
padding: 1em;
border: dotted 1px #dddddd;
}

p.footnote{
margin: 0;
font-size: 90%;
}

/********************** comment ***********************/

div.comment,
div.refererlist{
width: 95% ;
padding:  0;
margin:  0 0 1em 3%;
}

div.refererlist ul,
div.comment ul{
margin: 0 2em;
padding: 0;
list-style-type: disc;
font-size: 100%;
letter-spacing: 0px;
}

form div.refererlist ul,
form div.comment ul{
font-size: 100%;
letter-spacing: 1px;
}


div.caption{
font-size: 100%;
padding: 0 0.5em;
border-left: solid 6px #d45f10;
border-top: solid 1px #d45f10;
margin: 0 0 5px 0;
}

form div.refererlist div.caption{
font-size: 100%;
padding: 0 0.5em;
margin: 0.5em 0;
}



div.caption a{
        border: none;
}

span.commentator{
font-weight: normal;
display:block;
margin: 0 0 0 -1em;
padding: 0 3px;
border-top: solid 1px #d45f10;
border-left: solid 6px #d45f10;
}

form span.commentator{
display: inline;
margin: 0;
}

span.canchor{
display: none;
}

div.commentshort a{
border: none;
}

span.commentator{
font-weight: normal;
margin-right: 0.5em;
}

div.commentshort P
{
margin: 0 0 5px 2em;
font-size: 100%;
letter-spacing: 0px; 
}

/********************** sidebar ***********************/

.sidebar {
position: absolute;
top: -171px; 
left: 0px;
width: 170px;
padding: 0;
margin: 0 0 auto 0;
font-size: 90%;
text-align: left;
background: url("画像のURL/h2.gif") no-repeat top left;
border-style: none;
}

/********************* module ************************/

.hatena-module{
margin: 0;
padding: 0;
width: 150px ;
position: relative;
}

.hatena-moduletitle,
.hatena-moduletitle a{
border: none;
color: #000000;
}

.hatena-moduletitle{
font-size: 120%;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 9px 0.5em 1px 0;
margin: 0;
background-color: #ff9c00;
border-top: 5px solid #000000;
color: #000000;
text-align: right;

}

.hatena-modulebody{
padding: 10px 0 10px 0;
margin: 0;
font-family: sans-serif, Arial, Helvetica;
font-size: 110%;
background-color: #cd6363;
border-top: 5px solid #000000;
color: #000000;
width: 150px;
_width:100%;

}

.hatena-modulebody a{
font-family: sans-serif, Arial, Helvetica;
border: none;
}

.hatena-modulebody a:hover{
font-family: sans-serif, Arial, Helvetica;
color: #ff9c00;
border: 0;
width: auto;
_width: 100%;
background-color: #000000;
}

.module-txtspace{
padding: 0 0.5em 0 0.5em;
}

.module-txtspace2{
letter-spacing: 0.1em;
}

/********************** sideber li **********************/


.hatena-modulebody ul{
padding: 0;
margin: 0;
list-style-type: none;
background-color: #cd6363;
color: #000000;
}

.hatena-modulebody li {
text-indent: 0.5em;
background-color: #cd6363;
color: #000000;
}

.hatena-modulebody li a{
display: block;
width: auto;
_width: 100%;
text-indent: 0em;
padding: 1px 0.5em 1px 1em;
margin: 1px 0 2px 0;
border:none;
background-color: #cd6363;
}

.hatena-modulebody li a:hover {
color: #ff9c00;
border-left: solid 1px #cd6363;
border-right: solid 1px #cd6363;
width: auto;
_width: 100%;
background-color: #000000;
}

/************************ form **********************/

form{
margin:0;
padding: 0;
}

form.hatena-searchform{
margin: 5px 0;
}

div.day form,
form .day{
border:none;
background-color: #000000;
margin: 0;
padding: 0 1em;
}

div.day div.comment form{
margin: 0;
padding: 0;
border: 0;

background-color: transparent;
}


div.day form div.body{
margin: 0;
padding: 1em 2em;
}

form h3{
margin: 0.5em 0;
padding: 0;
border-bottom: solid 1px #808080;
font-size: 100%;
}

/******************* photo module *******************/


ul.hatena-photo{
padding: 5px 0;
margin: 0;
_width: 100%;
width: auto;
list-style-type: none;
text-align: left;
}

ul.hatena-photo li{
margin: 0;
display: inline;
width: none;

}

ul.hatena-photo li img{

}

ul.hatena-photo li a{
display: inline;
width: 48%;
margin: 0 0 10px 0;
padding: 0;
text-align: center;
border: none;
}

ul.hatena-photo li a:hover{
width: 48%;
background-color: transparent;
border: none;
}

ul.hatena-photo li a img{
filter: none;
border: 1px solid #dddddd;
}

ul.hatena-photo li a:hover img{
filter: none;
border: 1px solid #ff0000;
}


/********************** calender **********************/

div.calendar {
font-size:90%;
color: #000000;
margin: 0;
padding-left:5px;
text-align: left;
}

div.calendar a{
border: none;
color: #ffffff;
}

div.main div.calendar {
font-size:9px;
letter-spacing: -0.1em;
color: #000000;
text-align: right;
margin: -5px 0 -25px 0;
padding:15px 3px 3px 0;
}

div.main div.calendar a{
padding:11px 5px 9px 20px;
background:url("画像のURL/back.gif") no-repeat center right;
border:none;
color: #000000;
}

div.main div.calendar a:hover{
border:none;
color: #ff9c00;
}

/********************** header **********************/

table
{ 
margin: 0 3% 0 3%; 
padding: 0 0 0 180px;
border: none; 
background: url("画像のURL/h3.gif") no-repeat bottom left;
width: auto;
}

td 
{
 background-color : transparent;
}

table table td{
 background-color : transparent;
}

table table{
margin: 0;
padding:0;
border: none;
width: 100%;
border: 0;
background-image: none;
background-color : transparent;
}

table table td font, 
table table td a{
border:none;
color: #ffffff;
}

td a{
border: 0;
}

table input{
border: solid 1px #808080;
color: #000000;
}



div.body table{
width: auto;
border: 0;
}

/********************** calendar2 **********************/

div.calendar2{
padding: 0;
}

table.calendar{
font-size: 100%;
font-family: sans-serif, Arial, Helvetica;
width: 100%;
margin: 0;
padding: 0;
background-color: #cd6363;
background:none;
text-align: center;
position: relative;
}

td.calendar-current-month{
font-weight: bold;
width: 44%;
}

td.calendar-prev-month,
td.calendar-next-month{
text-align:center;
width:28%;
}

td.calendar-day {
}

td.calendar-day a{
display: block;
border-bottom: solid 1px #808080;
}

td.calendar-day a:hover{
background-color: #000000;
border-color: #ff0000;
color: #ff9c00;
}

td.calendar-weekday,
td.calendar-sunday,
td.calendar-saturday{
text-align:center;
}

td.calendar-day a img {
width: 12px;
height: 12px;
border: solid 1px #d0d0d0;
}

td.calendar-day a:hover img{
border: solid 1px #ff0000;
}

/************************ adminmenu ****************************/

div.adminmenu{
text-align: right;
padding: 1em 0;
margin: 0 7%;
font-size: 80%;
background-color: #000000;
color: #ffffff;
}

div.adminmenu a{
border: none;
color: #ffffff;
}

div.hatena-body div.adminmenu{
text-align: right;
margin: 0;
padding: 0.5em 1em;
width: auto;
border: 0;
}

/*********************/

span.highlight {
background-color: yellow;
padding: 1px;
}

.footer{
border: solid 1px #808080;
padding: 10px;
text-align: center;
}

.footer,
.footer a{
color: #808080;
border: none;
}

textarea{
width:85%;
height:30em;
}

div.body {
	clear: both;
}
-->


html欄の書き方

  • 「html欄の内容 = サイドバーの内容」と思っていい。具体的な書き方についてはhttp://guide.g.hatena.ne.jp/sugio/20040723参照。
  • サイドバーの宣言の直後に必ず「img src="画像のURL/bar.gif"」を置くこと。
  • モジュールは「template="hatena-module"」でモジュール用の枠組みを呼び出すこと。

「div class="module-txtspace"」について:サイドバー上のモジュールでないテキストの両端の表示をモジュールと合わせたいときに使う。

「div class="module-txtspace2"」について:サイドバー上のテキストの文字間を少し狭めたいとき使う（参考例ではsectionモジュールを囲んでいる）。


参考例：このページのhtml

ページのヘッダ
<div class="main">


ページのフッタ
</div>
<div class="sidebar">
<img src="http://urawa.cool.ne.jp/subark/bar.gif"></img>
<div class="hatena-module">
<div class="hatena-moduletitle">CATEGORY</div>
<div class="hatena-modulebody">
<div class="module-txtspace">
[<a href="ブログのURL/searchdiary?word=%2a%5b%c6%fc%b5%ad%5d">日記</a>]
[<a href="ブログのURL/searchdiary?word=%2a%5bTV%5d">TV</a>]
</div>
</div>
</div>
<hatena name="calendar2" moduletitle="CALENDAR" template="hatena-module">
<div class="module-txtspace2">
<hatena name="section" listlimit="7" moduletitle="HEADLINE" template="hatena-module">
</div>
<hatena name="antenna" listlimit="200" dateformat="%y-%m%d %H:%i:%S" 
moduletitle="ANTENNA" template="hatena-module">
<div class="hatena-module">
<div class="hatena-moduletitle">OLD DAYS</div>
<div class="hatena-modulebody">
<hatena name="calendar">
</div>
</div>
<div class="hatena-module">
<div class="hatena-moduletitle">SCOUTER</div>
<div class="hatena-modulebody">
<div class="module-txtspace">
Today:/ Total:
<p>
書いてゐる人:土地神 [<A HREF="http://www014.upp.so-net.ne.jp/lazy-archives/">HP</A>]
</div>
</div>
</div>
</div>