写真ブログに最適なのはtumblrかもしれない（ついでにソース公開）
カメラ:D700、 レンズ:SIGMA 20mm F1.8 EX DG、ISO:200、絞り優先、ブラケット:-2〜+2、ホワイトバランス:オート
関連写真
普段から色々ブログを見てまわるのですが、写真に特化したブロガー、結構多いですよね（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}">« Previous</a> {/block:PreviousPage} {block:NextPage} <a href="{NextPage}">Next »</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秒くらいでポストできます。
撮影環境・雑多品
Nikon D40
言わずと知れたニコンの入門機D40。とはいえ映像素子と解像度のバランスはデジ一中トップクラス。オートブラケットがないのがタマに傷。弊サイト内の前半はほとんどこの機種で撮影したものです。
関連記事
- 紫式部公園@福井
- 福井駅西の建物名に物申す
- Internet Explorer ユーザーをバージョン毎に弾く JavaScript
- 夏も終わり2011年9月のストックフォト売り上げ報告
- ノーオピニオン・ノーフューチャー
- 重複しないm個のランダム数（下限nから上限o）を得る関数（php）
- LED in スゴモリ@国営昭和記念公園
コメント： 28
保坂
保坂です。
実はタンブラーやってます。
http://hosakanorihisa.tumblr.com/
＃ツィッターに流してます。
fujyn234
こんばんは。
シンプルかつ機能的でよさげですね。
自分は深い考えもなしにexciteを選択してしまい、なかなか気に入ったスキンがなくてゲンナリしてたので、余計に惹かれます。。
#モノクロスナップ、HDRとは違う趣で良いですねー。
Toshiro
>Guwashiさん
どうにも「スナップ」というものの撮り方がわからなくて、適当にシャッター切ってるだけですw
Toshiro
>保坂さん
私は逆にtwitter→tumblrです。しかしどうやって収益をあげるのか全く予想できませんが、webの可能性を広げてくれる2社ですね。ワクワクです☆
Toshiro
>fujyn234さん
いや、ブログは各社頑張っていて、お客さんが離れないように露出を高めて、身内の閲覧者が訪れるようにと工夫に余念がありません。その点tumblrはモノが良くなければ誰も来ませんので非常にシビアな点はあると思います。
いや、もう、モノクロ、ほんとなんでもないだだ撮りです。。。
司
いつも勉強させていただいています。
以前の記事へのコメントで失礼かと思いましたが、この記事を参考させていただき私もTumblrを始めてみました。
そこで１つ質問があるのですが、Toshiroさんの50mmのサイトと同じように写真背景の白地部分が横にスライドしないようにしたいのですが、テーマのソース上のどこを変更したらいいのでしょうか・・・
マネした上に質問までして大変申し訳ないのですが、教えていただけたら嬉しいです。
Toshiro
>司さん
状況がよく分からないのですが、差し支えなければURLを教えていただけますか？
司
>> Toshiroさん
ご返事ありがとうございます。
恥ずかしながら、URLはこちらになります。
http://rakshasas-eye.tumblr.com/
フォトの背景にある白地部分がブラウザの一番左にまでスライドしてしまうので、
表題には被らないように調節できればと思っています。
説明ベタでごめんなさい。
Toshiro
>司さん
私の環境では特に見られませんが、小さい解像度でブラウザを開くと、大きな画像表示に合わせて幅を設定するために、右方向にスクロールできてしまうのでしょう。
多分以下の画像が大きすぎるのではないかと思います。
http://rakshasas-eye.tumblr.com/post/3832366770/viasquaredd-1000-reblogs-10-10000-reblogs
司
>>Toshiroさん
ありがとうございました、ご指摘の通りその画像が大きすぎて
ブラウザの右側に大きくスクロールできてしまうのが原因でした。
つまらない質問にもご返事いただきありがとうございました。
Tailslider64
はじめまして。
キレの良い記事と、素晴らしい作品を見るのが楽しくて以前よりお邪魔させてもらってます＾＾
僕も写真に特化したブログはないものか探していたところ、Toshiroさんの記事を読んで、｢これだ！｣って思いました。
初めてのコメントであつかましいですが、ソースを頂いちゃってもよろしいでしょうか？
また、ソースの一部を弄ってしまっても良いでしょうか？
（さすがに、あれほどのソースを一から作る脳はありませんもので・・・）
最後に、僕のブログにこちらのサイトをリンクしてもよろしいでしょうか。
よろしくお願いします＾＾
Toshiro
>Tailslider64さん
遊びにきていただいて何よりです〜。
コピー・リンク、全然構いません。今後もよろしくどうぞ。
Tailslider64
おぉ！ありがとうございます！！
こちらこそ、よろしくお願いします＾＾
neko
写真をアップするのに最適なブログを探していてここに辿り着きました。
Toshiroのtumblrを見て、めっちゃかっこいい！と思いありがたくソースを頂いたのですが、大きいサイズの画像を投稿すると、他の公式のTheme等と違い自動で縮小されず、大きいままの画像で表示されてしまいました。
どこかソースを変更する必要があるのでしょうか？
名無し
>nekoさん
{PhotoURL-HighRes}の部分を{PhotoURL-500}などのようにピクセルで指定すれば変更できると思います。
neko
ありがとうございます！
kk
はじめまして。
50mm.ccを拝見させていただき、こちらにたどり着きました。
私もTumblrで写真blogを始め、こちらのソースを使わせていただこうと思ったのですが、うまくいきませんでした。
10枚以上の画像を1枚ずつアップしたのですが、ブログには10枚目までしか表示されず、下へのスクロールがされませんでした。
Tumblrのアカウントを作る→表示をカスタマイズ→上記のソースを貼り付ける→blogの画像を投稿
しかまだしておりません。
他に設定する場所などが必要なのでしょうか？
いくつか設定を変えてみましたが、症状は変わりませんでした。
お忙しい中すみませんが、何か分かりましたらご教授いただければと思います。
Toshiro
>kkさん
proto.jpさんのAutopagerizeを導入してないからだと思います。
kk
さっそくご回答いただきありがとうございます！
すみません見落としをしておりました。
ありがたく使わせていただきたいと思います。
tetsu
はじめまして
みなさんと同じように、写真ブログを始めようと考えてココに辿り着きました。
50mm.cc拝見しました・・・ソースありがたく使わせてもらいます
Toshiro
>tetsuさん
ご丁寧に報告ありがとうございます。モリモリ撮っていきましょう☆
tetsu
ありがとうございます
ひとつお聞きします
画像投稿したときの説明文なのですが、色が薄くて見づらいのですが変更することができるのでしょうか？
投稿時にタグで変更するのでしょうか？
Toshiro
>tetsuさん
上記コピペで薄い事はないと思うのですが、変更は可能です。サイトを教えていただければアドバイスはできますが。。。
tetsu
すみません。よろしくお願いします。
Toshiro
171行付近の「div.post div.caption」内の「color」が「#ddd」になっているので、それを「#ccc」または「#999」くらいにしてみてください。
tetsu
いろいろ試してみましたが変化はありませんでした。
ツイッターと連携してるのですが、iPhoneのスマフォ版で開くと黒く表示され、PC版だと薄くなってました。
Toshiro
現在も色が「#ddd（#dddddd）」のままですね。「#999」にしてみてください。
Guwashi
おー、50mmのスナップいいですねー :)