encount-H7k

“

イメージをクリックすると投稿前の高解像度のイメージを開くようにする

その1: Enable high-res photosをチェック

とりあえず、Tumblrのカスタマイズページを開いて「Advanced」のEnable high-res photosをチェック。これをしないことには始まらない。

その2: テーマをちょっとだけ変更（custom HTML）

同 じく、カスタマイズページの「Theme」からcustom HTMLでソースをちょっとだけ変更。

{block:Photo}
  <div class="photo">
    {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}

と あるところを探して、

{block:Photo}
  <div class="photo">
    {block:HighRes}<!--{/block:HighRes}
    {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}
    {block:HighRes}-->{/block:HighRes}
    {block:HighRes}<a class="highreslink" href="{PhotoURL-HighRes}"><img src="{PhotoURL-400}" alt="{PhotoAlt}" /></a>{/block:HighRes}

と 変更すると、高解像度のイメージがあるときにはクリックによって開くことができるようになる。高解像度のイメージがな いときは今までとおんなじ。ちなみに、{PhotoURL-400}の部分は元々のテーマによって数字が500だったり250だったり 変わるので注意。

その3: スタイルをちょっとだけ適用（custom CSS）

まぁこれだけでもいいんだけど、カスタ ムCSSを適用させておけば高解像度のイメージへのリンクを分かりやすくさせられるのでついでに設定してみた。

div.post div.photo a.highreslink::after {
content: "Open High-Res";
display: none;
line-height: 2em;
font-size: 14px;
padding: 0px 0.3em;
color: #ffffff;
background-color: #000000;
position: absolute;
top: 5px;
left: 5px;
opacity: 0.4;
}
div.post div.photo a.highreslink:hover::after {
display: inline;
}
div.post div.photo a.highreslink:hover img {
opacity: 0.6;
}

以上を、カ スタマイズページの「Advanced」にあるAdd custom CSSってトコに貼り付けるだけ。簡単。

”