プロフィール

Author:Clarinet
Clarinet or クラリネット と申します。



pixiv number
circlems banner

FC2カウンター
月別アーカイブ
カテゴリ
最新コメント
リンク
最新記事
【東方】風見幽香の時計
フラッシュアニメを見るにはプラグインが必要です。
画的起源
仁王立ちだZE★霧雨魔理沙
【東方】フランちゃんがブリ(゚∀゚)ハマチ
著作権表示
このブログ内で使われているファンタジーアースゼロおよびラグナロクオンラインの公式画像、スクリーンショットにつきましては、一切の画像の加工及び配布を禁止します。 以下ファンタジーアスゼロ・スクリーンショットおよび公式画像の著作権表示 ©2005-2009 SQUARE ENIX CO., LTD. All Rights Reserved.Licensed to Gamepot Inc. 以下ラグナロクオンライン・スクリーンショットおよび公式画像の著作権表示 ©2004 Gravity Corp. & Lee Myoungjin (studio DTDS),All Rights Reserved. ©2004 GungHo Online Entertainment, Inc. All Rights Reserved.
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.--(--) | スポンサー広告 |

FC2ブログ 画像の挿入方法
テスト画像 (1000×1000pixel)

FC2ブログ 画像の張り付け方


↓クリックで続きを読む

こんにちわ!


今日は、FC2ブログにおける画像の挿入のやり方を書いてみようと思います。









まずは準備段階。


手始めに、挿入したい画像を用意します。


(※ FC2ブログでは張り付けられる画像に 500KB までのサイズ制限があるのでご注意ください)


ウィンドウズに最初から入っている簡易画像編集機能か、pictbear のような無料画像編集ソフトをダウンロードして記事に載せる画像を作ってみましょう。


参考までに、前に PictBear の使い方を記事に書いたので、そちらへのリンクを張っておきます → PictBearで画像加工 (新しい窓で開きます)


画像の保存形式は、特に理由がなければJPG形式が良いと思われます。


(画像の品質をある程度維持したまま、最も効率的に圧縮出来る形式)














画像が用意出来ましたら次の段階。




2.jpg

記事の編集画面の中の、『ファイル挿入』 を選択しクリックします。















4.jpg

続いて出てくる 『ファイル管理』 画面の中から、『参照』 をクリックし、画像の保存先を選択します。


その後、下にある 『アップロード』 を選択してアップロードします。


(※ この段階ではまだブログに張り付けたことになっていません)















3.jpg

続いて、本文の編集画面に戻り、画像を挿入したい行を選択します。


この作業を忘れると、画像がとんでもない場所にアップされてしまったりするので忘れずに行いましょう。















5.jpg

続いて再び 『ファイル管理』 画面に行き、挿入したい画像の 『この画像で記事を書く』 をクリックします。


今回は分かりやすくテスト用画像を作ってみたので、それをアップロードしてみます。


テスト画像 (1000×1000pixel)

↑こちら















7.jpg

上記の手順まで行うと、記事欄に画像のコードがペーストされます。


一番下の行に書かれている widthheight というのは、画像のサイズのことです。


width が横サイズ、height が縦サイズのことで、単位は ピクセル (pixel) です。




ピクセルというのは聞きなれない単位ですが、デジタル画像を扱うときは最も主流のサイズの単位です。


このピクセルサイズがこの後、とても大切になってきます。
















6.jpg

本文の編集の一番下についている プレビュー をクリックすると、今現在の記入状態でどのようにブログとして表示されるのかを確認することが出来ます。


10.jpg
↑参考





件のテスト画像が張り付けられたのがわかります。


ところが。


パっと見でもう分かると思いますが、見切れちゃってます。



実は、FC2ブログには 画像の横方向の限界表示サイズ というのがテンプレート毎に定められており、それを超えるサイズの部分は強制的にカットされてしまいます。


このように見切れてしまっても、クリックすれば全体画像を見ることが出来るのですが、見栄えの点で非常に美しくありません。


よって、表示サイズの調整作業を行う必要があります。















6.jpg

例えば、私のブログのテンプレートの場合、横方向の限界表示サイズは約500 pixel となっております。


貼りつけた画像は 1000 × 1000 pixel だったので、半分以上見切れてしまっています。


この限界表示サイズというのは、先ほどのお話に出てきた通りブログを作るにあたって選択したテンプレートに左右されるので、一度適当に画像を挿入してみて自分のブログのテンプレートの限界表示サイズを確認してみると良いでしょう。


テンプレートによっては、非常に大きな画像をそのまま貼りつけても表示しきれる場合もありますが、その場合でもあんまりにも大きな画像をそのまま貼りつけてしまうと、縦の行も多量に食ってしまいブログ自体が非常に見辛くなってしまうため、画像の表示サイズの変更作業はほぼ必須と言えるでしょう。















7.jpg

画像の表示サイズ変更のやり方は、先ほど挿入した画像コードの width と height の部分の値を手打ちで変更してやるだけでOKです。


たとえば、私のブログの場合縦横 500×500 くらいのサイズに出来れば表示サイズとして見やすくなります。




8.jpg

そこで、サイズ表示を 500×500 に手打ちで直します。


なお、縦横の大きさが違う画像の場合は、まず横のサイズを調整してから縦横比が同じになるように縦のサイズを計算して手打ちします。


例えば 1000×500 → 500×250 と言った感じです。











仮に縦横比を計算しないで適当に小さくしてしまうと、



テスト画像 (1000×1000pixel)

このように画像が潰れたり (縦方向のサイズ指定 (height) が小さ過ぎた)




テスト画像 (1000×1000pixel)

このように画像が縦に伸びたり (横方向のサイズ指定 (width) が小さ過ぎた) してしまいます。


どちらの場合も、クリックで元のサイズで表示になりますが、やはり見栄えが非常に悪いのできちんと計算して値を入力してあげましょう。















9.jpg

サイズを調整後、編集段階での画像です。


500×500 pixel に縮小してみました。




11.jpg

プレビューで確認するとこんな具合です。


大体綺麗に収まりました。


私のブログの場合、横方向のサイズは 約490 pixel なのでちょっとだけ右に寄ってしまっていますが・・・





ちなみに↑の二つの画像を見比べてみるとお分かり頂けると思うのですが、テンプレートによっては記事の編集段階で表示される画像の表示限界と、実際のブログの画像の表示限界とが違うので注意が必要です。

(ほとんどの場合ズレています)















12.jpg

同様に、100×100のサイズにして表示させてみました。


この場合でもクリックすれば元のサイズで表示されます。


小さくすると見辛いですが、たとえば多量の画像を複数連続で貼りつける場合や、あえてクリックしなければ見えないサイズにしたいときなどは便利です。





テスト画像 (1000×1000pixel)

こんな感じ。





13.jpg

クリックすればこのように元のサイズで表示されます。

















非常に簡単に書いてしまいましたが、以上がFC2ブログへの画像の挿入方法となります。


分かりづらかったらごめんなさい;




作業自体は単純作業の繰り返しなので、一度憶えてしまえば後は色々と応用が効くようになると思います。


・・・ただそれが仇となって、50枚とか100枚とか貼りつける場合かなりの苦痛なんですけどね 。・゚・(ノ∀`)・゚・。


画像を多量にアップしたい場合は、アップロードの支援ツールなどを作って配布している方もいらっしゃるので、そちらを覗いてみると良いと思われます。
























おまけ


youtube の動画をブログに表示させるやり方も載せておきます。






14.jpg

まず、ブログに載せたい動画のページを開きます。















15.jpg

続いて、動画の画像を右クリックして Copy embed html を選択し、クリックします。


すると、動画の挿入コードがコピーされます。















16.jpg

後は、ブログの記事欄にペースト (右クリック → 貼り付け) すればOKです。


ちなみに、この動画は初期段階では 640×390 pixel の表示サイズとなっています。















17.jpg

そのまま貼りつけただけだと、このように動画のサイズがブログのテンプレートのサイズと合わないときがあります。


サイズが大きすぎて、はみ出してしまっていますね。


これでもいい!と言ってしまえばそれまでなのですが、やはり見栄えが悪いのでサイズを調整してあげましょう。















18.jpg

やり方は画像のときと同じです。


挿入コードのなかの、width と height の値を直せばOKです。


width と height の値がそれぞれ2か所ありますが、一番下の 値だけ直せば大丈夫です。





19.jpg

私のブログの場合は、横のサイズを 500 pixel にすると大体綺麗になるのでこんな感じで。


元のサイズが 640×390 だったので、サイズ比的には本当は 500×305 にするのが適正なのですが、動画の場合は例外で、縦方向のサイズを大きめに取った方が見やすくなったりするのであえてサイズをずらしてあります。


この場合、画像の時と同じく動画の画面がほんの少しだけ縦に伸びてしまいますが、動画の場合は殆ど気にならないレベルです。


主に余白部分のサイズが変わるだけです。















20.jpg

例によって、プレビューで確認するとこんな感じに。


大体綺麗に仕上がりましたね。


以下、参考までに各種サイズで貼りつけた比較用のものを載せて、今日はお別れにしたいと思います。


長々と駄文失礼しました。


この記事が、皆さまの何かの参考になることを願って (〃▽〃)























640×390 (元のサイズのまま)


単にコピペしただけの段階のものです。




















500×305 (サイズ比適正バージョン)



















500×500




















500×350 (私がいつも貼りつけているサイズ)


※ これはあくまでも私のブログのテンプレートでのサイズなので、自分のブログのテンプレートに合ったサイズに調整してあげてください。


ニコニコ動画なども、同様のやり方で張り付けることが出来ます。

2011.08.05(Fri) | 未分類 | cm(2) | tb(0) |

この記事へのトラックバックURL
http://puchorog.blog104.fc2.com/tb.php/240-a70daa2b
この記事へのトラックバック
この記事へのコメント
169. No title
解りやすく説明してあって助かりました。やってみます。
NAGOYA758 | 2013.04.21 14:38 | edit
179. No title
参考にさせて頂いてます。ありがとうございました。
freelance365 | 2015.05.31 18:10 | edit
Name
E-Mail
URL
Title

password
管理者にだけ表示を許可
/
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。