STICKYWEBデザイン・WEB制作の備忘録。ときどきゆるーい日記など。2016-06-06Tumblrをカスタマイズしてみて気づいたことをまとめてみた!Tumblr久々の更新。アウトプット用のブログなのに10ヶ月近く放置していました(笑)Tumblrはデザインの情報収集目的でアカウントを取得していて、独自タグやら何やら面倒くさそうだな...と思ってカスタマイズをすることなくそのまま使用していました。SNSやサイトにも住み分けというか特徴によってどれを使うかある程度決まっていると思いますが、テーマの選択肢がそこそこあって広告が入らなくてある程度海外の人の目にも留まるもの...と考えた時にTumblrカスタマイズしちゃえば良いんじゃない?と思って少しだけTumblrのカスタマイズに手を出してみました。※リブログなど機能面で思うところは多々あるのですが...はじめは仕様などが全然分からなくて大変でしたが何とかカタチになりました。それよりも!管理画面の使い勝手が分からなくて苦労しました。いうことで自分メモですが、カスタマイズして気がついたことなどをまとめてみました。カスタマイズ」で検索するとカスタマイズ方法について詳しく書かれている素晴らしい記事がたくさんヒットするのでこの記事では割愛します。検索してみてくださいね♪カスタマイズしたCSSはどこへ記述する?[テーマを編集する]→[詳細設定]へ行くと一番下に[カスタムCSSを追加する]というエリアがあります。地味...いや背景に馴染んでいて分かりづらかったんですよね。カスタマイズ初心者なので探すのに時間がかかりました。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の編集画面を開いた時に表示される設定ボタンから[テーマアセット]を押します。すると画面下に使用ファイル一覧の枠が表示されます。そこで[ファイルを追加]を押し自分が使用したいファイルを追加します。これも分かりづらい...画像もその他ファイルも一箇所でまとめてアップできたら良いのに...(小声ただしここで要注意!!!不要なファイルをアップしていると即凍結されるひぇぇぇぇぇ!![ファイルを追加]の“?”マークにカーソルを合わせると「テーマ以外のファイルをアップロードした場合はそのアカウントを随時凍結します」と表示されます。一度アップロードしたデータを削除することはできません。迂闊にアレもコレもとファイルをアップロードできない...。スタマイズする時に非公開ブログを作ってそこでテストするのは「カスタマイズの途中経過が見苦しいから」という理由だけではありませんね。一度アップロードしたファイルを開いて再編集することはできませんが「置換」ができます。ローカルで修正・編集したファイルは[置換]ボタンを使用してファイル数を増やさないようにしましょう。ちなみにファイル名は同じでなくても置換できました。def.cssで置換するとファイル名はdef.cssになり、既にhtmlに記述している場合はそのファイル名も自動的に置換されます。ひとつ余談ですがテストサイトで使用したカスタマイズしたhtmlを本サイトにコピペすると[テーマアセット]に自動的にファイルが追加されていました。いうことはテストサイトで不要なファイルを記述したままうっかり本サイトへコピペしてしまうと本サイトのテーマアセットに不要なファイルがそのまま追加されてしまうというわけです。テストサイトを削除しても残ります。これ、私がうっかりやってしまった恐怖体験談なんです。本サイトへ移行する前に使い勝手チェックで準サイトを作った時に気づいたのでセーフ!でした。ファイルの記述部分<script><link>は面倒でも本当に必要なデータをアップロードしてから直接タグ打ちで記述した方が良さそうです。こっちで編集しても更新されるワナカスタマイズの際は[外観を編集する]→[テーマを編集する]を押して編集していましたが簡単な変更は[外観を編集する]からでも可能です。ここではブログ名・説明・アクセントカラー・背景色などが変更できます。これは[テーマを編集する]の部分と共通なのでどちらからでも更新ができます。設定画面の外観デザインを自由に変更できるのかと思って設定を変えたらブログの設定が変更されていて『これ、テーマの設定やったんかい!』ってなったので一応備忘録として残しておきます。(初心者あるある...?)画像投稿とテキスト投稿では写真のサイズが変わるテキスト投稿でも画像を使用することは可能です。画像投稿でテキストを打つことも可能です。画像投稿とテキスト投稿では写真の横幅が変わります。・写真は最大500px・使用する写真は“埋め込み”という位置づけ・投稿にタイトルをつけることができるこれは画像と文章どちらがメインとなるかという点からの違いだと思います。見せたいかで投稿方法を選べば良いかと。“続きを読む”も“見出し”も用意されているTumblrにもブログ同様に“続きを読む”も“見出し”も用意されています。どこにその機能が用意されているのかが分かりづらい...。その機能はテキストエディタを「リッチテキスト」にすると使用できます。改行した際に出てくる“+”マーク。これを押すと...出てきました!画像や動画、GIFを挿入することもできます。右が「さらに読む」ボタン。テキストを選択すると太文字・斜体・リンク・打ち消し線・引用などのボタンが出てきます。まとめTumblrってシンプルそうなイメージがありましたがいろんな機能があるんですね。その機能を思う存分活用するには複雑だったりミニマム仕様だったり...と初心者には少しだけハードルが高いような気がしました。半日くらい触ってみると慣れてくるのでテスト用を1つ作成して色々と試してみると良いかもしれません。SNSは一度アップロードしたファイルを削除してもサーバー側には残ってしまうというデメリットもあるのでアップロードする画像選びは慎重に...。17:00Tumblrをカスタマイズしてみて気づいたことをまとめてみた!関連記事2017-07-23WEBサイトとブログ、更新停止から収益の低下に影響が出るまでの差(個人的感想)現在、複数のWEBサイトとブログを管理しています。基本的にWEB...2016-10-29はてなブログProのサブブログを有効活用するには?けっこうマジメに考えてみたこんにちは。最近はてなブログ心おきなく書きたいがためにもう1...2016-10-27はてなブログは無料版?有料版?1年以上はてなブログProを使用している私の感想はてなブログでブログを書き始めて1年半。昨日クライアントから「うちのサイト見れないんだけど?」と連...2015-09-06はてなブログProにして1ヶ月経ちました。使い勝手や収益の感想などイロイロはてなブログProにして1ヶ月経ちました。無料ネットショップ開業【BASE】スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。