【ブログの楽しみ方】画像を削除してブログ容量を増やす【ココログ】

ブログの容量が少なくなった場合の苦肉の策とも言えますが、

記事にサムネイル画像（＝縮小画像）を表示し、クリックすると拡大画像（＝オリジナルサイズの画像）をポップアップしている場合、「サムネイル画像」か「拡大画像」のどちらかを削除して空き容量を増やそうという趣旨の記事です。

手順概略

手順としては、

1. ブログをHTMLの編集でHTMLタグを編集して保存
   
2. 1の後で、マイフォトの「ブログにアップロードした画像」から該当のサムネイルまたは拡大画像を削除する

となります。

限られたブログ容量の大半を占めるのは画像です。サムネイルと拡大画像はそれぞれ別のところに保管されていて、これを図示すると、以下のような構造です。

図-1

このサムネイル画像は、アップロードの際、「ページに表示する画像サイズ」で指定したサイズでココログが自動的に作るものです。

そして、それを表示するためのHTMLタグが自動的に生成されます。

画像サンプルとHTMLタグ

HTMLタグの説明は後述しますので、あまり細かいところは気にせず、構造だけ見ると、「<img ～ />」（赤い部分）という部分がありますが、これがサムネイルを表示するHTMLタグで、「<a ．．．>と</a>」（青い部分）は、サムネイル画像をクリックするとオリジナル画像を表示するというHTMLタグです。

単純に構造だけ示すと、

<a ．．．><img ～ /></a>

となっていることをサンプル画像で理解して下さい。　

■サンプル１：　画像をクリックしたときの動作：「記事ページ内で拡大画像を表示」

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg" class="mb"><img width="220" height="165" border="0" alt="Wrapping_ornament_m" title="Wrapping_ornament_m" src="http://daishi100.cocolog-nifty.com/blog/images/2014/02/07/wrapping_ornament_m.jpg" /></a>

■サンプル２：　画像をクリックしたときの動作：「別ウインドウで拡大画像をポップアップ」

<a onclick="window.open(this.href, '_blank', 'width=512,height=384,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false" href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/01/28/wrapping_ornament_m.jpg"><img width="220" height="165" border="0" src="http://daishi100.cocolog-nifty.com/blog/images/2014/01/28/wrapping_ornament_m.jpg" title="Wrapping_ornament_m" alt="Wrapping_ornament_m" /></a>

【サムネイル画像を残してマイフォトの画像（ブログにアップロードした画像）を削除する】

上に述べたことから、前後の<a ～>と</a>の部分を消してしまって、<img ～ />のみを残せばば、とりあえず、閲覧時に拡大画像は表示されなくなります。（下の画像）

この作業の後に、「マイフォト」の「ブログにアップロードした画像」から該当の画像を削除します。

なお、「ブログにアップロードした画像」は新しいものから表示され、古い画像に辿り着くのが大変ですが、有志の方がお書きになったノウハウ『「記事一覧」や「マイフォト」で1ページの表示件数を任意に設定する方法』に、1ページに表示する件数を増やす方法が書かれています。

これに従うと、通常20件／1ページの画像を500件などと増やせるので、過去に遡りやすくなります。

画像の日付はブログの日付でもおおよそ見当がつきますが、画像のURLにも下記のように記述されています。

href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/01/28/wrapping_ornament_m.jpg"

画像を削除するときは、該当の画像を別タブで開くと便利です。（せっかく遡った画像リストがリセットされないため。）

下はFirefoxというブラウザの例ですが、他のブラウザでも画像名の上で右クリックして表示されるメニューには「新しいタブで開く」という内容のメニューがあるのでそれをクリックして別タブで開き、そちらでその画像を削除します。

【マイフォト（ブログにアップロードした画像）を残し、サムネイル画像を削除する】

上のサンプル1を例にすると、

<a href="http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg" class="mb"><img width="220" height="165" border="0" alt="Wrapping_ornament_m" title="Wrapping_ornament_m" src="http://daishi100.cocolog-nifty.com/blog/images/2014/02/07/wrapping_ornament_m.jpg" /></a>

太字の部分（URL）がそれぞれの画像のURLです。ですから、青字のURLを赤字のURLにコピペしてしまえばサムネイル画像は不要になります。

ただし、貼り付けるURLは「http://daishi100.cocolog-nifty.com/.shared/image.html?/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg」そのままでなく、青く色を付けたところを削除して、「http://daishi100.cocolog-nifty.com/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg」の形にする必要があります。

このあと、サムネイル画像を削除します。（削除の方法は→【ブログの楽しみ方】サムネイル画像の削除方法【ココログ】）

なお、サムネイル画像は220px×165px（width="220" height="165"）でしたが、このオリジナル画像は512px×384pxの大きさがあるので、記事に表示する画像のサイズを大きくしても構いません。

例えば、このブログのデザインの本文幅500pxに合わせるなら、width（幅）のサイズを500に変え、width="500"にしてheight（高さ）は指定しせん。幅だけ指定することで縦横比は変わらずに表示されます。（逆にheightだけを指定してwidthを指定しなくても縦横比は維持されます。）

下記HTMLタグとを画像を参照してください。

<img width="500" border="0" alt="Wrapping_ornament_m" title="Wrapping_ornament_m" src="http://daishi100.cocolog-nifty.com/photos/uncategorized/2014/02/07/wrapping_ornament_m.jpg" />

横幅500pxを指定して記事に大きな画像が表示されるようになったので、クリックしたときの動作は削除しました。

本腰を入れて画像を減らす作業をするなら、

1. ファイルマネージャのimageフォルダでサムネイル画像を確認して、そのURL（この例ならhttp://daishi100.cocolog-nifty.com/blog/images/2014/02/07/wrapping_ornament_m.jpg）をコピーして「記事一覧」の検索窓にペースト（貼り付け）し、そのサムネイル画像が使われている記事を検索
   
2. 記事内のHTMLタグを編集してサムネイルが不要な状態にし、
   
3. サムネイル画像を削除

という作業を地道に行うのがいいかと思います。

---