Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

画像を使わないはてなダイアリーテーマを作りました。

お知らせ

「画像を使っていなくて、シンプルで、それなりに文章が引き立つテーマはあるだろうか」と思いつつも、結局発見に至らなかったので、自分で作ることにしました。

画像よりも文字が映えるデザイン

文字やタイポグラフィっていうのは中途半端な写真より何よりもキレイなものだと思うんです。特に、僕のブログなんかは写真や画像をほとんど使うことはなくて、もっぱら文字中心。それなら、それに適応したデザインというのがあってもいいのではないかと思い、サイトのリニューアルついでに作ってみました。

はじめは公開しようと思っていたのですが、どうやらはてなのヘッダーを消さないと具合が悪いので（消せるのは有料ユーザのみ）、とりあえずコードだけを掲載しておきますので、必要な方はコピペするなり何なりで持っていってください。要するに好きに使ってやってください、ってことで。
このテーマを作るに当たって、Twitterでアドバイスをいただいた方々、ありがとうございます。

このデザインについてのメモ

  • 当ブログは文字が中心であり、余計な画像は一切使っていません。というより、はてブカウンターだけが画像です。
  • IE系では上部ヘッダーが崩れます。ナビゲーションが表示されませんが、本文を読むには問題ないので、そのままで。
  • CSSを導入するだけではなく、HTMLも入れないとダメです。（少しdiv厨になっていますが）
  • Information Architects Japanのデザインに似ていますが、思い切り影響されています。
  • ある程度のHTMLタグには何らかのCSSを適応させていますが、させていないものもあります。
  • Yahoo UIのCSSライブラリをいくつか入れています。ただし、部分的に手を加えています。
  • サイドバーは必要ないんじゃないかという意見もあり、僕もそれに共感する一人なので、全部フッターに入れています。
  • font-sizeはほとんどデフォルトに近いものを使っています。読みやすさを重視したいので。
  • またもや、無駄にエラスティック仕様になっています。

コードの一覧

ページのヘッダ

<div class="searchForm">
<hatena name="searchform" type="simple">
</div>
<div class="main">

ページのフッタ

</div>
<div class="menu">
<div class="container">
<div class="menuEntry">
<hatena name="rss" url="http://b.hatena.ne.jp/entrylist?mode=rss&url=http%3A%2F%2Fd.hatena.ne.jp%2Faratako0%2F&sort=count&threshold=3"  template="hatena-module" listlimit="10" moduletitle="人気エントリー">
<hatena name="section" template="hatena-module" moduletitle="最新タイトル" showcategory="false" listlimit="10">
</div>
<div class="menuResponse">
<hatena name="comment" template="hatena-module" listlimit="10">
<hatena name="trackback" template="hatena-module" listlimit="10">
<hatena name="pv" template="hatena-module">
<hatena name="bcounter" template="hatena-module" color="bl">
</div>
</div>
</div>
<div class="footer">
<address>Copyright &#169; 2006-2007 <a href="http://d.hatena.ne.jp/aratako0/about">arata kojima</a></address>
</div>

スタイルシート

/* -----------------------------------------------

	===== TOC =====
	
	* Yahoo UI
	* Header
	* Contents
	* Form
	* Menu
	* Footer

	Author: Arata Kojima
	Author URI: http://d.hatena.ne.jp/aratako0/
	Author Email: aratakojima@gmail.com
	
	Last Up Date
	2007-08-25

----------------------------------------------- */


/* Yahoo UI
----------------------------------------------- */

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.0
*/                                  
body{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup,sub{line-height:-1px;vertical-align:text-top;}sub{vertical-align:text-bottom;}input, textarea, select{font-family:inherit;font-size:inherit;font-weight:inherit;}

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.0
*/                                  
h1{font-size:197%;}h2{font-size:108%;}h3{font-size:123.1%;}h1,h2,h3{margin:1em 0;}h1,h2,h3,h4,h5,h6,strong{font-weight:bold;}abbr,acronym{border-bottom:1px dotted #000;cursor:help;}em{font-style:italic;}blockquote,ul,ol,dl{margin:1em;}ol,ul,dl{margin-left:2em;}ol li{list-style: decimal outside;}ul li{list-style: disc outside;}dl dd{margin-left:1em;}th,td {border:1px solid #000;padding:.5em;}th {font-weight:bold;text-align:center;}caption {margin-bottom:.5em;text-align:center;}p,fieldset,table {margin-bottom:1em;}


/* Header
----------------------------------------------- */

body {
  text-align: center;
  border-top: 1.5em solid #505050;
  color: #333333;
  background-color: #FCFCFC;
}
h1 {
  margin: 3em 0 1em 2em;
  letter-spacing: 1px;
  text-align: left;
  font-family: Georgia, "Times New Roman", serif;
}
h1 a {
  color: #000000;
}
div.main,
div#hatena-about,
div#hatena-archive {
  width: 45em;
  min-width: 400px;
  max-width: 60em;
  margin: 0 auto;
  text-align: left;
}
div.adminmenu {
  position: absolute;
  top: 0.1em;
  right: 4.5em;
  line-height: 1.5;
  font-size: 90%;
  color: #FFFFFF;
}
div.adminmenu a {
  text-decoration: none;
  color: #FFFFFF;
}
div.searchform {
  position: absolute;
  top: 2em;
  right: 4.5em;
  font-size: 90%;
}
div.calendar {
  position: absolute;
  top: 0.1em;
  left: 4.5em;
  line-height: 1.5;
  font-size: 90%;
  color: #FFFFFF;
}
div.calendar a {
  text-decoration: none;
  color: #FFFFFF;
}
div#hatena-archive div.calendar {
  position: static;
  line-height: 1.5;
  font-size: 100%;
  color: #333333;
}
div#hatena-archive div.calendar a {
  text-decoration: underline;
  color: #0000EE;
}


/* Contents
----------------------------------------------- */

div.body {
  margin-bottom: 2em;
}
div.day h2 {
  text-align: right;
}
div.day h2 a {
  text-decoration: none;
  color: #666666;
}
div.day div.body div.section p.summary {
  padding: 0.2em;
  color: #000000;
  background-color: #EEEEEE;
}
div.day div.body div.section h3 {
  margin-bottom: 2em;
  color: #000000;
}
div.day div.body div.section img.photo {
  float: right;
}
div.day div.body div.section h3.subtitle {
  margin-bottom: 1em;
  color: #000000;
}
div.day div.body div.section h3 a {
  text-decoration: none;
  color: #000000;
}
div.day div.body div.section h4 {
  margin: 2em 0 1em 0;
}
div.day div.body div.section p,
div.day div.body div.section ul li,
div.day div.body div.section ol li,
div.day div.body div.section dl dt,
div.day div.body div.section dl dd {
  line-height: 1.5;
}
div.day div.body div.section blockquote {
  padding: 0.2em;
  font-size: 90%;
  background-color: #EEEEEE;
}
div.day div.body div.section blockquote p {
  margin-bottom: 0;
}
div.day div.body div.section pre {
  overflow: scroll;
  width: 100%;
  margin-bottom: 1em;
  padding: 0.3em;
  border: 1px solid #EEEEEE;
  background-color: #FFFFFF;
}


/* Form
----------------------------------------------- */

div.day div.comment div.caption,
div.day div.refererlist div.caption {
  margin: 2em 0 1em 0;
  font-weight: bold;
}
div.day form input,
div.searchform form.hatena-searchform input.hatena-searchform,
div.day form#comment-form input#comment-username,
div.day form#comment-form input#comment-captcha,
div.day form#comment-form textarea {
  padding: 0.2em;
  border: 1px solid #000000;
}
div.day form input:hover,
div.searchform form.hatena-searchform input.hatena-searchform:hover,
div.day form#comment-form input#comment-username:hover,
div.day form#comment-form input#comment-captcha:hover,
div.day form#comment-form textarea:hover {
  border: 1px solid #666666;
  background-color: #EEEEEE;
}
div.day form input:focus,
div.searchform form.hatena-searchform input.hatena-searchform:focus,
div.day form#comment-form input#comment-username:focus,
div.day form#comment-form input#comment-captcha:focus,
div.day form#comment-form textarea:focus {
  border: 1px solid #505050;
  background-color: #FCFCFC;
}


/* Menu
----------------------------------------------- */

div.menu {
  overflow: hidden;
  text-align: center;
  background-color: #EEEEEE;
}
div.menu div.container {
  width: 45em;
  min-width: 400px;
  max-width: 60em;
  margin: 0 auto;
  text-align: left;
}
div.menu div.container div.menuEntry {
  width: 21em;
  float: left;
}
div.menu div.container div.menuResponse {
  width: 21em;
  float: right;
}
div.menu div.container div.hatena-moduletitle {
  margin: 2em 0 1em 0;
  font-weight: bold;
}
div.menu div.container ul li {
  line-height: 1.5;
}


/* Footer
----------------------------------------------- */

div.footer {
  clear: both;
}
address {
  height: 1.5em;
  padding: 0.1em;
  text-align: center;
  text-transform: capitalize;
  background-color: #505050;
  color: #FFFFFF;
}
address a {
  font-size: 90%;
  color: #FFFFFF;
}