Pocket

 

以前、友達に「ホームページをつくってよ!」を頼まれたときに、初めてTumblrを使って作成したので、そのときの手順を元にTumblrを使ってサイトを作成する方法をご紹介します。

使ってみた感想としては、簡単に短時間で作れて自由度もあり、何よりサーバーなど準備する必要なくサイトを公開するところまでもっていけるので、イベントのホームページなどページ数の少ないサイトにはちょうど良いのかなと思います。

 
 
 

Tumblrに登録しよう!

 

まずは、Tumblrにアクセスして、アカウントを作成します。

tumblr-login

 

また、アカウント作成の際に、メールアドレスが必要になるので、持っていない方はGmailなどで取得しておきます。

 
 
 

サイトをカスタマイズしよう!

 

1. カスタマイズページを表示する

 
登録ができたら、さっそくサイトをカスタマイズしていきます。

Tumblrには無料のテーマもそろっているので、自分でHTMLを書かなくても、ブログサイトや、ギャラリーサイトなど、いろいろな種類のサイトをすぐ作ることができますが、せっかくなので今回はオリジナルのデザインで作成していきます。

サイトを編集するために、まず「カスタマイズ」をクリックします。

tumblr_top

 
 

クリックして表示されたこちらの画面で、サイトの編集を進めていきます。

customize_top

 
 

まずは現状のソースを見てみます。
ソースを確認・編集するには、「HTMLを編集>」をクリックします。

edit_html

 
 

クリックすると、サイトを構成しているソースが確認できます。

edit_html_show

 
 

試しに、ソースを全部消してみると…

all_delete

このようにプレビュー画面も反映されて真っ白になります!!(すぐ戻します!!)

 
 
 

2. Tumblr特有のコードに慣れよう!

 
ここまで来たら、あとはHTMLやCSSを使って他のサイトを作るときと同じようにコーディングしていきます…が、現状のコードを確認したときに、いくつか見慣れないコードがありましたので、少し触れておきます。

見慣れないコードとは、{Title}や、{Description}のことで、Tumblr内で使用できる特殊演算子と言うそうです。
使い方としては、{Title}と記述するだけでプレビューにはTumblrで設定したブログのタイトルが表示されます。(ブログタイトルの初期値は題名未設定)

tumblr_code_sample

 
 

また、特殊演算子を使うことでTumblrに投稿した写真を表示することもできます。

tumblr_block_sample

 
 

コードの部分が小さくて分かりづらいので、下にコードの部分だけ表示しています。

 
 

ここでは、投稿した写真を表示するために、ブロックと呼ばれる特殊演算子を使いました。

他にもたくさんの特殊演算子がありますが、このような特殊演算子は必ず使わなければならないものではないので、必要に合わせて使っていくことおすすめします。

Tumblr内で使用できる特殊演算子については公式サイトに詳しく書いてありますので、
そちらを参考にしてください。→Tumblr:カスタムHTMLテーマを作成するには

 
 
 

3. オリジナルのデザインにしよう!

 
サンプルが拙すぎて申し訳ないです…

tumblr_sample_完成

 

後はこのように、自分の好きなようにコンテンツを配置したり、CSSで見た目を調整したりして、
オリジナルのサイトを作っていくことができます。

 

Tumblrで作ったサイトは初期設定だと、「自分のアカウント名.tumblr.com」でアクセスすることができ、設定画面から独自ドメインを設定することもできます。

tumblr_setting

 

また、JavaScriptなど外部ファイルを使う場合はDropbox(正確にはDropboxのPublicフォルダ)などに配置し、そこを参照することで実現できます。

 
 
 

まとめ

 

今回は、Tumblrを使ったオリジナルwebサイト制作の入門編として、Tumblrの登録から、投稿した写真の表示、CSSで調整するところまでを行いました。

 
 

Tumblrを使ってwebサイトを作る際のポイントとしては、

  1. ・サーバーの準備など面倒くさいことをせず、すぐにサイトを公開できる
  2. ・いつものHTML、CSSでwebサイトが作成できる
  3. ・Tumblr特殊演算子({Title}など)は必要に合わせて使う

ですかね!

 

このように簡単にサイトを作成することができるので、機会があったら試しに使ってみるのも良いと思います!

 
 
 

長文お読みいただき、ありがとうございました。
それでは!!

 

Pocket

Comment

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

*

Copyright © team naporitan All Rights Reserved.