2012-01-14

明けましておめでとうございます

久しぶりの更新且つ、ご挨拶遅くなりましたが、新年明けましておめでとうございます。元気でやっています。2012年もよろしくお願いします！
最近ははてなブログの方もやっていますが、どういう棲み分けにして使っていけばいいか悩んでいて、ちょっと考え中です。
http://tikeda.hatenablog.com/

2011-12-22

僕とはてなとオマケ

こんばんわ、tikedaです。Hatena::Staff Advent Calendarもいよいよ終盤ですね。何を書こうかずっと決めていなくて、今やっている仕事についてや、スマフォビュー系の話を書こうかとか思いましたが、気乗りしなかったので、自分とはてなの出会いを書こうと思います。

僕がはてなと出会ったのは2004年位で、その頃自分はポータルサイトの運営に関わっていました。そのポータルには更新を外部委託している複数のサービスを統合するような役割を担っており、一緒に働いてたスタッフが「はてなアンテナ」を使っていて、それを見てなんて便利なサービスがあるもんだと思って、こっそり使い始めたのがきっかけでした。その後、使っていくうちに、あの文中にリンクだらけのページは、はてなダイアリーだったんだというのを知りました。そんな感じで自分は身近な人がきっかけに、はてなのサービスに辿り着いたのを覚えています。

だから、いつもサービス開発をしている時は、「気がつけば友人が自分の作ったサービスを使っている」「気がつけば家族の携帯にアプリが入ってる」みたいにい自分がはてなを知ったきっかけのような体験を逆の立場で未来に経験することを想像しながら、やっていることが多いので、サンプルコンテンツは自分の身の回りの事をよくネタにする事が多いです。
最近だと、はてなブックマークやtwitter、facebookなど当時では考えられないようにネットコミュニケーションも発達し、サービスの感触などをそういうサービスを通してで知るという機会が圧倒的に多いですが、最近、身近な人の感触を忘れがちになりかけていたので、こういう話をあわせて書いてみました。

特に落ちがなくて困ったので、最後は自分らしいネタでと思い直しCSSを使って即席で作ってみました。下の1から6のステップを順に踏んでいってお楽しみください（モダンブラウザにて）。

Xmas is just around the corner !

さて、明日はid:secondlifeですが、大丈夫ですかね。よろしくお願いします。

2011-11-16

扇形のグラデーション

長年扇型のグラデーションの作り方に苦労してきたけど、Photoshopでは、レイヤースタイルで以下のように普通にできる事を恥ずかしながら、つい最近知った。スタイルの「角度」ってのがポイント。iOS系のGUIでつまみの質感やiCloud的なアイコンの描画をみんなどうやって実現しているんだろうかと不思議に思っていたけど、この手段を使えばできる。

それにしても何故このグラデーションタイプがIllustratorにないのだろうか。ひょっとしたら自分が気がついてないだけなのか。これまで必要な場合は円を作ってグラデーションメッシュをかけて何か面倒くさいことをしていたが、今後画面のデザインで必要な場合はPhotoshopで描画すればいいのだが、Illustratorにないのは個人的には不便なのでどうにかしてほしい。

2011-11-08

外部ドメインにあるwebfontを使う

個人でライセンスを取得しているwebfontをレンタルサーバーに置いて、hatenablog.comとか別のドメインから利用する場合、フォントの置いてあるサーバーに以下の指定をしないと、一部ブラウザでフォントが表示されない。最初結構ハマッタ。

header add Access-Control-Allow-Origin *

2011-11-08

コメントをTooltipのように表示するCSS

右図のように、コメントがつくとユーザーアイコンだけが一覧表示され、アイコンにマウスをかざすとコメント内容を表示するようにするCSS。初期テーマ4つのデザインのスタイルと組み合わせて使う場合は、以下のスタールシート下部で、ご利用中のテーマ名の部分のコメントアウトをはずすと綺麗に表示されるようになるはず。
例えば、パーマリンクはこれまで通りで、一覧の時だけコンパクトにしたいのでこれを適応したいという場合は、全てのセレクタの頭に「.page-index 」を入れる事でパーマリンクは通常通りに表示できる。
ちなみに、結構激しいCSSになったので、各種ブラウザでの細かい表示確認は行っていない。

.comment-box {
  font-size: 12px;
  position: relative;
  height: 24px;
}

.comment {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comment li {
  position: absolute;
  height: 20px;
  width: 18px;
  top: 3px;
  left: 0;
  overflow: hidden;
  z-index: 8888;
  font-size: 10pt;
}

.comment li p {
  margin: 0;
  padding: 0;
}

.comment li:hover {
  overflow: visible;
  width: auto;
}

.comment li:nth-child(1)  { left: 150px;}
.comment li:nth-child(2)  { left: 180px;}
.comment li:nth-child(3)  { left: 210px;}
.comment li:nth-child(4)  { left: 240px;}
.comment li:nth-child(5)  { left: 270px;}
.comment li:nth-child(6)  { left: 300px;}
.comment li:nth-child(7)  { left: 330px;}
.comment li:nth-child(8)  { left: 360px;}
.comment li:nth-child(9)  { left: 390px;}
.comment li:nth-child(10) { left: 420px;}
.comment li:nth-child(11) { left: 450px;}
.comment li:nth-child(12) { left: 480px;}
.comment li:nth-child(13) { left: 510px;}
.comment li:nth-child(14) { left: 540px;}
.comment li:nth-child(15) { left: 570px;}
.comment li:nth-child(16) { left: 600px;}
.comment li:nth-child(17) { left: 630px;}
.comment li:nth-child(18) { left: 660px;}
.comment li:nth-child(19) { left: 690px;}
.comment li:nth-child(20) { left: 720px;}

.comment li .comment-user-name{
  width: 20px;
  height: 18px;
  margin-bottom: -26px;
  color: #eee;
  font-weight: bold;
  overflow: hidden;
  font-size: 90%;
  font-family: "helvetica","arial",sans-serif;
}

.comment li .comment-user-name img{
  margin-bottom: 20px;
  border: 1px solid #ddd;
  background: #fff;
  vertical-align: top;
}

.comment li .comment-content{
  background: rgba(0,0,0,0.8);
  padding: 30px 10px 30px 10px ;
  margin-left: -10px;
  color: #ddd;
 -moz-box-shadow: 0 0 6px #bbb;
 -webkit-box-shadow: 0 0 6px #bbb;
  box-shadow: 0 0 6px #bbb;
 -webkit-background-clip:  padding-box;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
  border-radius: 4px;
  opacity: 0;
  min-width: 200px;
}

.comment li .comment-metadata{
  color: #eee;
  opacity: 0.5;
  margin-top: -26px;
}

.comment li .comment-metadata a{
  color: #fff;
  text-decoration: none;
}

.leave-comment-title {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  width: 120px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-family: "helvetica","arial",sans-serif;
  cursor: pointer;
  opacity: 0.7;
  font-size: 14px;
  margin: 0;
 -moz-transition: opacity 0.5s ease;
 -webkit-transition: opacity 0.5s ease;
}

.leave-comment-title: hover {
  opacity: 1;
}

.comment li:hover .comment-user-name{
  height: auto;
  overflow: visible;
}

.comment li:hover .comment-content{
  opacity: 1;
}

/* aero ====================

.comment-box {
  margin-top: 15px;
}

.comment li {
  top: 5px;
}

.leave-comment-title {
  padding: 0 5px;
  width: 120px;
  opacity:1;
}

.comment li .comment-user-name {
  overflow: visible;
  line-height: 24px;
}

.comment li .comment-user-name img.hatena-id-icon{
  padding: 0;
  border: 0;
  margin: 0;
  position: static;
}

.comment li .comment-content{
  margin-bottom: 0;
  margin-top: -28px
}

 ==================== */

/* natural ====================

.leave-comment-title {
  font-size: 12px;
  font-family: 'Josefin Sans','Gill Sans','Hiragino Kaku Gothic Pro',Meiryo,'MS PGothic',sans-serif;
}

.comment li {
  top: 0px;
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.comment li .comment-metadata {
  display: block;
  margin-top: -30px;
}
 ==================== */

/* bordeaux ==================== 

.comment-box {
  margin-top: 10px;
}

.comment li {
  border-left: 0;
  top: 9px;
  margin: 0;
  padding: 0;
}

.comment-user-name {
  display: block;
}

.comment-content, .comment-content p {
  display: block;
  margin: 0;
  padding: 0;
}

.leave-comment-title {
  padding-left: 5px;
  padding-right: 5px;
}

 ==================== */

/* epic ==================== 
.comment-box {
  margin-top: 10px;
}

.comment li {
  border-bottom: 0;
  margin: 0;
  padding: 0;
}

.comment li:nth-child(1) {
  border-top: 0;
}

.leave-comment-title {
  padding: 0;
  width: 130px;
}

.comment-metadata {
  display:block
}

 ==================== */

2011-11-07

HTML構造

※このHTML構造は結構古いので、私のエントリーではなくてスタッフであるid:kyabanaさんのエントリーの方を見てください！

現時点でのHTML構造の概要メモ。CSSいじる用にどうぞ。

<body class="">
  <div id="globalheader-container"></div>
  <div id="container">
    <div id="container-inner">
      <header id="blog-title">
        <div id="blog-title-inner">
          <h1 id="title">ブログタイトル</h1>
          <h2 id="blog-description">ブログ説明</h2>
        </div>
      </header>
    </div>
    <div id="content">
      <div id="wrapper">
        <div id="main">
          <div id="main-inner">
            <!-- loop start-->
            <article class="entry">
              <div class="entry-inner">
                <header class="entry-header">
                  <div class="date">
                    <span>YYYY</span><span>-</span><span>MM</span><span>-</span><span>DD</span>
                  </div>
                  <h1 class="entry-title"><a href="">エントリータイトル</a></h1>
                </header>
                <div class="entry-content">
                  エントリー本文
                  <div id="google_afc_user">
                    Adsense
                  </div>
                </div>
                <footer class="entry-footer">
                  <p class="entry-footer-section">
                    <span class="author">エントリー作者id</span>
                    <span class="entry-footer-time"><a><time>投稿時間</time></a></span>
                    <span class="hatena-star-comment-container">スタコメ</span>
                    <span class="hatena-star-star-container">スター</span>
                  </p>
                  <div class="commnet-box">
                    <ul class="comment">
                      <!-- loop start-->
                        <li class="entry-comment">
                          <p class="comment-user-name">コメント作者id</p>
                          <div class="comment-content">コメント本文</div>
                          <p class="comment-metadata">投稿時間</p>
                        </li>
                      <!-- loop end-->
                    </ul>
                    <p class="leave-comment-title">コメントを書く</p>
                  </div>
                </footer>
              </div>
            </article>
            <!-- loop end -->
          </div><!-- #main-inner -->
        </div><!-- #main -->
        <aside id="box2">
          <div id="box2-inner">
            <div class="hatena-module hatena-module-profile">
              <div class="hatena-moduletitle">Profile</div>
              <div class="hatena-modulebody">
                <img src="" alt="hatenaid" class="profile-icon">
                <span class="id"><a>id:hatenaid</a></span>
                <p class="profile-description">
                  ブログ説明
                </p>
              </div>
            </div>
            <div class="hatena-module  hatena-module-search-box">
              <div class="hatena-moduletitle">Search</div>
              <div class="hatena-modulebody">
                <form class="search-form" role="search">
                  <input type="text"class="search-module-input" value="" placeholder="Search">
                  <input type="submit" alt="Search" class="search-module-button" />
                </form>
              </div>
            </div>
            <div class="hatena-module hatena-module-links">
              <div class="hatena-module-title">Links</div>
              <div class="hatena-module-body">
                <ul class="hatena-urllist">
                  <li><a href="http://hatenablog.com/">トップページ</a></li>
                  <li><a href="http://blog.hatena.ne.jp/help">ヘルプ</a></li>
                  <li><a href="http://staff.hatenablog.com/">お知らせ</a></li>
                </ul>
              </div>
            </div>
          </div>
        </aside>
      </div><!-- #wrapper -->
    </div><!-- #content -->
  </div><!-- #container -->
  <footer id="footer">
    <address>
      <a href=""><img src="" />hatenaid</a>
    </address>
  </footer>
</body>

2011-11-07

はてなブログ

はてなブログはじめました。よろしくお願いします。

2011-07-16

10年

今年の7/15は、はてな10周年という事で、記念ロゴを作ったり色々制作させて頂きました。10年の記念とこれからの思いも込め、はてなロゴの菱形の塊をサークル状に1つに繋ぎ直して再構成し10年を祝うエンブレムっぽく仕立て直してみました。
ノベルティ用には、エンブレムの周りを、はてなでよく使われる四角形だけで花火を打ち上げ彩ってみています。Tシャツは今ならプレゼントもやってますので、よかったらご覧ください。

はてな10周年! #hatena10th - はてな

10年と言えば、7/30（土）に開催される新宿エイサー祭りも今年で10周年。僕も今年も声をかけて頂いたので、撮影スタッフとしてその日は一日カメラぶら下げ走り回る予定です。真夏日が続いていますが、当日は少し日が和らいでくれる事を祈っています！
興味のある方は当日、是非新宿に遊びにきてください。

琉球舞団昇龍祭太鼓

そしてまた、今年は友人の10回忌。今年の秋に久しぶりに彼の故郷の北海道へ行こうかと思っています。

どれも10年前から始まった事だと思うと、感慨深いです。10年前に始まってなければ、10年目の今日を思う事はなかったわけで、新しいスタートの一歩を踏み出せる事はとても素晴らしい事なーと思った、「10年」の話でした。

2011-05-27

はてなダイアリーでGoogle Web Fontsを試す

Google Web Fonts!!

はてなダイアリーは、今のところ多くのWeb Fontサービスが使えないのですが、Google Web Fontsは、無理やり使う事ができました。このブログでも一部使ってみています。

使い方

Google Web Fontsから使いたいフォントを選択
ページ中の「Use this font」を選択
ページ内のCSSファイルのパスをコピー
はてなダイアリーの管理ページ→「デザイン」→「詳細デザイン」→「スタイルシート」欄で以下のようにCSSを@importで指定

@import "http://fonts.googleapis.com/css?family=Lobster";

上の@import指定をした、下の行あたりに、フォントを変えたい部分にfont-familyを指定

@import "http://fonts.googleapis.com/css?family=Lobster";

h1 {
  font-family: "Lobster",serif;
}

以上です。
SVG非対応など、ブラウザによっては表示されませんが、ブログタイトル（h1）、日付（h2.date）、モジュールタイトル(.hatena-moduletitle)なんかに、ちょっとしたアクセント程度で使えそうです。ただし、Web Fontに限ったことじゃありませんが、欧文指定していて、利用者が和文に変えた場合、文字サイズが随分大きくなり不恰好になるなどが予想されるので、公開デザインにする時など、配布の際は、その辺も認識した上行った方がよさそうです。

※ちなみにはてなグループでは、@importが使えず、無理っぽかったです。

2011-03-04

写真で読み解くことわざ大辞典

作者: 倉島節尚
出版社/メーカー: あかね書房
発売日: 2011/02
メディア: 大型本
この商品を含むブログ (1件) を見る

先月発売された、「写真で読み解くことわざ大辞典」のほんの一部ですが、写真提供しています。主に図書館など公共の場所においてある子供向けの本ですが、内容、構成ともに面白そうな仕上がりになってる本なので、適齢なお子さんがいる方などおすすめです。巻末にも名前がのっているので、写真もみてみてください。

tikeda's blog

Flower, Plant, Travel, Design, My life stories