DESIGN STICKY

WEBデザイン・WEB制作の備忘録。ときどきゆるーい日記など。

Tumblrをカスタマイズしてみて気づいたことをまとめてみた!

久々の更新。
アウトプット用のブログなのに10ヶ月近く放置していました(笑)

Tumblrはデザインの情報収集目的でアカウントを取得していて、独自タグやら何やら面倒くさそうだな…と思ってカスタマイズをすることなくそのまま使用していました。

SNSやサイトにも住み分けというか特徴によってどれを使うかある程度決まっていると思いますが、テーマの選択肢がそこそこあって広告が入らなくてある程度海外の人の目にも留まるもの…と考えた時にTumblrカスタマイズしちゃえば良いんじゃない?と思って少しだけTumblrのカスタマイズに手を出してみました。※リブログなど機能面で思うところは多々あるのですが…

はじめは仕様などが全然分からなくて大変でしたが何とかカタチになりました。

それよりも!
管理画面の使い勝手が分からなくて苦労しました。ということで自分メモですが、カスタマイズして気がついたことなどをまとめてみました。
(2016年6月6日現在時点)

基本的なカスタマイズ方法は「Tumblr カスタマイズ」で検索するとカスタマイズ方法について詳しく書かれている素晴らしい記事がたくさんヒットするのでこの記事では割愛します。ぜひ検索してみてくださいね♪

カスタマイズしたCSSはどこへ記述する?

[テーマを編集する]→[詳細設定]へ行くと一番下に[カスタムCSSを追加する]というエリアがあります。

地味…いや背景に馴染んでいて分かりづらかったんですよね。
カスタマイズ初心者なので探すのに時間がかかりました。

テーマに使用する画像やファイルはどこからアップすればいいの?

Tumblrのカスタマイズ-TumblrにJqueryプラグインや画像などのファイルをアップロードして使う方法 | JUMP-UP.INFO

↑この記事を参考にさせていただきました。
テーマに使用する画像やJavascriptなどのファイルはダッシュボードから直接アクセスできないのでhttp://www.tumblr.com/themes/upload_static_fileにアクセス。

ところが2016年6月6日現在上記URLへアクセスするとhttps://www.tumblr.com/customizeへリダイレクトされます。
…色々と仕様が変わったのでしょうか(汗)

画像・ファイルなどをたくさん使用する場合は外部サーバーにアップする方法が得策ですが、ファイル数が多くない場合は

使用する画像を画像投稿でアップロードします。
画像のURLをコピーした後「非表示で投稿」に変更し保存すればOK。
投稿は非表示ですがアップロードした画像はCSSやテーマで使用することができます。
※直接アップロードで良い方法をご存じの方がいらっしゃれば窺いたいです

Javascriptなどのファイルは
[テーマを編集する]→[htmlを編集]でhtmlの編集画面を開いた時に表示される設定ボタンから[テーマアセット]を押します。

すると画面下に使用ファイル一覧の枠が表示されます。
そこで[ファイルを追加]を押し自分が使用したいファイルを追加します。

これも分かりづらい…
画像もその他ファイルも一箇所でまとめてアップできたら良いのに…(小声

ただしここで要注意!!!

不要なファイルをアップしていると即凍結される

ひぇぇぇぇぇ!!
[ファイルを追加]の“?”マークにカーソルを合わせると
「テーマ以外のファイルをアップロードした場合はそのアカウントを随時凍結します」と表示されます。

しかも一度アップロードしたデータを削除することはできません。
迂闊にアレもコレもとファイルをアップロードできない…。

スタマイズする時に非公開ブログを作ってそこでテストするのは「カスタマイズの途中経過が見苦しいから」という理由だけではありませんね。怖すぎる…。

一度アップロードしたファイルを開いて再編集することはできませんが「置換」ができます。ローカルで修正・編集したファイルは[置換]ボタンを使用してファイル数を増やさないようにしましょう。

ちなみにファイル名は同じでなくても置換できました。
例)abc.css → def.css
で置換するとファイル名はdef.cssになり、既にhtmlに記述している場合はそのファイル名も自動的に置換されます。

もうひとつ余談ですが
テストサイトで使用したカスタマイズしたhtmlを本サイトにコピペすると[テーマアセット]に自動的にファイルが追加されていました。
ということはテストサイトで不要なファイルを記述したままうっかり本サイトへコピペしてしまうと本サイトのテーマアセットに不要なファイルがそのまま追加されてしまうというわけです。テストサイトを削除しても残ります。

これ、私がうっかりやってしまった恐怖体験談なんです。
本サイトへ移行する前に使い勝手チェックで準サイトを作った時に気づいたのでセーフ!でした。

ファイルの記述部分<script><link>は面倒でも本当に必要なデータをアップロードしてから直接タグ打ちで記述した方が良さそうです。

こっちで編集しても更新されるワナ

カスタマイズの際は[外観を編集する]→[テーマを編集する]を押して編集していましたが簡単な変更は[外観を編集する]からでも可能です。

ここではブログ名・説明・アクセントカラー・背景色などが変更できます。
これは[テーマを編集する]の部分と共通なのでどちらからでも更新ができます。


設定画面の外観デザインを自由に変更できるのかと思って設定を変えたらブログの設定が変更されていて『これ、テーマの設定やったんかい!』ってなったので一応備忘録として残しておきます。(初心者あるある…?)

画像投稿とテキスト投稿では写真のサイズが変わる

テキスト投稿でも画像を使用することは可能です。
また画像投稿でテキストを打つことも可能です。

しかし画像投稿とテキスト投稿では写真の横幅が変わります。何度かテストしてみましたがやはりテキスト投稿では最大横幅500pxまでとなりました。

★画像投稿
・写真は500px以上で表示できる
・テキストは画像の“キャプション”という位置づけ

★テキスト投稿
・写真は最大500px
・使用する写真は“埋め込み”という位置づけ
・投稿にタイトルをつけることができる

これは画像と文章どちらがメインとなるかという点からの違いだと思います。
どう見せたいかで投稿方法を選べば良いかと。

“続きを読む”も“見出し”も用意されている

Tumblrにもブログ同様に“続きを読む”も“見出し”も用意されています。
ただ、どこにその機能が用意されているのかが分かりづらい…。

その機能はテキストエディタを「リッチテキスト」にすると使用できます。


改行した際に出てくる“+”マーク。これを押すと…

出てきました!
画像や動画、GIFを挿入することもできます。
いちばん右が「さらに読む」ボタン。

テキストを選択すると
太文字・斜体・リンク・打ち消し線・引用などのボタンが出てきます。

まとめ

Tumblrってシンプルそうなイメージがありましたがいろんな機能があるんですね。ただその機能を思う存分活用するには複雑だったりミニマム仕様だったり…と初心者には少しだけハードルが高いような気がしました。
半日くらい触ってみると慣れてくるのでテスト用を1つ作成して色々と試してみると良いかもしれません。SNSは一度アップロードしたファイルを削除してもサーバー側には残ってしまうというデメリットもあるのでアップロードする画像選びは慎重に…。