仕事中にTumblrに関して調べる機会があったので、
今回はサンプルサイトを作りながら少し勉強してみました。
Tumblrについて
Tumblrを今回初めて使ったので、気になった点を少し。
投稿の種類が複数ある
下記の赤枠で囲ってある部分が投稿エリアですが、「テキスト投稿」、「画像投稿」、「動画投稿」など
投稿内容によって入力フォームが異なります。(基本7種類 + 3種類)
入力項目を増やせない
WordPressなどのように入力項目の拡張ができないので、例えば画像とタイトル、本文を表示させたい場合、
画像投稿の説明文入力箇所で
<h1>タイトルテキスト</h1> <p>本文テキスト</p>
のようにタグ付けして、タイトルと本文を判別できるようにしないといけません。
ちなみに上記h1とpは一緒に出力されてしまうので、タイトル→画像→本文 のような並び順の場合、
ページ読み込み後にJavaScriptでh1の位置を移動、みたいなことをしないといけないみたいです。
phpの知識がなくてもテーマ作成できそう
WordPressでテーマを作ろうと思ったらphpの知識が必要になりますが、
TumblrではHTMLとCSSだけでテーマを作成できるので、(Tumblr独自のタグは使いますが)
カスタマイズの敷居は多少低そうな感じです。
カスタマイズ前の準備
とりあえずモックを作成
どういった内容が表示できるかよく分からず作り始めたので、足りない要素はあとから適宜追加するつもりで
まずはざっくりとモックを作成しました。
Tumblrサイト制作用に作ったモック
注意点としては、CSSやJavaScriptなどの外部ファイルは自分のサーバーに置き、絶対パスで記述しています。
最初はhead内に直接書いておこうかと思ったのですが、ごちゃごちゃするのでやめました。
他の方法として、Tumblr側でテーマ用にファイルをアップするところがあるみたいですが、
あまり使い勝手がよくなさそうなので、今回は自分のサーバーを使うようにしています。
あと、Tumblrではスマホ用のテーマも作れるみたいですが、今回はレスポンシブなので特に触れていません。
機会があればそのうち試してみたいと思います。
会員登録
Tumblrのサイトから会員登録を行います。
会員登録が完了すると、下記のような画面へ。
新しいブログの作成
Tumblrでは、会員登録時に作成されるメインブログとは別に、サブブログを作成することができます。
違いについては「ブログの管理 | Tumblr」に書かれていますが、
- パスワード保護があるという点(カスタマイズ中に他のユーザーに見られないようにできる)
- 複数ユーザーでの投稿の作成・管理が可能
の2点の理由から、サイト作成はサブブログで行ったほうがやりやすいと思います。
サブブログを作るには、右上にある自分のユーザー名をクリックして、「新しいブログを作る」を選択します。
タイトル・URLの入力、パスワード認証の設定を行い、「新しいブログを作成」をクリックします。
これでサブブログの作成は完了しました。
あとは表示確認用に、サンプル記事をいくつか投稿しておきます。
カスタマイズ画面の使い方
カスタマイズは右メニューの「カスタマイズ」から行います。
カスタマイズ画面での設定
まずはカスタマイズ画面左メニューを確認します。
「タイトル」にはサブブログ作成時に入力したタイトルが入っていると思いますので、
その下の「説明」にサイトの説明文を入れておきます。
次に、左下にある「詳細設定」をクリックして、詳細設定を変更します。
今回はレスポンシブサイトなので、「デフォルトのモバイルテーマを使用」をオフにして、
「ページごとの投稿」で一覧に表示させたい投稿数を設定し、上部の「保存」をクリックします。
作成したモックのHTMLを入れてみる
作成したモックのHTMLを入れてみます。
左メニューの「HTMLの編集」をクリックします。
HTML編集画面で表示されますので、元のテーマは一旦削除して、モックのHTMLを追加、
上部の「プレビューの更新」をクリックします。
左に「保存」ボタンが表示されますので、クリックして保存します。
これで変更が反映されたので、サブブログ作成時に入力したURLを開きます。
パスワード入力画面が表示されると思いますので、設定したパスワードを入力します。
レイアウトはモック通りの表示になりました。
画像は相対パスで書いていたので、この時点では表示されていません。
ここから登録した記事が表示されるように、Tumblrのテンプレートタグを追加していきます。
記事が長くなったので、続きはそのうち。
※2014/11/24
続きの記事を書きました。
コメントが承認されるまで時間がかかります。