「ストーリーズ」でフォトムービーを作ってみよう!

ブログが作りたい!Webサービスで遊ぶ > 「ストーリーズ」でフォトムービーを作ってみよう!

「ストーリーズ」でフォトムービーを作ってみよう!

「ストーリーズ」でフォトムービーを作ってみよう!

FC2ブログにスライドショーを作りたい方へ(2)

※:2011年6月をもって、ストーリーズ(Story'z)はサービス終了したようです。

「ストーリーズ」への登録が済んだら、さっそくフォトムービーを作ってみましょう。

作りやすいように、分かりやすいシステムにしてくれているので、手順通り進めれば、それほど難しくはないはずです。

良かったら、お気に入りの写真などを、スライドショー(フォトムービー)にして公開してみませんか?


フォトムービーを作る前の準備

次のようなことを準備しておくと、わりとスムーズに進められるはずです。

  • 著作権を侵害しない自分で撮影した写真や、自分で描いたイラストなどの画像を用意しましょう。
  • 予めおおよその画像の順番や、タイトル、文章などを考えておきましょう。
  • 音楽を入れる場合は、著作権を侵害しない楽曲を用意しましょう。
  • メールアドレスを用意しておきましょう。

「ストーリーズ」によるフォトムービーの作り方

1:ストーリーズ(STORY'Z)へ行く

(01)

「ストーリーズ(STORY'Z)」さんへ行きます。

ストーリーズ(STORY'Z)へ行く

2:ストーリーズ(STORY'Z)へログインする

(02)

「ストーリーズ(STORY'Z)」さんのサイトが、表示されます。

右上にある「ログイン」をクリックしましょう。

ログインをクリック

すでにログインしている場合は、もちろんログインする必要はありません。読み飛ばしてください。

(03)

「メールアドレス」と、「パスワード」を入力し、「ログイン」をクリックしてください。

メールアドレスとパスワードを入力し、ログインをクリック

3:新規作成、基本情報を入力する

(04)

ログインできたら、[新規作成]ボタンをクリックしましょう。

新規作成ボタンをクリック

(05)

基本情報を入力する画面が表示されます。

次の項目を入力し、「保存して内容の編集へ」をクリックしましょう。

  • 題名
  • 作者コメント
基本情報を入力し、保存して内容の編集へをクリック

「題名」は、フォトムービーの題名(タイトル)です。フォトムービーの最初のシーン(コマ)などで使用されます。

「作者コメント」は、公開作品を一覧表示しているページなどで使用されます。フォトムービーの前振りになるような、興味をもたれる文章を入れておくと良さそうです。

4:ストーリー内容を編集する

(06)

作成できるムービー画面(各シーン)は、次の2つです。

  • 文章シーン
  • 画像シーン

まず、文章シーンを作成して見ます。文章を入力し、「この文を追加する」をクリックしましょう。

この文を追加するをクリック

文章だけの画面(シーン)がいらない場合は、もちろん作らなくても構いません。

(07)

文章シーンを作成(追加)すると、次のように表示されます。作成されましたか?OK牧場?

文章シーン

(08)

次は、画像シーンを作成して見ましょう。

「アップロードする画像を選択」をクリックしてください。

アップロードする画像を選択をクリック

ちなみに、ファイルのアップロードには、次の条件があるようです。お手持ちの画像を、ご確認ください。

  • 画像のファイル形式は、jpeg、gifのみ。
  • 画像サイズは、4MB以内。
  • 一括アップロードは、10ファイルまで。

(09)

アップロードする画像を選択し、[開く]ボタンをクリックしましょう。

アップロードしたい画像が複数ある場合は、2回目のクリック時に、[ctrl]キー、あるいは[shift]キーとあわせてクリックしてみてください。

アップロードする画像を選択し、開くボタンをクリック

[ctrl]キーや、[shift]キーを使ったファイルの選択方法は、Windowsパソコン上でも同様です。

(10)

画像シーンを作成(追加)すると、次のように表示されます。

画像シーン

(11)

画像内に字幕(文章)を入れたい場合は、その画像の[字幕を追加]をクリックしましょう。

字幕を追加をクリック

(12)

字幕(文章)を入力し、字幕表示位置、表示順序を選択し、[この内容で更新]ボタンをクリックしてください。

この内容で更新ボタンをクリック

表示順序を、「同時」にしておくと、画像に重ねて入力した字幕(文章)が表示されます。

ひとつひとつ[字幕を追加]をクリックするのが面倒な場合は、編集モードを「編集表示」に切替えると便利です。

(13)

それから、各シーンが表示される順番を決めなければいけません。

各番号のあたりをつかんで移動させましょう。(ドラッグ&ドロップ)

ドラッグ&ドロップで表示順を入れかえ

それぞれ、画像を見ながら、上から順番通りになるよう作業を繰り返してください。

(14)

画像のアップロード、字幕、表示順などの指定が済んだら、「動画の作成・更新」をクリックしましょう。

動画の作成・更新をクリック

(15)

動画の作成・更新を行います。

BGMなど好きなように変更し、「設定を保存して動画を更新」をクリックしましょう。

設定を保存して動画を更新をクリック

ネット上では、勝手に音楽が流れることはあまり好まれません。BGMについては、著作権も含め十分ご注意ください。

(16)

とりあえず、見てみないとどんな感じか分からないでしょうから、「こちらから確認できます」をクリックして、ご覧になってみてください。

こちらから確認できますをクリック

(17)

フォトムービーが再生されるはずです。(以下は、静止画像です)

フォトムービーをご覧になってみて、どうも違うようなら、前述(15)の設定を変更して、繰り返し試してみましょう。

フォトムービーが再生される

(18)

また、画像シーンが足りない場合や、文章シーンを追加したい場合は、「内容編集」をクリックし前工程に戻ってシーンの追加・編集を行ってください。

内容編集をクリック

(19)

フォトムービーを確認し、編集に納得がいったら、「公開設定」をクリックしましょう。

公開設定をクリック

(20)

「公開設定」画面が表示されます。(一般公開を選ぶと入力項目が増えます)

一般公開にして、次の項目を指定してみましょう。(もちろん公開したくない場合は、そのままで)

  • 公開方法
  • テーマを選択
  • タグ(関連する単語)
  • コメント許可
  • オプション

「公開設定」の各項目を指定したら、「公開設定を更新する」をクリックしましょう。

公開設定の各項目を指定し、公開設定を更新するをクリック

(21)

一般公開を指定した人は、「公開ページへ」をクリックしてみましょう。

公開ページへをクリック

(22)

「公開ページ」が表示されます。

右下には、ブログに貼り付けるためのコードが記載されています。

公開ページが表示される

フォトムービー画面上の「公開作品をみる」をクリックすれば、他のユーザさんが作成した作品一覧が表示されます。


作成したフォトムービーを、FC2ブログで表示する方法

(01)

「フォトムービーの公開ページ」の右下のあたりをご覧になってみてください。ブログに表示するときのHTMLコードが記載されているはずです。

それでは、まずはじめに、表示するときのフォトムービーのサイズを決めましょう。「標準サイズ」と書かれている右横のプルダウンをクリックし、サイズを選択してください。

フォトムービーのサイズを選択

選択できるサイズの指定値と、実際の幅と高さの数値は、次のようになっています。

指定値

表示されるサイズ

標準サイズ

幅=450、高さ=370

3/4サイズ

幅=300、高さ=246

1/2サイズ

幅=225、高さ=185

1/4サイズ

幅=180、高さ=148

1/5サイズ

幅=150、高さ=133

前回の記事『フォトムービー作成サービス「ストーリーズ」登録手順』でご紹介したサンプルのサイズは、「3/4サイズ」です。

(02)

HTMLコードをすべて選択し、コピーしましょう。

HTMLコードをコピー

(03)

あとは、普段FC2ブログで記事を書いている場所へ、前述(02)でコピーしたHTMLコードを貼り付けるだけです。

記事へ、HTMLコードを貼り付ける

あるいは、記事内ではなく、サイドなどにフリーエリアを作成して、HTMLコードを貼り付けることもできます。お好きなように。

(04)

ちなみに私のサンプルのHTMLコードは、次のような感じです。

ただ、テンプレート(CSSの設定)によっては、フォトムービーが左よりになってしまうかもしれません。

中央揃えにしたい場合は、例えば次のようなHTMLコードを追加して貼り付けると、中央にくるはずです。

「<div style="text-align:center;">~</div>」で、前述(02)のHTMLコードを囲っています。

HTMLやCSSについてもっと知りたい人は、記事『ブログをカスタマイズしたい!』をご覧ください。

前の記事へ
次の記事へ

次回予告

次回は、秋の空の無料写真素材をアップする予定です。


関連記事

FC2以外のWebサービスを使って、遊んでみましょう!

作成日:2009/10/17 更新日:2011/11/20

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

やってみたいと思いました

こんにちは、KumaCrowさん。
今日も我が家はホームベーカリーのパンを食べました。
米粉のパン、大変おいしゅうございます。
自分で作って美味しいだなんて、図々しいにもほどがありますが、
実際は機械任せですので手前味噌ってなことでもありません。


サンプルのKumaCrowさんのフォトムービー、フィルムメーカーのCMみたいでかっこいいです!
音楽は自分の脳内でジュピターを流してみましたよ。

いつも応援ぽちっとなを押し忘れます。(ごめんね。今日は押しました♪)
記事の最後まで読むと、記事の内容のことをやってみよう!という気持ちが先になってしまいます・・・。

ブログを

続けてコメントごめんなさい。
Kumacrowさんのこちらの記事をリンクしてアメブロで記事を書かせていただきました。

Myにゃんこs

Missdiamondさん、こんばんは!(・∀・)/ぼんじるこまたれぶ
コメントありがとうございます。


いいなぁ、焼きたてのパン。
そりゃあもう、おいしかろうて。(´Д`;)

やっぱり、ベーカリーほしいなぁ。

米粉を使うと、
もっちりするのかしら。

うーん、悩ましいなぁ。
市販のパンも、そこそこおいしいものなぁ。

悩ましい!悩ましい!

あら、ピザも作ってはるんや。
あらーあらー。いいわねぇ。ヾ(゚∀゚*)ノむひょー


あ、そういえば、「ゆめぴりか」は食べましたか?
ニュースでちょいと見ました。

もちっとしているらしいですね。
食べてみたいなぁ。ヽ(´ー`)ノ


モーツァルトかしら?えびでーあいりすとぅんまいはーかしら?
ずいぶんかっこいい曲を流しちゃいましたね。(;´Д`)

Missdiamondさんもいかがでしょう。
愛しのかよ坊でひとつフォトムービーを!(´▽`)♪

・・・と思ったら、『Myにゃんこs』!!!
仕事が速い。(ФωФ)にゃー

追記:
記事にしていただき、ありがとうございます。ヾ(*´∀`*)ノわーい

その曲です

ひーとりじゃーなーいー です。
この記事で紹介されているスライドをアメブロのみなさんにも知っていただきたいと思ってうちのブログでも書かせていただきました。
アメブロはフリースペースが二つにフリープラグインも書き込む場所が二つあって
既存のユーザもちょっと戸惑う部分がありまして。
赤字でここに入れたら表示可能ということを強調してみました。
こちらこそいつも有意義な記事を惜しげもなく書いてくださるKumaCrowさんに感謝です。



ゆめぴりかは、一週間ほど前に店頭に並びましたが
天候不良で品質保持できた米が少ないとかで
もうごく少量が発売されて、
いつもうっかり&うかうかの私は出遅れて買えませんでした。


米粉(いつも思う。これは「こめこ」なのか「べいふん」なのかと)のパンは、
もっちりするなかに米の安心感があるようなそんな感じです。
何年か前に小麦価格が高騰したことがありましたよね?
そのときにパン屋さんが作るようになって、
今はパンメーカー(春と秋のブレッドフェスティバルでお馴染みのY社など)も一般店頭で出してます。
↑とっくにご存知でしたら相すみません。


私、ホームベーカリーのメーカーの手先じゃないんですが、
うちの父親の言葉をここに書き記したいと思います。
「このパン(ホームベーカリーで焼いたパン)を食べると売ってる食パンは食べられないな」

パンの耳(専門用語でクラストというらしです)がもう、程よく硬く程よく甘く。
私は思いました、もう10年ほど迷ってたんです、ホームベーカリーを買うかどうかを。
なんでもっと早く買わなかったんだろうと思ってます。
後発になればなるほど性能や使いやすさが上がるので、いま買って正解なんだなと無理やり思ってますが・・・。

パンの耳

Missdiamondさん、こんばんわん!▼・ェ・▼ワンワン
コメントありがとうございます。

改めて、記事をご紹介していただき、
ありがとうございます。ヾ(*´∀`*)ノ感謝

ひーとりじゃないって、すてきなことーねー。


「ゆめぴりか」・・・ニュースで見たときも、
競い合うように、買ってましたから、

手に入り難いんでしょうね。
しかし、それゆえに購買欲をそそりますなぁ。(´Д`;)


小麦が高騰したのって、去年でしたかね。
相変わらず、お菓子なども高いままで・・・。

量も少ないし。(´・ω・`)

たまに、米粉(「こめこ」ですかね)を使ったパンも買います。
ちょっとお安かったりするので。

べーカリーで作った場合も、
もっちりするわけですか。ほー。

何か特別な技術がいるわけでもないのですね。


うーん、Papadiamondがそこまでおっしゃるとは、
かーなーりー、おいしいのでしょうね。

まいったなー。(´Д`;)ほしすぎる

パンの耳までおいしいというのは、
良いよねー。

ほしいなー、ほしいなー。

No title

ストーリーズ(STORY'Z)知りませんでした!
色々なサービスが立ち上がりますね~
時代に取り残されないように、新しいものをチェックしているつもりですが
数が多すぎていっぱいいっぱいです(-_-;)

KumaCrowさんの作品良かったですよ!
ちょっと哲学っぽく感じちゃいました(^o^)丿

イロイロなWebサービス

fuminchuさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

私も今回調べるまで知りませんでした。(´Д`;)てへっ
ほんとイロイロなWebサービスがあるものですね。

こうなってくると、おもしろいサービスであっても、
あまり消費されないまま消えていくようなことも起こりえそうです。

コミュニティも多いですからね~。

そういえば、technorati Japanが、
サービスを終了するお話も驚きました。


ほめていただいて恐縮です。
ありがとうございます!ヾ(*´∀`*)ノ

似てる!

これですかあ!似てますねえ!デジブックのほうが操作は簡単なようですが、同じようなものだと思います。
そのまま貼れそうならありがたい♪
こちらでは、使うことがあるかわかりませんが、試しにやってみるのも面白いかもしれませんね♪
ありがとうございます^^

デジブック

赤い彗星ありんこさん、こんばんは!(・∀・)/
コメントありがとうございます。

この手のサービスは、
けっこうあるみたいですね。

調べたときに、似たようなサービスは、
いっぱいありました。

おそらく、デジブーもそのまま貼るだけだと思います。
機会があれば、お試しあれー。ヾ(*´∀`*)ノ

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/596-c2a556d5
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて