アメブロカスタマイズにおすすめなcssスプライトの簡単設定

2017年1月25日水曜日

画像フォルダを利用する方法
cssスプライトを利用する方法

最近のホームページ制作ではネット回線速度の改善などであまり使われなくなった、cssスプライトですが、アメブロカスタマイズでは便利なときがあります。アメブロのデザインをカスタマイズするとき、結構面倒なのが、画像のアップロードです。具体的には、【ブログデザインヘッダ・背景用画像の追加】は、gif、jpg、pngで5枚まで、かつ1枚1MBまでと厳しい制限があり、あまり画像の枚数をアップできない、画像の重さも気になるといった点です。この限定された環境でうまく画像を使ってアメブロをカスタマイズするには2つの方法があります。

画像フォルダを利用する方法

【ブログデザインヘッダ・背景用画像の追加】で画像を5枚までアップして使い切ってしまった場合や、余裕を持たせたい場合、ブログ記事の中に入れる画像フォルダを利用する方法があります。ただ無料でアメブロをしている場合は、画像フォルダの容量も3MBまでという制限があります。（2017年1月23日現在）

1.アメブロのブログ管理トップより設定・管理画面に入り、画像フォルダをクリック

2.画像フォルダに入り、画像をアップ

ブログに画像を挿入する場合と同じように画像をアップします。

3.アップロードした画像の画像アドレスをコピー

アップロード画像のサムネイルを右クリックすると、色々なメニューが出てきますがその中の、「画像アドレスをコピー」をクリックしてます。

4.コピーしたアドレスをcssや、ウェルカムボード、フリースペースに利用。

例） <img src="内容が入ります" />

cssスプライトを利用する方法

もう一つの方法は、cssスプライトを利用する方法です。

cssスプライトとは？ CSSスプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつです。画像の数を減らすことにより、サイトの表示を速めることができます。 →webクリエイターボックスより引用

こまごまとした見出しなどのアイコンや、マーク、サイドバーのボタンなど1枚1枚上げていくとすぐに容量が上がってしまいます。そんなとき、複数の画像を1枚にまとめ、cssスプライトとして出力するとアップする画像の枚数を節約できます。またこのまとめた1枚の画像を画像圧縮ツールで圧縮すると、容量も1度で減らすことができます。 cssスプライトというとなんだか面倒くさいイメージがありますが、便利なツールが色々あります。今回は、spriteboxをご紹介します。

1.まずは、spriteboxにアクセス

2.Get Startedでスタート

3.Manages Imagesをクリックします

4.Generate Spriteをクリックします。

5.cssスプライトにしたい画像をひとつずつアップしていきます

画像をアップしていくと、きれいに並べてくれ、自動でスプライト画像が出来上がります。

6.Outputをクリック

画面左一番下にある2つ並んだボタンのうち、Outputをクリック

7.スプライト画像とcssが生成されています

Download Spriteをクリックしてスプライト画像をダウンロードします。また、黒い画面上のcssをまるまるコピーします。このダウンロードしたスプライト画像をツールを使って圧縮しておきます。画像圧縮ツールcompressor.io

8.アメブロにcssを貼り付け

アメブロのブログデザインcssの一番最後に貼り付けます。

9.ダウンロードした画像をアメブロにアップロード

アメブロの「ブログデザインヘッダ・背景用画像の追加」あるいは「画像のアップロード」でダウンロードした画像をアップロードします。

9.cssの画像パスの書き換え

先ほどコピーしたcssの例としまして下記のコードの background-image: url(spritebox-sprite.png); を background-image: url(アメブロ画像パス); に書き換えます。【サンプル】 .ico_header, .ico_bt01, .ico_bt02 { display: inline-block; background-image: url(spritebox-sprite.png); background-repeat: no-repeat; } .ico_header { background-position: -0px -0px; height: 437px; width: 1000px; } .ico_bt01 { background-position: -0px -437px; height: 90px; width: 280px; } .ico_bt02 { background-position: -280px -437px; height: 90px; width: 280px; }

10.タグを入れることで画像を表示させる

生成されたcssのクラス（例ico_bt01など）を表示させたいサイドバーやウェルカムボードに書き込む。空タグになります。例）<div class="ico_bt01"></div> ただ、cssスプライトは中身のない空のタグを使用することになります。画像のようにaltタグにキーワードを入れることができないため、seoでは不利になるともいわれています。アメブロとはいえ気になる方は、ちょっとした見出しの装飾程度にとどめたほうがいいかもしれません。