ポートフォリオ作成マニュアル - 東京藝術大学 音楽創造・研究センター

ポートフォリオ作成マニュアル
2015 年 6 月 29 日
作成：砂山太一
編集：音楽創造・研究センター
※無断転載・引用を禁じます
■Tumblr とは
・画像やテキスト、動画などを投稿・共有できるウェブログサービス。
・デザイン性・カスタマイズ性に優れている。 登録や投稿が簡単に行える。
・フォローやリブログなど SNS 機能が付いている。 独自ドメインが割り当てられる。
・元々はリンク集のようなものを作るためのサービスだった。
■Tumblr で作られた参考サイト
1
http://thekingsofsummermovie.com/
http://kttunstall.com/
http://nowyourecooking.tumblr.com/
http://onnanocos.jp/
http://shiftbrain.tumblr.com/
http://inocis.com/
http://boshidora.com/
■Tumblr アカウントの作り方
1. https://www.tumblr.com へアクセスする。
2. メールアドレスを入力し、パスワードとユーザー名（Tumblr のアドレスになる）を決める。
3. 年齢を入力し、利用規約のチェックをいれ、「次へ」を押す。
4. 参考 Tumblr サイトが表示されるので、「次へ」を押す。
5. 認証確認用のメールが届くので本文にある「メールアドレスを認証する 」を押す。
6.「Tumblr をスマホにダウンロードする」というページが出てくるので、「Tumblr を続行」を押す。
(Tumblr はスマホアプリとしてスマホからでもページの投稿などが行えます。）
2
■soundcloud アカウントの作り方
1. https://soundcloud.com へアクセスする。
2. Sign up をクリックしメールアドレスを入力し、パスワードを決める。
3. 下の 2 つのチェックボックスにチェックを入れ、「signup」ボタンを押す。
4.「One last step...」という画面が出てくるので、任意のユーザーネームと生年月日、性別を入力する。
5. 入力したメールアドレス宛に、確認用のメールが届いているので、「（confirm my email address）」を押す。
3
■vimeo アカウントの作り方
1. https://vimeo.com にアクセスする。
(ログイン画面が出てくることがあるので、その場合は「ログイン」ボタンの横、「登録」ボタンをおして、登録
画面に移る）
2. メールアドレスを入力し、パスワードと氏名を決める。
3.「Basic を継続」を選択すると無料のプランになる。
4. 承認メールが届くので本文にある「登録を完了する」を押す。
4
■Tumblr 設定
※以下、Tumblr の外観設定やページの投稿などは、すべて Tumblr にログインした状態で、
https://www.tumblr.com/dashboard
より行います。
1. 右上の人型アイコン→設定を開く。
アカウントの設定画面ではパスワードやメールアドレスの変更ができる。
2. 人型アイコン→「外観を編集」を開く。真ん中に出てきた画面上の 右上の「外観を編集 」を押すと編集可能
になる。
アイコン、自分の Tumblr ページ全体のタイトルと説明が設定できる。「編集」を行い、「保存」を押すと設定
完了。google の検索結果に反映される。
5
ユーザー名：ログインする時のユーザー名と Tumblr ページの URL に使われる。(独自ドメインを使用す
る場合はここで設定する)
例：自分のユーザー名を yamadahanako とした場合、URL は yamadahanako.tumblr.com となる。
サイトのテーマ：サイトのデザインのテンプレート
Twitter、Facebook：連携すると自動 post などが使える。
参考ページ：Twitter へ接続 , Facebook へ接続
※自分のサイトに行くには、以下 2 つがあります。
1. ブラウザのアドレスバーに直接アドレスを入力（yamadahanako.tumblr.com など）
2. ログインした状態で、https://www.tumblr.com/dashboard に行き、右上の「人型マーク」を左クリッ
クし、出てきたポップアップメニューの中から「外観を編集」を選択する。ユーザー名の下の Tumblr
URL:にサイトへのリンクがあるので、それをクリックする。
※独自ドメイン
ムームードメインやお名前.com などに代表されるネームサーバーサービスと有料の契約をして、任意の
文字列を Tumblr の URL に設定することができる。（〇〇〇〇.tumblr.com となっているサイトのアド
レス を〇〇〇〇.com や〇〇〇〇.org に変えることができる）
独自ドメインをとったら Tumblr 側とドメインサービス側で紐付けを行う。
参考ページ：独自ドメインを設定する
サービス例：http://muumuu-domain.com/、http://www.onamae.com/
■投稿
◯テキスト投稿
1. 右上の鉛筆アイコン→テキスト・画像・引用・リンク・チャット・音声・動画→テキスト
タイトル：投稿のタイトル
テキスト：歯車アイコン→テキストエディタ→HTML でタグが使えるようになる。
6
タグ：記事を分類しそれがまとまりになったリンクが作られ記事を見つけられやすくなる。（例えば、コンサー
トなどの情報は # ニュースとする。）
2.「投稿する」ボタンを押す。
◯画像投稿
1. 右上の鉛筆アイコン→テキスト・画像・引用・リンク・チャット・音声・動画→画像
2.「画像をアップロード」を押し、パソコン上にあるファイルを選択してアップロードする。
3. キャプションに写真の内容を入力し、タグをつける。
7
4.「投稿する」ボタンを押す。
◯音楽のアップロード
1. https://soundcloud.com/ にアクセスし、ログインする。
2. 右上のアップロードから音楽ファイルを選択し投稿する。
8
3. 必要に応じて、音声ごとに割り当てる画像、タイトル、タグ、説明文などを記入する。(タイトルとタグは必
須)
4. https://soundcloud.com/stream に行くと、アップロードした音声ファイルが Stream に追加されている。
5. 音声ファイルの下にあるボタンのうち一番右にある「share」ボタンを押す。
6. Tumblr のアイコン（「t」のマーク）を選択しログインすると、soundcloud の投稿を Tumblr にシェアする
ことができる。
◯動画のアップロード
1. https://vimeo.com/ にアクセスし、ログインする。
2.「動画をアップロード」ボタンを押し、ファイルを選択する。
3. タイトル、概要などを入力する。（アップロード完了まで時間がかかるので待つ）
9
4. アップロードした動画にアクセスし、投稿した動画の右上にある share ボタンを押す。
5. ソーシャルから Tumblr のアイコン（「t」のマーク）を選び、ログインすると Tumblr に vimeo の投稿がシ
ェアされる。
■テーマを編集
Tumblr では、個人の好みに合わせて自由に外観をカスタマイズすることができます。
このマニュアルでは、ワークショップ用に特別に作成したテーマ（Tumblr の外観設定）を使
います。
参考ページ：テーマのインストールと設定方法、ブログのカスタマイズ、人気の無料テーマ
1. http://plateau.ghe.jp/tumblrportfolio/にアクセスする。（ワークショップ用テーマ）
2. 書類が二つ重なっているアイコンをクリックすることでコードを全てコピーする。
3.Tumblr 側で、人型アイコン→外観を編集→テーマを編集、を押す。
10
4. HTML*の編集→全選択（Windows で Ctrl+a、Mac で⌘+a）→ペーストで先ほどのコードを貼り付け→プレ
ビューの更新→保存
すると、デザインの変更が反映されている。
（本文のフォントを変更するには HTML 内の"font-family:"以降に続くフォント指定を変更する。）
※HTML とは
web ページを作るための言語で、タグと呼ばれる文字列によって web ページにアクセスしたときの見え
方を表現している。タイトルや見出し、本文などの要素をタグで指定することによって、要素ごとに文字
の色や大きさを変えて表示している。HTML を編集することで、web ページの見え方が変わる。
11
5. オプションの設定
ページの上部は header、内容は body と呼ばれており、web ページはこれを基本にデザインを構成している。
外観オプション：背景色やヘッダー画像をここで変更できる。デザインを大きく変えるのに有効。
テーマオプション：テーマごとに用意された項目が変更できる。全体のテキストの色やレイアウトの間隔、要素
ごとの大きさなどが変えられる。
このテーマは今回のワークショップ用に作られたもので 33 の項目を用意しており、各デザイン要素の on/off や
色の変更ができる。使うテーマによって用意されている変更可能な項目の種類と数は異なる。
12
( URL Facebook, URL Google Plus, URL Instagram, URL twitter：他の SNS に誘導するリンクを
header 上部にアイコンを表示させ貼ることができる。空欄にしておくと何も表示されない。)
header メニューに表示させるリンク：URL を書き込むと Tumblr 内のページやタグで記事を絞り込んだページ、
また外部サイトのリンクを貼ることができる。(例：タグごとのリンクを貼る"tagged/tag")
ページの追加：時系列やタグで投稿が並ぶページとは別のページを作ることができる。
「このページへのリンクを表示する」を on にするとトップページにこのページのリンクを貼ることができる。
書式欄にある<html>ボタンを押すと html タグを使ったテキストが書ける。
■投稿の管理
1. ホームアイコンをクリックする。
2. 投稿の歯車アイコン→編集
3. タイトルや本文を修正する。
「タグ」の欄に#から始まる文字列を入力することで投稿にタグをつけることができる。タグの分類によって、訪
問者が目当ての記事を探しやすくなる。
13
4.「保存」ボタンを押して反映させる。
14