Trans

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

tumblr.、はじめました。

もっと前にアカウント自体は持っていたみたいなんですが(本人も忘れてた)、今週あたりからちゃんと動かすようにしました。


http://aratakojima.tumblr.com/


何に使えそうなのか四苦八苦しましたが、結局今自分が勉強中のユーザビリティやアクセシビリティ、HCDなどのUI関連の記事を読んでいて、「お、この言葉、待ってました!」とか、「こういうことなんだなー」と感銘した言葉などのスクラップブック的に使おうかと目論んでいます。(すぐに変わるかもしれませんが)


お気軽にaddお願いします。


ちなみに、twitterで、

@hkn tumblr なら、 XHTML はほぼ全部カスタマイズできますよ。 CSS が外部ファイル化されていないですけど。 *Tw*

とかって言っちゃったので、CSSをいじってみました。font-sizeがほとんどpx指定でかなりイライラし、動画とかはまだ貼ったことなくてちゃん書いていないし、クロスブラウザのテストもやっていないので、非常に中途半端な出来ですが、ここに貼っておきます。


実際はXHTMLの中にそのままCSSが書き込まれていますが、XHTMLはほとんど書き換えていません。また、中途半端なエラスティックレイアウトになっています。


また気が向いたら、修正します。

<style type="text/css">
body {
  margin: 2em;
  color: #444444;	
  background-color: #F9F9F9;
}
            
#content {
  width: 40em;
  margin: auto;
  border: 1px solid #DDDDDD;
  background-color: #FFFFFF;
}

a {
  color: #999999;
}

div#header {
  margin: 2em;
  border: 1px solid #CCCCCC;
  background-color: #FCFCFC;
}

h1 {
  padding: 0.5em 0 0 0.9em;
  letter-spacing: 0.4em;
}
            
h1 a {
  text-decoration: none;
}

div#description {
  font-size: 90%;
  padding: 0 0 0 2.2em;
  color: #999999;
}
            
div.date {
  color: #777777;
  padding: 0.5em;
  background: #BBBBBB;
  border: 1px solid #AAAAAA;
  margin-bottom: 1em;
  text-transform: uppercase;
}
            
div.post {
  padding: 2em;
  position: relative;
}

div.post div.permalink {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
  font-weight: bold;
}

div.post:hover div.permalink {
  display: block;
}

div.post div.permalink a {
  text-decoration: none;
  font-size: 2em;
  color: #000000;
}

div.post h2 {
  font-weight: normal;
  font-size: 1em;
  margin: 0 0 0.5em 0;
}

div.post h2 a {
  text-decoration: none;
}
            
/* Regular Post */
div.post div.regular {
  font-size: 0.9em;
  line-height: 1.5;
}

div.post div.regular blockquote {
  font-style: italic;
}
            
/* Photo Post */
div.post div.photo {
  padding: 1em;
  background-color: #F3F3F3;
}
            
div.post div.photo img {
  border: 3px solid #CCCCCC;
}

div.post div.photo div.caption {
  font-size: 0.9em;
  margin-top: 1em;
}

/* Quote Post */
div.post div.quote {
  padding: 0;
}
            
div.post div.quote span.quote {
  font-size: 0.9em;
  line-height: 1.5;
}

div.post div.quote span.quote big.quote {
  opacity: 0.5;
  -moz-opacity: 0.5;
  filter: alpha(opacity=50);
}
            
div.post div.quote div.source {
  margin-top: 0.5em;
  padding: 0.5em;
  font-size: 0.9em;
  line-height: 1.5;
  background-color: #FCFCFC;
}
            
/* Link Post */
div.post div.link a.link {
  font-size: 0.9em;
  line-height: 1.5;
}

div.post div.link div.description {
  font-size: 0.9em;
  margin-top: 0.5em;
}
            
/* Conversation Post */
div.post div.conversation ul {
  list-style-type: none;
  margin: 0;
  padding: 0.1em;
  border: 3px solid #CCCCCC;
}
    
div.post div.conversation ul li {
  font-size: 0.8em;
  padding: 0.2em 0 0.2em 0.5em;
}
            
div.post div.conversation ul li span.label {
  font-weight: bold;
}
            
div.post div.conversation ul li.odd {
  background-color: #CCCCCC;
}
            
div.post div.conversation ul li.even {
  background-color: #F3F3F3;
}
            
/* Video Post */
div.post div.video {
  width: 90%;
  margin: auto;
  padding: 35px;
  background-color: #F3F3F3;
}

div.post div.video div.caption {
  margin-bottom:    15px;
  font-size:        13px;
  color:            #222;
}
            
div.post div.video div.caption a {
  color:            #222;
}

/* Footer */
#footer {
  margin: 2em 0 2em 0;
  text-align: center;
  font-size: 0.8em;
}
            
#footer a {
  color: #000000;
  text-decoration: none;
}
            
#footer a:hover {
  text-decoration: underline;
}

#footer p.tiny {
  margin: 1em 0 0 0;
}
            
#footer p.tiny a {
  color: #000000;
}
</style>