Tumblrの邪魔な要素を非表示にする方法｜CSSで簡単カスタマイズ
Tumblrの不要な要素が表示される理由
Tumblrを自分のブログやウェブサイトに埋め込んだ際、右上のロゴやフォローボタン、ダッシュボード、そして右下のInstall Themeなど、様々な要素が表示されます。
これらの要素はTumblrユーザーにとっては便利ですが、Tumblrを使用していない訪問者にとっては邪魔になってしまいます。
本記事では、CSSを使ってこれらの不要な要素を非表示にする方法を詳しく解説します。
Tumblrの右上要素を消すCSS設定
リブログやダッシュボードボタンを非表示にする方法
Tumblrの右上に表示される「リブログ」「フォローする」「ダッシュボード」などのボタンは、以下のCSSコードで簡単に消すことができます。
CSSに下記のコードを追加してください。
iframe#tumblr_controls {
display:none;
このコードを追加することで、iframeで読み込まれているTumblrの操作パネルが完全に非表示になります。
WordPressのカスタムCSSエリアや、テーマのstyle.cssに直接記述することで、すぐに反映されます。
右上のロゴやフォローボタンが消えない場合
テーマによっては、上記のコードだけでは完全に消えない場合があります。
その場合は、ブラウザの開発者ツール（F12キー）を使って、該当要素のクラス名やIDを確認し、より詳細なセレクタを指定する必要があります。
右下のInstall Themeボタンを消す方法
HTMLコードから削除する方法
右下に表示される「Install Theme」ボタンは、HTMLのコードから直接削除することが最も確実です。
Tumblrのテーマコード内で、以下のような記述を探してください。
Install Themeを消すには下記のリンクを消せばいいです、もしかしたらテーマによって違うかもなので最初の部分だけを下記に記しました。/p>
<a id="install-btn" class="not-ready"
このリンク要素全体を削除することで、Install Themeボタンが表示されなくなります。
CSSで非表示にする方法
HTMLを直接編集したくない場合は、CSSで非表示にすることもできます。
以下のコードをCSSに追加してください。
#install-btn { display: none; }
テーマによってクラス名やIDが異なる場合があるため、開発者ツールで確認してから適用することをお勧めします。
Tumblrカスタマイズ時の注意点
Tumblrのテーマをカスタマイズする際は、必ずテーマのバックアップを取っておくことをお勧めします。
また、テーマのアップデートにより、CSSの設定がリセットされることもあるため、定期的に確認しましょう。
開発者ツールを使って要素を特定することで、より正確なカスタマイズが可能になります。
まとめ
Tumblrの邪魔な要素を非表示にするのは、CSSコードを追加するだけで簡単に実現できます。
右上のボタンはiframe#tumblr_controlsを、Install Themeボタンは#install-btnを非表示にすることで、スッキリしたブログページが完成します。
テーマによって多少異なる場合があるため、開発者ツールで確認しながら調整することが大切です。