HDRiな生活

HDR(ハイダイナミックレンジ)写真の連載。ストックフォトでカメラ機材代の捻出を目論む。


写真ブログに最適なのはtumblrかもしれない(ついでにソース公開)

写真ブログに最適なのはtumblrかもしれない(ついでにソース公開)

普段から色々ブログを見てまわるのですが、写真に特化したブロガー、結構多いですよね(exciteに多い)。

で、実験的にexite、はてな、tumblrでしばらく実験してたのですが、アップの手間加減、使い勝手、カスタマイズしやすさ、見易さ、を考えると一番しっくり落ち着いたのはtumblrでした。とりあえずご覧あれ50mm.cc

極力シンプルに、余計な要素は入れずに、写真のみを、と念頭においてます。エンドレスにスクロールできる機能が楽に実装でき、見る側としては快適このうえない機能。今のところ広告も出ないし、無料で作れる(独自ドメインの場合はドメイン購入費が必要)。

もちろん、より多くの人に見てもらいたい場合は、Flickrやzorgなどを利用したほうがいいかもしれませんが、アフィリエイトができませんし、愛着度合いが段違いに違ってきます。以下ソースです(コメントパーツは別途DISQUSに登録必要アリ。Autopagerizeはproto.jpさん参照)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <!-- DEFAULT COLORS --> <meta name="color:Background" content="#000202"/> <meta name="color:Title" content="#fbffff"/> <meta name="color:Description" content="#777"/> <meta name="color:Post Title" content="#6498cc"/> <meta name="color:Text" content="#dddddd"/> <meta name="color:Inline Link" content="#6498cc"/> <meta name="color:Quote" content="#888"/> <meta name="color:Quote Border" content="#6498cc"/> <meta name="color:Quote Source" content="#555"/> <meta name="color:Link Post" content="#c00"/> <meta name="color:Date" content="#ccc"/> <meta name="color:Date Block" content="#6498cc"/> <meta name="color:Date Block Text" content="#bbd5f1"/> <!-- END DEFAULT COLORS --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>{block:PostSummary}{PostSummary} - {/block:PostSummary}{block:TagPage}{Tag}タグの写真一覧 - {/block:TagPage}{Title}</title> <link rel="icon" href="{Favicon}"/> <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/> <meta name="viewport" content="width=800"/> <!-- iPhone --> <style type="text/css"> body { margin: 0px; background-color: {color:Background}; font-family: 'Lucida Grande', Helvetica, sans-serif; } #wrapper{ width:1000px; } p.shuffle { position: fixed; top: 3px; left: 3px; _position: static; _margin: 3px; _text-align: right; z-index: 1; margin:0; } p.shuffle a img{ color:000303; border:none; } #principle{ float:left; width: 390px; position:fixed; } a { color: {color:Inline Link}; } #principle h1 { margin:100px 0 20px; text-align: right; font: Bold 88px 'Trebuchet MS', Helvetica, sans-serif; line-height:1em; } #principle h1 a { color: {color:Title}; text-decoration: none; } #principle h3{ color: #dddddd; text-align:right; line-height:1em; margin:15px 0 0 0; } #principle p{ text-align:right; color:#dddddd; letter-spacing:2px; font-size:12px; line-height:1.6em; font-weight:bold; } #principle ul#tag_list{ padding:0; margin:5px 0 0 0; text-align:right; } div#content { width: 500px; background-color:#feffff; padding:40px; margin:0; float:right; } div#searchresultcount { margin: 15px 0 30px; text-align: center; } div.post { position: relative; margin-bottom: 40px; border-bottom:1px solid #cccccc; } div.post div.date { position: absolute; left: 550px; text-align: right; width: 50px; white-space: nowrap; font: normal 34px Helvetica, sans-serif; color: {color:Date}; text-transform: uppercase; line-height: 35px; } div.post div.date div.date_brick { float: right; height: 30px; width: 50px; background-color: {color:Date Block}; color: {color:Date Block Text}; font: Bold 12px Verdana, Sans-Serif; text-align: center; line-height: 12px; margin-left: 10px; letter-spacing: 0px; overflow: hidden; } div.post img.permalink { width: 28px; height: 26px; border-width: 0px; background-color: #000; display: none; position: absolute; right: 0px; top: 0px; z-index: 10; } div.post:hover img.permalink { display: inline; } div.post h2 { font-size: 18px; font-weight: bold; color: {color:Post Title}; letter-spacing: -1px; margin: 0px 0px 5px 0px; } div.post h2 a { color: {color:Post Title}; text-decoration: none; } div.post div.caption { font-size: 14px; color: {color:Text}; margin: 10px 0 30px; padding: 0px; line-height:1.6em; } div.post div.caption a { color: {color:Text}; } div.post .photo a{ border:none; color:#ffffff; } ul.tags{ /*background-color:#f1f9ff;*/ border:1px dotted #dddddd; list-style-type:none; padding:5px; } ul.tags li{ display:inline; font-size:12px; } ul.tags li a{ text-decoration:none; } /* Footer */ div#footer { margin: 40px 0px 30px 0px; text-align: center; font-size: 15px; font-weight: bold; color: {color:Text}; } div#footer a { text-decoration: none; color: {color:Text}; } div#footer a:hover { text-decoration: underline; } div#footer div#credit { font: normal 13px Georgia, serif; font-size: 13px; margin-top: 15px; } .query { font-weight: bold; } {CustomCSS} </style> </head> <body> <div id="wrapper"> <div id="principle"> <h1> <a href="/">{Title}</a> </h1> <p>{Description}<br /><a href="/archive">Archive</a> | <a href="/rss">RSS</a> | <a href="メルアド記載したエントリーへ">E-MAIL</a></p> {block:TagPage} <h3>タグクラウド</h3> <!-- Start Tumblr Tag Cloud --> <script type="text/javascript" src="http://code.hr1v.com/jquery.1.2.6.min.js"></script><script type="text/javascript" src="http://tumblrtags.hr1v.com/widget.js?css=default&minsize=120&maxsize=280"></script> <!-- End Tumblr Tag Cloud --> {/block:TagPage} </div> <div id="content"> {block:TagPage} <h3>「{Tag}」タグの写真一覧</h3> {/block:TagPage} {block:Posts} <div class="post"> {block:NewDayDate} <div class="date"> <div class="date_brick"> {ShortMonth}<br/> {DayOfMonth}{DayOfMonthSuffix} </div> </div> {/block:NewDayDate} <a href="{Permalink}"><img src="/themes/5/permalink.gif" class="permalink" alt="permalink"/></a> {block:Photo} <div class="photo"> {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag} {block:Caption} <div class="caption">{Caption}</div> {/block:Caption} </div> {block:HasTags} <ul class="tags"> {block:Tags} <li> <a href="{TagURL}">{Tag}</a> </li> {/block:Tags} </ul> {/block:HasTags} <div style="font-size: 10px; text-align: right; margin-bottom:5px;"><a href="{Permalink}#disqus_thread">Comments (View)</a></div> {/block:Photo} </div> {/block:Posts} {block:Permalink} <div id="footer"> {block:PreviousPage} <a href="{PreviousPage}">&#171; Previous</a> &nbsp;&nbsp; {/block:PreviousPage} {block:NextPage} <a href="{NextPage}">Next &#187;</a> {/block:NextPage} <div id="credit"> Powered by <a href="http://www.tumblr.com/" target="_blank">Tumblr</a> </div> </div> </div> </div> </body> </html>

写真投稿しか出来ない鬼仕様になってます。ソースが汚いとかはあーあーあー。tumblrアカウント作る→Customize→Themeにて上記コピペすればハイ出来上がり。慣れれば10秒くらいでポストできます。

コメント: 28

ペンキペンキペンキ@葛飾

ペンキペンキペンキ@葛飾

しかしねぇ。何億円規模の被害を招いた原因である「酒」は「酔っ払っていた」で済まされて、逮捕者が唯一の被害者である大麻は「ドラッグだ!人間やめますか!」と叫ぶ民衆がわからんですよ。毎日40人が急アルで病院送りになってる事実は無視するんだよねぇ。。。

ま、曲解です。公認されたらされたで問題起こるだろうし。ただ、ガリレオを糾弾したような民衆には属したくないなぁ、というのがライフワークの根幹なのです。

コメント: 10

話題の大橋ジャンクション@池尻大橋

話題の大橋ジャンクション@池尻大橋

以前撮ったこともあったんですけど、昨今ちらほらと話題になっている場所ぽく、あの重機の美しさは一目見ただけで圧巻。まだ見たことない方は是非現場へ。広角で望むことをおすすめします。

下記リンク先のデイリーポータルライター、大山顕さんは、ヘンテコな写真集をいっぱいだしつつ、大橋ジャンクションの内部見学を行った方でもあり。参加したかったなぁ。むしろ個人で行ってみたいよ。端から端までHDR化したい。宣伝写真なんかも撮れますので、近しい方がいらっしゃったら、是非ご連絡ください。よろしくお願いします(どんな宣伝だ。

コメント: 8

« 前の3件  1   2   3   4   5   6   7   8   9   10   11   12   13   14   15   16   17   18   19   20   21   22   23   24   25   26   27   28   29   30   31   32   33   34   35   36   37   38   39   40   41   42   43   44   45   46   47   48   49   50   51   52   53   54   55   56   57   58   59   60   61   62   63   64   65   66   67   68   69   70   71   72   73   74   75   76   77   78   79   80   81   82   83   84   85   86   87   88   89   90   91   92   93   94   95   96   97   98   99   100   101   102   103   104   105   106   107   108   109   110   111   112   113   114   115   116   117   118   119   120   121   122   123   124   125   126   127   128   129   130   131   132   133   134   135   136   137   138   139   140   141   142   143   144   145   146   147   148   149   150   151   152   153   154   155   156   157   158   159   160   161   162   163   164   165   166   167   168   169   170   171   172   173   174   175   176   177   178   179   180   181   182   183   184   185   186   187   188   189   190   191   192   193   194   195   196   197   198   199   200   201   202   203   204   205   206   207   208   209   210   211   212   213   214   215   216   217   218   219   220   221   222   223   224   225   226   227   228   229   230   231   232   233   234   235   236   237   238   239   240   241   242   243   244   245   246   247   248  249  250   251   252   253   254   255   256   257   258   259   260   261   262   263   264   265   266   267   268   269   270   271   272   273   274   275   276   277   278   279   280   281   282   283   284   285   286   287   288   289   290   291   292   293   294   295   296   297   298   299   300   301   302   303   304   305   306   307   308   309   310   311   312   313   314   315   316   317   318   319   320   321   322   323   324   325   326   327   328   329   330   331   332   333   334