Tumblrのアプリで開くボタンを非表示にする方法。

Tumblrで作られたサイトをスマホのブラウザで表示させると、アプリで開くボタンが上下に現れます。このボタン、はっきり言ってジャマです。当サイトも過去にはTumblrで運営していましたが、自分のサイトをスマホで見ることがほとんどなかったので、このジャマなボタンの存在に気づいたのは、ずいぶん後になってからです。PCよりもスマホから来るユーザの方が圧倒的なので、対処しておかなければなりません。

広告

ボタン表示に関する設定はあるか?

今回のアプリで開くボタンは、Tumblrのシステムによって必ず表示されてしまうボタンです。どんなテーマを使っていようが、どんなカスタマイズを施そうが、必ず表示されます。

テーマのカスタマイズ画面に「Tumblrを広める」という項目があり、それをオンにした状態でPCから見ると、Tumblrにログインしていないユーザでも右上あたりにフォローなどのボタンが出てきます。PCならば画面が大きいため、表示されていてもさほど気になりません。

それじゃあ、この「Tumblrを広める」をオフにすれば、スマホで開いたときのアプリで開くボタンを消せるのか?そう思って試してみましたが、残念ながら「Tumblrを広める」がオフでもボタンは消えてくれませんでした。オフということはアプリから見てくれなくても構わない、ということの意思表示なのに、それを無視されてしまいました。

結局、非表示にはできないのか?

カスタマイズ画面にしろ、管理画面のアカウント設定にしろ、どの画面の設定をいじくっても、「アプリを開く」を消すことができませんでした。それじゃあもうお手上げか?ということはなく、テーマにCSSを追記することで隠すことができました。言い換えると、ゴリゴリCSSを書いて対処するしかありませんでした。

iframe.iframe-controls--phone-mobile {
    display: none;
}

iframe.tmblr-iframe--app-cta-button.tmblr-iframe--loaded {
    display: none;
}

アプリで開くボタンはiframeによって作られているため、それに対して非表示になるCSSを適用してやることで、見えなくすることができました。ただ、iframeの読み込みを止めることはできず見えなくしただけなので、実際は透明かつ操作不能なボタンが存在し続けているだけになります。

また、標準のテーマである「Optica」を使用している場合に上記のコードを使うと、iframe読み込み完了時になぜか、ページ最上部の検索ボックスおよび背景の影が消えてしまいます。どうやら上部に固定されるバーは、Tumblrロゴと検索ボックスとアプリで開くボタンすべて含めて1つのiframeとなっており、iframe読み込み時にもともと存在する検索ボックスと入れ替わるようです。

よって、iframe読み込み完了後ももともとの検索ボックスが残り続けるよう、上記のCSSに加えて以下も追加します。ただ、検索ボックスが上部固定ではなくなりますが、むしろついて回ってきた方が困ります。

.tmblr-iframe-overlay.tmblr-iframe-full-width #page div.logo-wrapper {
    display: block;
}

header.top-blog-header .header-image.cover.loaded:after {
    display: none;
}

header.top-blog-header .header-image.cover.loaded:before {
    content: "";
    position: absolute;
    height: 65px;
    width: 100%;
    top: 0;
    left: 0;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.4)0%,transparent 100%);
    background-image: linear-gradient(to bottom,rgba(0,0,0,.4)0%,transparent 100%);
}

余談。

今回のコードを使うと、もうアプリの開くボタンを利用することはできないのか?と思われそうですが、「Optica」には各記事の右下にある「…」をタップするとメニューが開き、そこにアプリで開くがあります。気づきにくいですが。

また、スマホでの画面ズームを禁止するコードも「Optica」には含まれていたので、それは削除しておきました。これほんときらい。アプリで開くボタン同様、これにも長らく気づかなかったのが悔やまれる。

たまにズームして細部を見たい画像も出てくるのに、わざわざズームを禁止にする意味がわからない。利便性の妨げになるだけだと思う。ヘッダー位置固定などを使っており、ズームを有効にしたらレイアウトが崩れるという場合もありますが、そういうのは崩れないレイアウトに直してください。