画像や動画についてindex

  1. 画像・動画について
  1. 画像をアップロードする
  2. 画像を記事に入れる
  3. 画像の回り込み(画像と記事を横に並べる)
  4. 動画の種類
  5. 動画を投稿 〜NEW〜
  6. ホットリンクについて
  7. アップロードする画像の大きさ設定
  8. ニコニコ動画のプレイヤーを記事に投稿する

動画の種類

  1. 画像・動画について
DTIブログでは、動画の投稿が画像と同じ要領で簡単に行えます。最近では、youtubeなどの動画をブログに貼り付ける事も容易に出来るようになりましたが、自分独自の動画を作ってみても面白いと思います。ここでは、DTIブログが対応する動画の種類を簡単に説明します。


動画の種類

wmv
wmvファイルは、米マイクロソフトが開発・推進する動画形式のこと。
Windows Media Videoの略で、Windows標準のWindows Media Playerが
標準でサポートしている形式のひとつ。

mpg(mpeg)
MPEGファイルは、MPEG-1またはMPEG-2の動画ファイルの形式です。
MPEG-1の場合は、Windows Media Playerで再生できます。


rm
RealMediaファイルは、RealNetworks社が開発した音声・動画ファイルの
形式です。再生するには、専用ソフト(RealOne Player)が必要です。


avi
AVIファイルは、Microsoft社が開発した動画ファイルの形式です。
Windows Media Playerで再生できます。ただし、AVIファイルの再生は、
圧縮形式によってCodecを用意する必要があります。


mov
MOVファイルは、Apple社が開発した動画ファイルの形式です。再生す
るには、専用ソフト(QuickTime Player)が必要です。


3gp
3gpファイルはNTT DoCoMo社の携帯電話「FOMA」で利用できる動画配信
サービス「iモーション」で使われている動画形式です。


mp4
MP4はApple社のメディア技術QuickTimeのファイル形式を元に策定された
ISO/IEC 14496 Part 12の派生フォーマットで、従来のQuickTime形式の多く
を踏襲した構造となっています。


flv
flvファイルとは、FlashPlayer上で再生されることを前提として開発された
動画フォーマットです。このため、Flashを使用して作成されたインターフ
ェイスと親和性が高く、他のフォーマットでは真似ができないグラフィカル
なインターフェイスを作成することが可能です。

動画の投稿 ~NEW~

  1. 画像・動画について
動画も、画像投稿と同じ手順で投稿する事が出来ます。投稿したい画像をファイルアップロードより選択。 対応ファイル形式は、wmv、avi、mov、mpg、mp4、3gp、3gpp、3g2、3gpp2、m4v、flvになります。投稿したい動画をFLVに変更して投稿する事も可能です。方法は、説明をご覧下さい。

1つのファイルサイズは5MBまでとなっています。尚、動画の編集に関しては様々なフリーソフトやウィンドウズムービーメーカー等でも行えますので編集はそちらのサイトを参照してください。

管理画面内メニューの、データ管理>ファイルアップロードをクリックします。

 ファイルアップロード

もしくは、管理画面上部のショートカットボタン「画像・動画」をクリック
ファイルアップロード


ファイルアップロード画面で動画をアップロードし、FLVに変換したい場合はチェックを入れ、「オリジナル画像で投稿」をクリックします。
動画のサムネイルは作成されません。

動画2


記事作成画面に切り替わり、動画を表示するコードが記入されていれば、「記事を保存」を押します。

動画3




下記のようなプレーヤーが自動で選別されます。

動画4




画像をアップロードする

  1. 画像・動画について
記事を書く際に画像や動画を付けると見た目が華やかになり、より楽しいブログになります。ブログの記事に画像を投稿する方法は
1.データ管理>ファイルアップロード
もしくは
2.記事作成画面からのアップロード
の2つの方法があります。

画像は1個づつアップロードしてください。複数を一括で行う事は出来ません。
ファイル名は80文字未満でお願い致します。
また、FTPなど画像アップロードソフトには対応してませんのでご了承ください。

方法その1

管理画面内のメニュー、データ管理>ファイルアップロードをクリックします。

 ファイルアップロード

もしくは、管理画面上部のショートカットボタン「画像・動画」をクリック
ファイルアップロード



ファイルアップロードの画面が出てきます。

画像アップロード2

1. 「参照」をクリックします。
2.  アップしたい画像をご自分のパソコンの中から選んでください。
3.  お好みで画像の説明文を書いて、指定サイズ画像作成と書かれたボックスにチェックを入れてください。(説明文はALTタグの役割をします。 オリジナルの画像のサイズが大きい場合は「指定サイズ画像を作る」にチェック を入れると、ブログ上では小さく表示さておいて、クリックするとオリジナルサイズで表示させる事ができます。

4. 最後にアップロードのボタンをクリックしてください。



下記のように画像のサムネイルが表示されたら完了です

画像アップロード2


アップロードした画像を記事に入れて新しく記事を書き始めたい場合は
「指定サイズ画像で投稿」もしくは「オリジナルサイズ画像で投稿」をクリックしてください。

手動で画像URLを書き込みたい場合は、作成された画像をクリックしてプレビューすると、別のまどが開いて画像だけが表示されるので、その時のURLをコピーし、ご利用ください。



方法その2 − 記事作成画面からのアップロード方法

記事作成画面内に (かんたん編集ツールなら)のボタンがあるのでクリック。
別窓で画像アップロード画面が表示されます。
そこで画像をアップロードし、「指定サイズ画像で投稿」もしくは「オリジナルサイズ画像で投稿」をクリックして、元の画面に戻ると画像が挿入sれています。
開いた別窓は作業が終了したら閉じてかまいませんが、開いたままにしておけば、記事を書いている最中にそのつど画像をアップして使う事もできます。

画像を記事に入れる

  1. 画像・動画について
画像をアップしたらその画像を記事記事に入れてみよう。画像は記事を書いた後からでも選べますが、ここでは画像を最初に選んでから、記事を書く方法を紹介してます。

管理画面内メニューの、データ管理>ファイルアップロードをクリックします。

 ファイルアップロード

もしくは、管理画面上部のショートカットボタン「画像・動画」をクリック
ファイルアップロード


記事に入れる画像を選択
画像の選択

指定サイズで投稿を選ぶと、「ファイルアップロード」で選んだサムネイルのサイズに縮小されて投稿されます。

 アップロードした画像のそのままの大きさで投稿。この場合、テンプレートによっては、記事欄より画像が大きい場合テンプレートが崩れる事がありますのでご注意ください。





自動的に「記事作成」画面に移動し下記のようなコードが出ます。これが画像を表示するためのコードになります。
画像タグが記事に入った






画像の上部と下部に記事を書いてみよう


記事をかいてみよう




記事を保存して「ブログを見る」のボタンを押してブログを確認

記事入った確認


きちんと表示されたら完成です。

画像のコードの仕組みを知っておこう
以下の様な画像を挿入した時のコードの意味
< a href="http://14.dtiblog.com/t/testblog/file/xxxx.jpg" target="_blank"> < img src="http://14.dtiblog.com/t/testblog/file/xxxxs.jpg" alt="" border="0"> < /a> < br clear="all">

< a href="http://14.dtiblog.com/t/testblog/file/xxxx.jpg" target="_blank"> 〜 < /a>
これは、 <a ...で始まり </a >で終わる、通称aタグと呼ばれるもので、このaタグで挟まれた〜の部分をクリックするとa href="...で書かれたリンク先に飛ぶという設定になります。

< img src="http://14.dtiblog.com/t/testblog/file/xxxxs.jpg" alt="" border="0">
これはhttp://14.dtiblog.com/t/testblog/file/xxxxs.jpgという名前の画像を表示させるという意味です。

aタグで挟まれた部分が、< img src="...">で表示された画像タグであれば、画像タグで表示された画像をクリックするとaタグで指定したとび先に移動する事になります。


画像の回り込み(画像とテキストを横に並べる)

  1. 画像・動画について
画像の横に文字を入れてあなたのブログの見栄えを良くすることも出来ます。但し、これは、テンプレートの種類や画像の設定の大きさによって出来ないケースもありますが、基本的には下記のような手順で出来ます。

画像を記事に投稿します。

回り込み1


<br clear="all">を削除し、
align="left"をイメージタグの中に追加します。
上記の例だと<img src="画像URL" alt="" border="0" align="left">となります。
align="left"の前には半角スペースが入ります。
*画像を右寄せにしたい場合はalign="right"として下さい。

「<br clear="all">」を削除したところから記事を書く

回り込み2


このように見えれば、出来上がりです。

ホットリンクについて

  1. 画像・動画について
DTIブログでは、ホットリンクを禁止しています。外部サーバーでDTIブログ内にアップしている画像を使用すると、その画像は表示されません。

ただし、ファイル名が 「banner.jpg」 「banner.gif」 「banner.png」 というバナー用画像に関しましては、ホットリンク禁止の対象外となりますので、ランキングサイトの登録時などにご利用いただけます。

注)ホットリンクとは・・・
ホットリンクとは、サイト内の特定のコンテンツ(画像や映像など)へ、トップページなどからアクセスするのではなく、ほかのサイトやブラウザのアドレスバーに入力して直接ジャンプさせたり、他サイトのページにそのファイルを表示させたりすること。「直リンク」とも呼ばれます。

アップロードする画像の大きさ設定

  1. 画像・動画について
ブログにアップする画像の大きさを設定します。テンプレートのデザインに合わせてバランスがとれた大きさに設定しよう。

指定サイズとは...ファイルアップロードページで任意に設定した画像のサイズ。サイズはご自身のテンプレートに合わせて設定するとサイズの大きなオリジナル画像を縮小する事ができて便利です。また、小さなサムネイル画像を作成したい場合にもご利用いただけます。
管理画面内メニューの、データ管理>ファイルアップロードをクリックします。

 ファイルアップロード

もしくは、管理画面上部のショートカットボタン「画像・動画」をクリック
ファイルアップロード


ファイルアップロードの画面がでてきます。
ここで画像をアップロードする前に任意のサイズを入力してください。

画像サイズ

*初期設定は、150x150(ピクセル)ですが、お好みのサイズに変更してください。

*標準サイズを作成するチェックはデフォルトで入っています。もし標準サイズを作りたくない方はチェックを外してください。


アップロードボタンを押して画像を保存すれば完了。



画像サイズ2


 画像をアップロードする際に「指定サイズ画像を作成」にチェックを入れなかった場合オリジナルサイズのみの選択になります。

 画像をアップロードする際に「指定サイズ画像を作成」にチェックを入れた場合オリジナルサイズに加えて指定したサイズが選べるようになります。

ニコニコ動画のプレイヤーを記事に投稿する

  1. 画像・動画について
DTIブログがニコニコ動画の外部プレイヤーに対応しました!

以前よりユーザーのみなさまからのご要望が多かったニコニコ動画の外部プレイヤー貼り付け機能がついにご利用いただけるようになりました。
ニコニコ動画より、動画をお選び頂きその動画をブログの記事作成欄のポップアップウィンドウに書き込むだけで簡単にこの様なプレイヤーを貼り付ける事が出来ます。







ニコニコ動画とは?

ニコニコ動画は、音楽・お笑い・アニメ・ゲーム・グラビアなどの動画再生中にリアルタイムでコメントを付けられる「動画コミュニティサイト」です!アナタのオリジナル動画をアップロードして皆にコメントをもらう事もできます。






ニコニコ動画にログインして好きな動画を選ぼう

ニコニコ動画のをご利用いただくにはまずニコニコ動画のアカウントにご登録いただく必要があります。
>>無料登録はこちら
アカウントを取得し、ログインすると会員がアップした動画を閲覧する事ができるのでお好みの動画をお選びください。


動画の貼り付け方法

1.あなたのブログの新規記事作成ページを開く。

2.記事欄の上にあるオプションボタンセクションの右下にあるこのボタンをクリック

3.ポップアップウィンドウが現れます。動画のURLの欄に、ニコニコ動画の任意のページのURLを書き込んでください。ポップアップウィンドウ最下のリンクからもニコニコ動画へ行けます。



4.プレイヤーのサイズを選んでください。

5.投稿するというボタンを押すと記事欄にプレイヤーのコードが貼り付けられます。

6.記事を投稿するとブログにプレイヤーが表示されます。ブログに表示された動画は、ニコニコ動画の会員でなくても視聴できます。

  |  もくじへ  |  
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse