【ブログの楽しみ方】ブログの容量を節約するには？【ココログ】

ココログに限らず、ブログで一番容量を消費するのは画像です。ここでは画像の扱いについて、ココログを始めたばかりの方に参考になるようなことを書く予定です。

ブログ記事そのものは「HTMLの編集」で見れば分かるように、文字の羅列で、長い記事を書いても使用する容量は大したことはありません。画像をたくさん貼っても、画像は別の場所に保存され、記事ではその画像を表示するためのHTMLタグが記述されているだけです。

画像サイズそのものを予め適切にしておくというのは言わずもがなですが、基本的には、

余計な画像はココログに残さない。増やさない。

　

ということです。以下、具体的に説明します。

差し替え画像は前の画像をマイフォトで削除してから

ココログを長く使っている方はよくご存じでしょうが、ブログに画像をupしたあとにその元画像を加工し直したりして差し替えようとすると、画像名（ファイル名）に「_2、_3．．．」と連番が付いていきます。

つまり、画像は置き換わるのではなく、古い画像はそのままで、上書きされないように連番が振られているのです。ですから、このようなことを繰り返していると、実際はブログに使われていない画像が増えてきます。この画像は消す習慣を付けましょう。

末尾に番号が付加されることが気にならないのなら、古い画像を削除する順番は差し替え画像をupした後でも構わないのですが、ブログ主はPCに保存してある画像ファイルとファイル名が異なってしまうのが嫌なので、以下のような方法で差し替えています。

１．記事に貼り付けた画像を削除

これは、「記事の作成」モード（リッチテキストモード）でその画像を選択（クリック）してキーボードのDELキーを押すだけでOKです。

２．記事を一旦下書きで保存する。

３．「マイフォト」→「ブログにアップロードした画像」で、該当の画像を削除する。

４．新しい画像を記事にupする。

２を行う前に新しい画像をアップロードすると、キャッシュ（大雑把に言えば残像のようなもの）が残っていて上手く画像が差し替わらなかったりします。また、古い画像を消す前に新しい画像をアップロードした場合は（ファイル名に連番がついたままでよいのなら）、３で古い画像のみ削除します。

【追記】サムネイル画像の削除方法は別の記事にupしました。→『【ブログの楽しみ方】サムネイル画像の削除方法【ココログ】』

余談ですが、記事上に表示する画像サイズ、つまりサムネイル用の画像サイズを指定すると、ココログではクリックしたときに表示されるオリジナル画像とサムネイル用の画像を別々に保存します。

これには意味があって、サムネイル画像は通常小さなサイズなので、閲覧者が記事を表示する際、“軽く”なる＝開くのに時間が掛からないという利点があります。

時々、トップページに表示する記事数をココログのデフォルト値より大きくして増やしている方がいますが、そに大きな画像や動画などをたくさん貼っていると、パソコンの環境によってはトップページを開くのに時間が掛かって、開ききる前に待ちきれずに閉じられてしまうこともあるかも知れません。（ブログの作者は何度も表示しているので画像のキャッシュがあり、軽く開くのでこのことに気づかないのではないかと思います。）

更に画像の話題から離れてしまいますが、ブログパーツの使用はほどほどにした方がいいと思います。このブログで言えば東京電力のパーツですが、ブログパーツを使うと言うことは、ブログを開く際にいちいちサービス提供元のサイトを読みに行っているので時間が掛かるだけでなく、サービス提供元のサーバーの不調などでパーツが一時的に使えなくなっているときなど、ブログが開けずにそのサービス提供元のサイトに飛ばされてしまうといったトラブルが起こります。

ココログの助け合い広場でも頻繁に問い合わせがあるトラブルなので、覚えておかれると良いでしょう。

閑話休題

よく使うイラストなどは「ファイルマネージャー」で管理する

あまりこういう需要はないかもしれませんが、こういうこともできるという例をご紹介します。

ココログでは画像や画像以外のファイルをアップロードするためのボタンが編集画面に用意されていて、アップロードされたファイルはココログが指定した場所（「ブログにアップロードした画像」など）に保存されます。

一方、ファイルマネージャーを使用すると、自分でフォルダを作成して管理できます。（下図右側参照）

通常は、上の画像のようにリンクボタンをクリックして表示されるウィンドウのHTMLタグをコピーしてから記事に貼り付ける（「HTMLの編集」モードに変えて貼り付けます）のですが、ここで画像のアドレスを確認することができます。（薄くピンクの背景を付けた部分）

ブログ主は、他の記事にも共通で使う画像（この記事に使っているグリーンネックレスのライン画像など）は、ファイルマネージャーで「buhin」というフォルダを作ってアップロードし、必要に応じてそのアドレス（薄くピンクの背景を付けた部分）をコピペ（コピー＆貼り付け）してHTMLタグを記述し、使い回しています。この方法だと、

「■■■/●●●/ファイル名」がその画像のアドレス（保存場所）になります。（■■■：ブログのドメイン、●●●：フォルダ名）

例えば、同じく「buhin」に保存してある　　というgifアニメは

http://daishi100.cocolog-nifty.com/buhin/new.gif

というのがアドレスです。

このアドレス部分を「HTMLの編集」モードに変えて貼り付け、下のように加工すれば記事に表示することができます。

<img src="http://daishi100.cocolog-nifty.com/buhin/new.gif" />

「<img ～ />」は画像を表示するためのタグで、「src="～"」という要素で画像を指定しています。もし、画像の周りに枠線が表示されてしまったら、下のように「border="0"」（境界線を表示しない）を追加します。

<img border="0" src="http://daishi100.cocolog-nifty.com/buhin/new.gif" />

このように、一つの画像を使い回す方法を知っていると、ブログに都度アップロードする必要がなくなるので、容量の節約になります。

こういう“部品”でよく使うものがあれば、こういったものを集めたブログ記事を作成して下書きで保存しておくと便利です。この記事を読んだ方なら、どの部分をコピーすればいいのか分かると思うので、その記事を「HTMLの編集」にして必要なタグをコピーして、現在書いている記事に貼り付ければいいわけです。（部品用の下書き文書は時々「日時」を変更して、記事一覧の上に来るようにしておけば、探す手間も省けます。）

なお、この記事で文章を区切るのに使っているグリーンネックレスのライン画像は下のように記述しています。（但し、「HTMLの編集」モードから「記事の作成」モードに切り替えると要素の記述順序や表現方法が変わってしまうことがあります。）

<p><center><img src="http://daishi100.cocolog-nifty.com/buhin/line_greennecklace.png" title="line_greennecklace.png" alt="line_greennecklace.png" /></center></p>

「<p>～</p>」は～の部分が段落を意味し、「title="line_greennecklace.png" alt="line_greennecklace.png"」は、前者が画像の上にカーソルを持っていったときに表示されるタイトル、後者が画像を誤って削除したりして表示する画像がないときに表示される代替文字です。この要素は必須ではありませんが、記述することを推奨されています。

「<center>～</center>」は～の部分を記事の表示領域内でセンタリング（中央揃え）するHTMLタグです。

なお、「<center>～</center>」を使うときは、下の「あああ」のように</p>の外側（右側）に適当な文字を入れたほうがいいです。

<p><center><img src="http://daishi100.cocolog-nifty.com/buhin/line_greennecklace.png" title="line_greennecklace.png" alt="line_greennecklace.png" /></center></p>あああ

「記事の作成」モードで、センタリングした段落に続いて文字を書こうとすると、センタリングがそのまま引き継がれてしまうからです。この状態で「記事の作成」モードに切り替え、「あああ」の部分を上書きするようにして、次の文章を書き始めます。

（これはcocologの仕様なので、センタリングを解除するための苦肉の策です。）

（拍手はブログ主のモチベーション維持程度の目的です。面白かった、役に立った、等々、宜しければクリックしてください。）

---