Tumblrのカスタマイズ

Tumblrのカスタマイズ

既存のテーマをカスタマイズ

「Effector」
シンプルな2カラムのデザインに加え、かなり柔軟なレイアウトのカスタムが可能
カスタマイズの方法として管理画面で編集する方法と直接HTMLを編集する方法がありますが、今回はテーマ自体が持っている管理画面を使ってベースの形を整えて行きます。

「Effector」をインストール

2015120701

以下のURLからテーマをインストールする。

https://www.tumblr.com/theme/17403

Tumblrのテーマをカスタマイズする

202015120703
Tumblrのテーマをカスタマイズする

カスタマイズ画面の左メニューにデザイン設定という項目があります。

  • Background (背景画像の設定)
  • Banner (タイトルの下に大きな画像を設置する)
  • Large Sidebar Portrate (サイドメニューに写真を追加する)
  • Logo (サイトのロゴを設置する)

ロゴを上部に配置する場合デザイン設定の中にあるBlog in top barのチェックボックスをオフに、Logo in Top barのチェックボックスをオンにする事で上部に配置する事ができます。

背景画像を用意する

202015120702

背景画像を用意するにあたって気をつけたいのが継ぎ目が出ないような画像を用意する事。パターンと呼ばれる繰り返しても継ぎ目のない背景素材を用意するか1600×1400くらいのかなり大きな画像を用意しましょう。

202015120704
背景に使えるパターンいろいろ | DesignWalker

※背景を暗めの画像にする時はカスタマイズ画面のinvertにチェックを入れる事で文字色やアイコンが白に反転します。
背景に大きな一枚絵を使用したい場合はFixed Backgroundにチェックを入れる事で背景の大きな画像を固定で配置する事が出来ます。

日本語のロゴも作成可能「Cool Text」
無料ロゴ作成ツール
簡単な作業で出来る!ブラウザ上で透過pngを作れるツール

失敗例

適当に背景画像とバナーを入れるとこんな感じに。。。
背景は濃淡が薄いか淡色の方が視認性が良くなりますね。。。

202015120705

DISQUSに登録をしてTumblrにコメント機能を付ける

Disqusとは?

Disqusは、簡単な設定で高機能なコメントシステムを埋め込むことができるカリフォルニア発のオンラインコメントサービスです。
CNNやBloombergなどといった大手メディアが採用しており、最近では日本のメディアでも見かけることが多くなりました。

Disqusを利用するメリット

手軽に導入できる外部コメントシステムには、FacebookコメントやTwitterのツイートなどがありますが、
Disqusコメントはその導入の手軽さに反して、コメント管理やユーザー管理、IPアドレス判別による投稿制限など、
外部コメントシステムとは思えないほど細かな管理・設定ができます。

DISQUSにアクセスしサイトの登録をして下さい。
https://disqus.com/

202015120707

202015120708

202015120709

202015120710

202015120711

202015120712

202015120714

下記リンク参照

http://nekonomemo.net/wordpress-disqus/
http://www.hanpendada.com/2015/01/tumblr-disqus.html
http://kazunorimiura.com/post/86205749581/tumblr%E3%81%ABdisqus%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%82%84%E8%A8%AD%E7%BD%AE%E6%96%B9%E6%B3%95%E3%81%AA%E3%81%A9
http://travelhack.jp/2012/05/22/tumblr-theme-custom/
http://webbusiness-kan.com/disqus/

概観を編集をショートカットなしでアクセスするには。
202015120713

日本語化
202015120716

コンテンツ部分のフォントを変更
[code] /* Japanese font */
body {
font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN',
          'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
/* Japanese font */
[/code]

参照サイト
http://hirokiyuuki.tumblr.com/post/33171827022/tumblr%E3%82%92%E3%83%96%E3%83%AD%E3%82%B0%E5%8C%96%E3%81%99%E3%82%8B
http://hirokiyuuki.tumblr.com/post/33171827022/tumblr%E3%82%92%E3%83%96%E3%83%AD%E3%82%B0%E5%8C%96%E3%81%99%E3%82%8B
http://jump-up.info/site_create/tumblr-customize.html
http://travelhack.jp/2012/05/22/tumblr-theme-custom/
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12121333937