TIPS

2015.04.07
vol.27

WEB

自由にデザイン!tumblrのカスタマイズ方法

vol.27 自由にデザイン!tumblrのカスタマイズ方法

こんにちは。デザイナーの寺田です。
SNS(ソーシャルネットワーキングサービス)は世界中で利用されています。
最近では、宣伝のためにSNSを利用する企業が増えています。
当社もtumblrを利用し、自社コンテンツの宣伝やオフィスの雰囲気が伝わるよう
社内で起きた出来事を更新しています。 代表的なSNSはTwitter、Facebook、google+、Pinterest、tumblrなどたくさんあります。
なかでも「tumblr」は他のSNSと比べ、サイトのデザインを自由にカスタマイズできるので、
自分のイメージに合ったサイトにすることができます。
今回はさまざまな機能がある「Tumblr」について、カスタマイズの方法をご紹介します。


Web日記に拡散機能を追加した
多機能ブログ

たくさんの機能を追加した、多機能ブログ

Tumblrは一般的なブログ機能であるテキスト、画像の投稿だけでなく他サイトからの引用や、音声、動画などが投稿できます。
また、他ブログを自分のブログに表示する「リブログ」や相手のブログを評価し、
評価したことを自分のブログに表示する「スキ!」の登録により、情報が拡散がしやすいのが特徴です。
TwitterとFacebookへ拡散する機能もついているので、他のSNSとの連携もカンタンです。
またURLを「http://◯◯◯.tumblr.com」の形で、自分の好きなURLに変更できます。
アクセス数などのサイトのデータがカンタンに参照できるGoogle Analyticsを
挿入することも可能です。

「写真をキレイに見せたい!」「自分のポートフォリオサイトをつくりたい!」など
自由にカスタマイズできるので、自分に合った使い方ができます。


カンタンにデザインを変えられる
便利なテンプレート

便利なテンプレート

tumblrではデザインをカンタンに変更できる「テーマ」というデザインテンプレートがあります。
たくさんある「テーマ」からおすすめのテンプレートをご紹介します。

Pieces
レスポンシブデザイン
https://www.tumblr.com/theme/39541

Voices
レスポンシブデザイン
https://www.tumblr.com/theme/39519

Two
写真をたくさん載せられそうです。
https://www.tumblr.com/theme/38094

Oblivion
SNSの共有がしやすく、情報拡散が期待できそう!?
https://www.tumblr.com/theme/32724

他にもテンプレートがたくさんあります。


デザインを変えてみよう

今回は記事の内容がビジュアルで判別しやすいように画像と文章の両方が見やすいレイアウトの
「Elise」をつかって、サイトに変えていきます。
Elise
https://www.tumblr.com/theme/38712

tumblrのテーマ編集

まずは自分のTumblrのサイトへいきます。
「テーマの編集」で、編集画面を開きます。

tumblrのテーマ検索

「テーマを見る」で、テーマを検索をします。

検索したものが表示されなかった場合も、画面の左下「更にテーマを検索」をクリックすると、
別タブでテーマページヘ移動します。

ページ移動後、右側の検索アイコンでテーマ名を入力。
探していたテーマが出てきたので、設定をします。
右上の「設定する」をクリックすれば、テーマがtumblrに反映されます。


テーマのデザインをより自分の好みに変えていこう

今回はサイト全体の基本である背景色、フォント、文字サイズを変更します。

テーマ編集メニューの一覧から変更することができます。

Tumblrをカスタマイズしていこう

背景の色を変えよう
編集画面の上からスクロールして真ん中あたりにある、「Blog Backgrond Color」の
右の丸い部分をクリック。
カラーパレッド、文字コードを入力するエリアが表示され、 色を指定できます。

編集を終えるとリアルタイムで変更が反映されます。
完了したら、テーマ編集メニューの右上部分「保存」をクリックします。
こまめに保存をしていきましょう。

タイトルのフォントを変更しよう
編集画面に「タイトルのフォント」という項目があります。
これを変更し「保存」をクリック。
しかし、フォントを変えたい部分が変化してくれません。

文字サイズの変更は
文字サイズが変更できそうな項目が編集画面の真ん中にありました。
「Header Title font size」から文字サイズをピクセルで指定します。
ですが10pxにしても500pxにしても変化しません。

このセクションで変更できたのは「背景色」のみとなってしまいました。
「Elise」では背景色しか変更できないのでしょうか?

次の「htmlの編集」で、解決します。


オプションではできない
より細かなデザインの変更をしよう

Tumblrのhtmlを変更しよう!

htmlを直接編集してみよう


tumblrではhtmlを直接編集することができます。

「テーマの編集」から「カスタムテーマ」の下に「HTMLを編集」があります。
そこをクリックするとサイトのHTMLソースの全文を記述を見ることができます。

ブログサービスで文章を一部コードで指定できるサービスは多いですが
HTMLを一から編集することができるのはtumblrならではの機能です。
しかもエディターも記述毎に色付けされていて見やすいです。

フォントサイズの変更
タイトルフォントを変更するにはCSSのクラス名が必要です。
そこでブラウザの機能である開発者ツールを使って「要素の検証」を行ってみましょう。
Google ChromeやFirefoxではブラウザの設定をしなくてもデフォルトで機能が使えるので、
これらのブラウザを使うことをおすすめします。
(Chromeの場合…要素の検証 Firefoxの場合…要素の調査)
いったんブログ画面を開き、タイトル部分にマウスカーソルを置き、
右クリック「要素の検証(要素の調査)」を選択します。
ウィンドウが開き、タイトルを表示しているソースコードが開かれます。

ブラウザの機能を使い、クラス名を調べて、 下記のように直接CSSを記述します。
「保存」をクリック、サイトをプレビュー変更されていることが確認できました。

htmlを変更しよう!

tumblrはたくさんのテーマから好きなものを選ぶことができますが、
なかにはHTMLを直接編集しないと変更できないテーマもあるようです。

テーマを選ぶときはサイトとして目的にあったテーマ選びも重要です。
加えてカンタンにカスタマイズすることが出来るかを確かめて自分のスキルにあった
テーマ選びをすることも、tumblrの利用がより快適になると思います。

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。