2017年1月25日水曜日
最近のホームページ制作ではネット回線速度の改善などであまり使われなくなった、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をクリック

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

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では不利になるともいわれています。アメブロとはいえ気になる方は、ちょっとした見出しの装飾程度にとどめたほうがいいかもしれません。関連記事
-
-
格安スマホのSIM事業者が分からなくなったときの解決方法
具体的な依頼内容 SIM事業者を調べるために試した方法 SI ...
-
-
WordPressとは?
WordPressを使ってブログ、サイトを制作すると、簡単に ...
-
-
ブックレビュー「サイバーセキュリティ読本」
一田和樹さん執筆の「サイバーセキュリティ読本」を読みましたの ...
-
-
JR福知山線廃線敷生瀬~武田尾の紅葉ハイキング
JR福知山線「宝塚」駅の隣の駅「生瀬」駅近くのJR福知山線廃 ...