読者です 読者をやめる 読者になる 読者になる

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

f:id:BOEL:20151116152040j:plain

こんにちは。デザイナーの寺田です。

SNSソーシャルネットワーキングサービス)は世界中で利用されています。

最近では、宣伝のためにSNSを利用する企業が増えています。

当社もTumblrを利用し、自社コンテンツの宣伝やオフィスの雰囲気が伝わるよう社内で起きた出来事を更新しています。 代表的なSNSTwitterFacebookgoogle+、Pinterest、Tumblrなどたくさんあります。

なかでも「Tumblr」は他のSNSと比べ、サイトのデザインを自由にカスタマイズできるので、自分のイメージに合ったサイトにすることができます。

今回はさまざまな機能がある「Tumblr」について、カスタマイズの方法をご紹介します。

 

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

f:id:BOEL:20151116152146j:plain

Tumblrは一般的なブログ機能であるテキスト、画像の投稿だけでなく他サイトからの引用や、音声、動画などが投稿できます。

また、他ブログを自分のブログに表示する「リブログ」や相手のブログを評価し、評価したことを自分のブログに表示する「スキ!」の登録により、

情報が拡散がしやすいのが特徴です。

TwitterFacebookへ拡散する機能もついているので、他のSNSとの連携もカンタンです。

またURLを「http://◯◯◯.tumblur.com」の形で、自分の好きなURLに変更できます。

アクセス数などのサイトのデータがカンタンに参照できるGoogle Analyticsを挿入することも可能なんです!

 

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

 

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

f:id:BOEL:20151116152212j:plain

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

f:id:BOEL:20151116152316j:plain

 

まずは自分のTumblrのサイトへいきます。

「テーマの編集」で、編集画面を開きます。

f:id:BOEL:20151116152342j:plain

 

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

 

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

 

ページ移動後、右側の検索アイコンでテーマ名を入力。

探していたテーマが出てきたので、設定をします。

右上の「設定する」をクリックすれば、テーマがTumblrに反映されます。

 

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

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

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

f:id:BOEL:20151116152423j:plain

 

背景の色を変えよう

編集画面の上からスクロールして真ん中あたりにある、

「Blog Backgrond Color」の右の丸い部分をクリック。

カラーパレッド、文字コードを入力するエリアが表示され、 色を指定できます。

 

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

 

タイトルのフォントを変更しよう

編集画面に「タイトルのフォント」という項目があります。

これを変更し「保存」をクリック。

しかし、フォントを変えたい部分が変化してくれません。

 

文字サイズの変更は

文字サイズが変更できそうな項目が編集画面の真ん中にありました。

「Header Title font size」から文字サイズをピクセルで指定します。

ですが10pxにしても500pxにしても変化しません。

 

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

「Elise」では背景色しか変更できないのでしょうか?

 

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

 

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

f:id:BOEL:20151116152528j:plain

htmlを直接編集してみよう

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

 

「テーマの編集」から「カスタムテーマ」の下に「HTMLを編集」があります。

そこをクリックするとサイトのHTMLソースの全文を記述を見ることができます。

 

ブログサービスで文章を一部コードで指定できるサービスは多いですが HTMLを一から編集することができるのはTumblrならではの機能です。 

しかもエディターも記述毎に色付けされていて見やすいです。

 

フォントサイズの変更

タイトルフォントを変更するにはCSSのクラス名が必要です。 そこでブラウザの機能である開発者ツールを使って「要素の検証」を行ってみましょう。

Google ChromeFirefoxではブラウザの設定をしなくてもデフォルトで機能が使えるので、 これらのブラウザを使うことをおすすめします。

Chromeの場合…要素の検証 Firefoxの場合…要素の調査)

いったんブログ画面を開き、タイトル部分にマウスカーソルを置き、右クリック 「要素の検証(要素の調査)」を選択します。

ウィンドウが開き、タイトルを表示しているソースコードが開かれます。

 

ブラウザの機能を使い、クラス名を調べて、 下記のように直接CSSを記述します。

「保存」をクリック、サイトをプレビュー変更されていることが確認できました。

 

f:id:BOEL:20151116152559j:plain

.header-text > .wrap > a, .tittle-text{font-size:56px;font-family:"Garamond";} .typography p{font-size:18px;}

 

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

 

テーマを選ぶときはサイトとして目的にあったテーマ選びも重要です。

加えてカンタンにカスタマイズすることが出来るかを確かめて自分のスキルにあったテーマ選びをすることも、 Tumblrの利用がより快適になると思います。

 

カンタンに無料で自分のサイトがつくれるTumblrのメリット・デメリット

メリット

・無料でできる

・広告が入らない

・他のSNSと連携している

・自分の好きなようにURLを変更できる

Google Analyticsのトラッキングコードを設置できる

・HTMLコード全体を編集できる

・コードを編集するエディタが色分けされていて見やすい

・リアルタイム(シームレス)に変更を確認できる

デメリット

・コードを編集するとCSSなどのファイルのアップロードが面倒

・テーマ編集の難易度がテーマを適用するまでわからない

 

カスタマイズのためのおすすめサイト

Tumblr公式サイト カスタマイズについて

Creating a custom HTML theme | Tumblr

 

Tumblr公式サイト Tumblrの無料のテーマをまとめたサイトです。

人気の無料テーマ | Tumblr

 

これもTumblrでつくられている!

背景に動画が入っています。Tumblrだといわれないと分からないです。

The Quiet Ones | Now Playing

 

ロゴをオーバーしたときの動きがすごい!

Capitol Couture

 

まとめ

いかがでしたか?

Tumblrはここまで自由にカスタマイズができるんですね!

サイトの目的に合わせて、デザインを変えてみてはどうでしょうか?

 

次回は動きのあるJSを入れたり、実用例を増やした Tumblrカスタマイズの応用編をご紹介します。