Tumblrの仕様変更を受けて（その１）
先日、tumblrの仕様変更でちょっと困っている旨を書いた。今まで利用していたtumblrで作成したページの外見をカスタマイズする“テーマ”。このテーマがあらたな画像の投稿に適用されないという事態が発生した。そしてどうもその解決には一筋縄では行かなさそうなのだ。
わたしは前回書いたとおりtumblrにフィードバックを送っておいた。
ダメもとでフィードバックを送ってみた。きっと同様のフィードバックは寄せられていることかと思うけど、伝えるべきことは伝えなくては。レガシーに適用されていたギミックを新エディタの投稿にも使えるようにしてほしいと、具体的にこの部分と画像も添付して書いておいた。
すると１日も経たないうちに返事が届いた。
This is likely caused by a piece of custom HTML. Unfortunately, we don’t have the resources to provide technical support for HTML/CSS customizations.
「この件はHTMLのカスタマイズに起因した問題です。残念ながら弊社はHTMLとCSSのカスタマイズに関する技術的なサポートはおこなっていません」というつれない返信。
うーん、tumblr側からすればカスタマイズ側の問題なのかも知れないけれど、そもそもtumblrの仕様変更が原因で起きた問題なんだけどな。カスタマイズについてのサポートがないことは想定内だし、やはり自力で何とかせざるを得ない。
tumblrからの返信はつれない内容ながらも、丁寧にも公式テーマのリンクを案内してくれたほかテーマの作成方法のページとHTML/CSSについて学べるリンクも紹介してくれた。ほんとうに自力で解決してねということだ。
◆
こうなったらまずできることを探るしかない。まずはもう一度、テーマに最新バージョンがないかどうかを確認してみた。
前回書いたように使用しているテーマEliseとEffector（じつはトップページで使っていたのはEstenという別のテーマだった。これはEliseと同じ開発者によるもので基本的なつくりは共通）は、今回の仕様変更には未対応。いずれも長らく更新が止まっている。
以下のリンクはEliseとEstenの開発元WG-THEMESのtumblrサイト。2018年の1月にEliseのバージョン1.9を出したのが最後になっている。
開発者はポーランド在住の人物で、WGは彼の頭文字のようだ（ソースを見ると名前が書いてあるけどtumblrでは公開していない模様）。
2018年といえばtumblrはまだYahoo!の傘下だった。ポルノを排除したのがきっかけでユーザ数が激減したり、それでtumblr社の売却が話題になったりした年だ。Eliseテーマの更新がパッタリ途絶えて５年以上。そのタイミングで開発者になにがあったのかわからないけど、今回の仕様変更に対応したアップデートは期待できそうにない。
現在のテーマが対応してくれるかどうかは不明だから、しばらくはウェブサイトのデザイン面で試行錯誤するのは覚悟のうえだ。モノクローム作品のギャラリーをその実験場にすることになりそうだ。
前回わたしはこんなことを書いた。有言実行でモノクロ作品のオンラインギャラリーを実験台にしよう。なお、いまさらだけど今回は主にソースコードについてなので、いつものわたしのnoteとはかなり趣が異なります（←注意喚起）。
◇
わたしが使っていたのはEliseのバージョン1.4a。新旧の投稿編集ツールによる投稿の違いを見てみることにした。以下、ソースからそのままコピペする（ので長大になるけど、とりあえず飛ばしてもらってオッケー）。
●旧ツールによる投稿部分（2020年4月16日アップロード分）。
<article class="post size-b no-shadows photo" data-tags=" inks ">
<div class="wrapper caption-full">
<div class="preloader css-preloader-01">
<div class="animation-wrap"></div>
<div class="css-animation"></div>
</div>
<div class="overlay"></div>
<a class="photo-cover" href="https://monochrome.artist-at-heart.com/post/615519303136165888/a-candle-in-a-glass-ink-white-ink-and-white" style="background-image: url(https://64.media.tumblr.com/535fe286691f3ab89efe9c5daa158d81/9e4cf94582005598-66/s1280x1920/04f6f70c91581da7fcbad06d95141ecce8b666bf.jpg)"></a>
<a href="https://64.media.tumblr.com/535fe286691f3ab89efe9c5daa158d81/9e4cf94582005598-66/s1280x1920/04f6f70c91581da7fcbad06d95141ecce8b666bf.jpg" class="photo-image nivo-lb">
<img src="https://64.media.tumblr.com/535fe286691f3ab89efe9c5daa158d81/9e4cf94582005598-66/s1280x1920/04f6f70c91581da7fcbad06d95141ecce8b666bf.jpg" width="1280" height="885" alt="A candle in a glass | ink, white ink and white pencil on paper, 2019.
グラスの中の蝋燭 | インクと白インク、白色鉛筆・紙, 2019年.">
</a>
<a class="overlay-link" href="https://monochrome.artist-at-heart.com/post/615519303136165888/a-candle-in-a-glass-ink-white-ink-and-white"></a>
<!-- POST BUTTONS START -->
<div class="post-buttons post-button-s2">
<div class="post-permalink">
<a href="https://monochrome.artist-at-heart.com/post/615519303136165888/a-candle-in-a-glass-ink-white-ink-and-white">View image</a>
<div class="post-date">
<a href="https://monochrome.artist-at-heart.com/post/615519303136165888/a-candle-in-a-glass-ink-white-ink-and-white">
Uploaded on 16 April, 2020
</a>
</div>
</div>
<div class="post-share">
<svg class="icon icon-share">
<use xlink:href="#icon-share"></use>
</svg>
</div>
<div class="post-reblog">
<a href="https://www.tumblr.com/reblog/yk-monochrome/615519303136165888/40O3CX1D" title="Reblog">
<svg class="icon icon-reblog">
<use xlink:href="#icon-reblog"></use>
</svg>
</a>
</div>
<div class="post-like">
<svg class="icon icon-heart">
<use xlink:href="#icon-heart"></use>
</svg>
<svg class="icon icon-heart-full">
<use xlink:href="#icon-heart-full"></use>
</svg>
<div class="like_button" data-post-id="615519303136165888" data-blog-name="yk-monochrome" id="like_button_615519303136165888">
<iframe id="like_iframe_615519303136165888" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=66c22ab5319d742bca5762b8d18f9d06#name=yk-monochrome&post_id=615519303136165888&color=black&rk=40O3CX1D" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowTransparency="true" name="like_iframe_615519303136165888"></iframe>
</div>
</div>
</div>
<!-- POST BUTTONS END -->
<!-- SHARE BUTTONS START -->
<div class="share-buttons">
<div class="option-btn" onClick="window.open('http://www.facebook.com/sharer/sharer.php?u=https://monochrome.artist-at-heart.com/post/615519303136165888/a-candle-in-a-glass-ink-white-ink-and-white&t=Artist at Heart : Monochromes', 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');">
<svg class="icon icon-facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
<span>Facebook</span>
</div>
<div class="option-btn" onClick="window.open('http://twitter.com/share?text=Artist at Heart : Monochromes&url=https://monochrome.artist-at-heart.com/post/615519303136165888/a-candle-in-a-glass-ink-white-ink-and-white', 'twitter_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');">
<svg class="icon icon-twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
<span>Twitter</span>
</div>
</div>
<!-- SHARE BUTTONS END -->
<!-- POST CAPTION START-->
<div class="caption typography">
<p>
<b>A candle in a glass</b>
| ink, white ink and white pencil on paper, 2019.
</p>
<p>
<b>グラスの中の蝋燭</b>
| インクと白インク、白色鉛筆・紙, 2019年.
</p>
</div>
<!-- POST CAPTION END-->
<!-- TAGS START -->
<div class="tags">
<a class="tag" href="https://monochrome.artist-at-heart.com/tagged/Inks">Inks</a>
</div>
<!--TAGS END-->
<!--POST COUNTS START-->
<div class="post-counts">
</div>
<!-- DATE AND POST COUNTS END-->
</div>
</article>
●新ツールによる投稿（2023年7月1日アップロード分）。
<article class="post size-b no-shadows text" data-tags=" brush_pens ">
<div class="wrapper caption-full">
<div class="post-text typography">
<div class="npf_row">
<div class="npf_col">
<figure class="tmblr-full">
<a class="post_media_photo_anchor" data-big-photo="https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s1280x1920/6df0459b3a4f8b477583406131aedfcab7a11a62.jpg" data-big-photo-height="2070" data-big-photo-width="2912">
<img class="post_media_photo image" src="https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s500x750/2f966d7e8f151f72c15970596c6c4401b181f947.jpg" srcset="https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s75x75_c1/497986c2c8d503b1d4d0c0a86ba5d825b08188aa.jpg 75w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s100x200/45867dbf8a5137be6be1f93e109594b9d45599fc.jpg 100w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s250x400/39dfd40a616fdea10bf565c7885f1946745086f2.jpg 250w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s400x600/1ec97e9cc4326835552937f6c3367796c7754f20.jpg 400w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s500x750/2f966d7e8f151f72c15970596c6c4401b181f947.jpg 500w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s540x810/0c42587ee27efed725ba620e62d3472df70374c0.jpg 540w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s640x960/fa8701da1cd1813fa5157df108f00d9784627e55.jpg 640w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s1280x1920/6df0459b3a4f8b477583406131aedfcab7a11a62.jpg 1280w, https://64.media.tumblr.com/0eeb63fb3ae902c6672476f6804a9c25/8279468a774576ca-d5/s2048x3072/c1657114f44ac9e289425eced8431ace12d4265a.jpg 2048w" sizes="(max-width: 1280px) 100vw, 1280px" alt="image">
</a>
</figure>
</div>
</div>
<p>
<b>A boy on a sofa</b>
| brush pen ink on paper, 2021.
</p>
<p>
<b>ソファに寝そべる少年</b>
| 筆ペン・紙, 2021年.
</p>
</div>
<!-- POST BUTTONS START -->
<div class="post-buttons post-button-s2">
<div class="post-permalink">
<a href="https://monochrome.artist-at-heart.com/post/721615589956780032/a-boy-on-a-sofa-brush-pen-ink-on-paper">View image</a>
<div class="post-date">
<a href="https://monochrome.artist-at-heart.com/post/721615589956780032/a-boy-on-a-sofa-brush-pen-ink-on-paper">
Uploaded on 1 July, 2023
</a>
</div>
</div>
<div class="post-share">
<svg class="icon icon-share">
<use xlink:href="#icon-share"></use>
</svg>
</div>
<div class="post-reblog">
<a href="https://www.tumblr.com/reblog/yk-monochrome/721615589956780032/d5u4a9bT" title="Reblog">
<svg class="icon icon-reblog">
<use xlink:href="#icon-reblog"></use>
</svg>
</a>
</div>
<div class="post-like">
<svg class="icon icon-heart">
<use xlink:href="#icon-heart"></use>
</svg>
<svg class="icon icon-heart-full">
<use xlink:href="#icon-heart-full"></use>
</svg>
<div class="like_button" data-post-id="721615589956780032" data-blog-name="yk-monochrome" id="like_button_721615589956780032">
<iframe id="like_iframe_721615589956780032" src="https://assets.tumblr.com/assets/html/like_iframe.html?_v=66c22ab5319d742bca5762b8d18f9d06#name=yk-monochrome&post_id=721615589956780032&color=black&rk=d5u4a9bT" scrolling="no" width="20" height="20" frameborder="0" class="like_toggle" allowTransparency="true" name="like_iframe_721615589956780032"></iframe>
</div>
</div>
</div>
<!-- POST BUTTONS END -->
<!-- SHARE BUTTONS START -->
<div class="share-buttons">
<div class="option-btn" onClick="window.open('http://www.facebook.com/sharer/sharer.php?u=https://monochrome.artist-at-heart.com/post/721615589956780032/a-boy-on-a-sofa-brush-pen-ink-on-paper&t=', 'facebook_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');">
<svg class="icon icon-facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
<span>Facebook</span>
</div>
<div class="option-btn" onClick="window.open('http://twitter.com/share?text=&url=https://monochrome.artist-at-heart.com/post/721615589956780032/a-boy-on-a-sofa-brush-pen-ink-on-paper', 'twitter_share', 'height=320, width=640, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no');">
<svg class="icon icon-twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
<span>Twitter</span>
</div>
</div>
<!-- SHARE BUTTONS END -->
<!-- POST CAPTION START-->
<!-- POST CAPTION END-->
<!-- TAGS START -->
<div class="tags">
<a class="tag" href="https://monochrome.artist-at-heart.com/tagged/brush%20pens">brush pens</a>
</div>
<!--TAGS END-->
<!--POST COUNTS START-->
<div class="post-counts">
</div>
<!-- DATE AND POST COUNTS END-->
</div>
</article>
HTMLタグとCSSの基本的な説明をしておくと、<div>とか<a>とかの不等号カッコで囲まれたものがHTMLタグ。ウェブページを表示させるための基本だ。ここが見出し、ここが本文、などというページの構造を明示するのがその本来の役割。
そのタグは基本的に</>で閉じ、並列か入れ子のかたちで書かれる。このソースでは行頭位置がタグの階層ごとに揃えられているのでわかりやすい。なお<!--と-->の間は処理されないコメント。ここに第三者が見てわかりやすいように補足説明が書かれている。
CSSはスタイルシート（カスケーディング・スタイルシート）といってHTMLタグに表示上の役割を与えるもの。色や大きさ、フォント、表示位置を指定したり、背景画像を表示させたりできる。
CSSはHTMLのソース内に書かれることもあれば外部ファイルを用意して引用することもある。しかし複雑なページだと構造化しないとうまく割り当てられないから、現在のHTMLではクラスやIDを設定してそこにスタイルシートを適用させるのが一般的。タグ内でclass="○○"で指定されている要素がクラス。
わたしのモノクローム作品ギャラリーのページでは、７つのスタイルシートが引かれている。そのうち開発者が用意したのはelisetheme-1.4a.cssひとつだけ（ほかはtumblr側と追加のライブラリ）のようだけど、HTMLのヘッダ部分にもCSSがある。以下、CSSからさきほど引用したHTMLに該当していそうな部分を書き出してみる（すべてではなく一部）。
.text > .wrapper {
padding: 12px 20px 20px;
}
.post-title {
font-size: 20px;
margin: 0 0 12px;
line-height: 1.4;
border-bottom: 1px solid #646464;
padding-bottom: 7px;
}
.post-title > a {
text-decoration: none;
color: #646464;
-webkit-transition: all 300ms;
transition: all 300ms;
}
.post-title.uppercase {
font-size: 17px;
font-weight: bold;
text-transform: uppercase;
}
.post-text {
margin-bottom: 15px;
}
.center-pictures .post-text img {
margin: 20px auto;
}
.typography a.read_more {
text-decoration: underline;
display: block;
margin-top: -10px;
text-transform: uppercase;
font-size: 12px;
}
.preloader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
background-color: #fafafa;
-webkit-transition: all 1500ms ease 1400ms;
transition: all 1500ms ease 1400ms;
}
.preloader > .animation-wrap {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
-webkit-transition: all 700ms ease 1000ms;
transition: all 700ms ease 1000ms;
}
.photo-image {
display: none;
}
.photo-image img {
display: block;
max-width: 100%;
height: auto;
}
.center-pictures .photo-image img {
margin: 0 auto;
}
.photo-cover, .ps-photo-cover {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
z-index: 1;
}
.panorama-wrap {
margin-bottom: 15px;
}
.ps-cell {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
}
.ps-cell:first-child {
z-index: 2;
}
.ps-photo-cover {
position: absolute;
top: 0;
left: 0;
}
.photoset-grid {
margin-bottom: 15px;
}
.photoset-wrap, .single-column .photoset-grid {
display: block;
}
.photoset-grid, .single-column .photoset-wrap {
display: none;
}
.photoset-cell.has-caption {
position: relative;
}
.photoset-cell.has-caption:after {
content: "...";
position: absolute;
bottom: 11px;
left: 13px;
font-size: 25px;
color: #FFF;
height: 26px;
width: 26px;
text-align: center;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.photoset-cell.has-caption:hover:after {
color: #f5ad58;
}
.photoset-cell.has-caption:before {
content: "";
position: absolute;
bottom: 14px;
left: 10px;
background-color: #f5ad58;
height: 26px;
width: 26px;
-webkit-border-radius: 15px;
border-radius: 15px;
border: 2px solid #f5ad58;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.photoset-cell.has-caption:hover:before {
background-color: #fff;
}
縁がないとチンプンカンプンかもしれない。ピリオドではじまる.text などはHTMLのclass=で指定したクラスのこと。クラスに対しては{ }のなかが具体的な指定内容になる。ここでは表示位置とか色とかサイズが指定されている。指示先と内容は:でつなぎ、別の内容は;で区切る。スペースで並べた要素は入れ子での絞り込み。
HTMLタグの構造とビジュアル指定のCSSの仕組みを知れば、そんなにむつかしいものではない。サーバでなにかを動作させるcgiなどに比べればずっと感覚的に扱えるので、わたしは長らく自分でコツコツ入力してウェブサイトを作っていた。
◆
上の引用、どちらも<article>というタグの単位で切り出したのだけど、このタグはニュースサイトなどでエントリごとの単位で使われるもの。もちろんその上位のタグも存在する。
ここでわかったのは、旧ツールでの投稿がphotoクラスなのに対して新ツールの方はtextクラスが指定されていること。新しい投稿編集ツールからはテキスト投稿の形式に統一されているようだ。
画像は、<article>のなかの<figure>タグに載せられている。画像のタグは<img>。そのなかのhref="○○"で画像データを指定する。
ソースを見て知ったことだけど、このテーマ、画像投稿は同じ画像を背景画像にしてポインターをあわせたときのギミックを作っていたようだ。
そしてなぜか新ツールではやたらと画像サイズを細分化してわざわざ複数の画像ファイルを生成している。なんと11段階。現時点では、このいろんなサイズの画像がなにか効果を発揮しているようには思えない。将来的に良いことがあるのだろうか、楽しみにしておこう。
さて、問題の新ツール。テキスト形式の投稿に貼り付けられた画像になっている。単純に考えれば、そこに見えるタグやクラスに旧ツールでの画像投稿に指定された書式を適用すれば良いはずだ。
新ツール側で上の階層から指定されているタグとクラスを抜き出してみると、
<article class="post size-b no-shadows text">
<div class="wrapper caption-full">
<div class="post-text typography">
<div class="npf_row">
<div class="npf_col">
<figure class="tmblr-full">
<a class="post_media_photo_anchor">
<img class="post_media_photo image"> となっている（閉じるタグは省略）。
旧ツールの画像まわりの指定を同様に調べると、
<article class="post size-b no-shadows photo">
<div class="wrapper caption-full">
<div class="preloader css-preloader-01">
<div class="animation-wrap"></div>
<div class="css-animation"></div>
</div>
<div class="overlay"></div>
<a class="photo-cover" style="background-image: url(画像)></a>
<a class="photo-image nivo-lb">
<img>
</a>
<a class="overlay-link"></a>となる。
.post .photo、.wrapper .caption-fullまでは一緒だけど、先にデータを読み込ませていそうな.preloaderを経て、いったん.animation-wrap、.css-animationを並べている。なにやら動きを指定してそう。そこから階層を戻って.overlay、そして背景画像を指定。なんとここでは背景画像をHTMLのアンカータグ<a>内のCSSで記載している（画像データは「画像」と略した部分）。その後の.nivo-lbは、画像を浮かびあがらせるLightBoxというプラグインのもの。<img>で表示した画像をクリック対象にしているのがわかる。
こうして言葉にすると余計にわかりづらい。LightBoxを被せているからさらに複雑だけど、ビジュアルとしては背景画像として作品のサムネイルを表示しているのがキモだ。そしてその部分はHTMLタグのなかにある。
ぐぬぬ、これはさっき単純に考えた方法では突破できそうにない。
新ツールによる投稿の画像部分にある.post_media_photoあるいは.imageに旧ツールの.photo-coverの内容をコピーするぐらいでは動作するはずがない。表示の仕組みがまったく異なっている。
ギミックをあてはめる作戦は、いっきに暗雲が立ち込めてきた。
◇
とりあえず実験台のモノクローム作品オンラインギャラリーは最新バージョンの1.9にしておいた。実験に失敗したときにバージョン1.4aには戻せないからだ。そのうえで見た目上は以前ほど違和感のないメーソンリー形式の表示にしておいた。
できれば従来のグリッド形式を適用させたいけれど、これにはそうとう時間と手間がかかりそうだ。なので、ひとまずここで（その１）としてtumblrの仕様変更にからんだ顛末をまとめておいた。
まだまだ諦めてはいないので、進展や発見があれば後日（その２）を書くことにしよう。