サイト制作に関するメモ書き

HOME > CMS > Tumblrでサイトを作ってみる

Tumblrでサイトを作ってみる

仕事中にTumblrに関して調べる機会があったので、
今回はサンプルサイトを作りながら少し勉強してみました。

Tumblrについて

Tumblrを今回初めて使ったので、気になった点を少し。

投稿の種類が複数ある

下記の赤枠で囲ってある部分が投稿エリアですが、「テキスト投稿」、「画像投稿」、「動画投稿」など
投稿内容によって入力フォームが異なります。(基本7種類 + 3種類)

create-a-website-in-tumblr-image01

入力項目を増やせない

WordPressなどのように入力項目の拡張ができないので、例えば画像とタイトル、本文を表示させたい場合、
画像投稿の説明文入力箇所で

<h1>タイトルテキスト</h1>
<p>本文テキスト</p>

のようにタグ付けして、タイトルと本文を判別できるようにしないといけません。
ちなみに上記h1とpは一緒に出力されてしまうので、タイトル→画像→本文 のような並び順の場合、
ページ読み込み後にJavaScriptでh1の位置を移動、みたいなことをしないといけないみたいです。

phpの知識がなくてもテーマ作成できそう

WordPressでテーマを作ろうと思ったらphpの知識が必要になりますが、
TumblrではHTMLとCSSだけでテーマを作成できるので、(Tumblr独自のタグは使いますが)
カスタマイズの敷居は多少低そうな感じです。
 

カスタマイズ前の準備

とりあえずモックを作成

どういった内容が表示できるかよく分からず作り始めたので、足りない要素はあとから適宜追加するつもりで
まずはざっくりとモックを作成しました。
Tumblrサイト制作用に作ったモック

注意点としては、CSSやJavaScriptなどの外部ファイルは自分のサーバーに置き、絶対パスで記述しています。
最初はhead内に直接書いておこうかと思ったのですが、ごちゃごちゃするのでやめました。
他の方法として、Tumblr側でテーマ用にファイルをアップするところがあるみたいですが、
あまり使い勝手がよくなさそうなので、今回は自分のサーバーを使うようにしています。

あと、Tumblrではスマホ用のテーマも作れるみたいですが、今回はレスポンシブなので特に触れていません。
機会があればそのうち試してみたいと思います。
 

会員登録

Tumblrのサイトから会員登録を行います。

create-a-website-in-tumblr-image02
 

会員登録が完了すると、下記のような画面へ。

create-a-website-in-tumblr-image03
 

新しいブログの作成

Tumblrでは、会員登録時に作成されるメインブログとは別に、サブブログを作成することができます。
違いについては「ブログの管理 | Tumblr」に書かれていますが、

  1. パスワード保護があるという点(カスタマイズ中に他のユーザーに見られないようにできる)
  2. 複数ユーザーでの投稿の作成・管理が可能

の2点の理由から、サイト作成はサブブログで行ったほうがやりやすいと思います。
 

サブブログを作るには、右上にある自分のユーザー名をクリックして、「新しいブログを作る」を選択します。

create-a-website-in-tumblr-image04
 

タイトル・URLの入力、パスワード認証の設定を行い、「新しいブログを作成」をクリックします。

create-a-website-in-tumblr-image05
 

これでサブブログの作成は完了しました。
あとは表示確認用に、サンプル記事をいくつか投稿しておきます。
 

カスタマイズ画面の使い方

カスタマイズは右メニューの「カスタマイズ」から行います。

create-a-website-in-tumblr-image06
 

カスタマイズ画面での設定

まずはカスタマイズ画面左メニューを確認します。
「タイトル」にはサブブログ作成時に入力したタイトルが入っていると思いますので、
その下の「説明」にサイトの説明文を入れておきます。

create-a-website-in-tumblr-image07
 

次に、左下にある「詳細設定」をクリックして、詳細設定を変更します。

create-a-website-in-tumblr-image08
 

今回はレスポンシブサイトなので、「デフォルトのモバイルテーマを使用」をオフにして、
「ページごとの投稿」で一覧に表示させたい投稿数を設定し、上部の「保存」をクリックします。

create-a-website-in-tumblr-image09
 

作成したモックのHTMLを入れてみる

作成したモックのHTMLを入れてみます。
左メニューの「HTMLの編集」をクリックします。

create-a-website-in-tumblr-image10
 

HTML編集画面で表示されますので、元のテーマは一旦削除して、モックのHTMLを追加、
上部の「プレビューの更新」をクリックします。
左に「保存」ボタンが表示されますので、クリックして保存します。

create-a-website-in-tumblr-image11
 

これで変更が反映されたので、サブブログ作成時に入力したURLを開きます。
パスワード入力画面が表示されると思いますので、設定したパスワードを入力します。

create-a-website-in-tumblr-image12
 

レイアウトはモック通りの表示になりました。
画像は相対パスで書いていたので、この時点では表示されていません。
ここから登録した記事が表示されるように、Tumblrのテンプレートタグを追加していきます。

create-a-website-in-tumblr-image13
 

記事が長くなったので、続きはそのうち。

※2014/11/24
続きの記事を書きました。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP