Page 2 of 3 作成ツール編
2016年5月の時点で暗号化接続に未対応なのでリンクを削除
オイラが CSS Sprites 作成に使っているツールです…
お馴染みの会社ですね…
勿論無料でダウンロードできます…
インストール、起動して…
ドラッグ & ドロップで画像を追加していきます…
手動で並べ替えが出来ますので…
余白を最小限に抑えられます…
完了したら「File」「Save」で「任意の名前.ttd」を作っておきましょう…
あとで画像を追加、削除したくなったら…
このファイルをウインドウにドロップすれば…
現在の状態を復元してくれます…
「File」「Export」をクリックすると…
「sprite.png」「sprite.css」「sprite.html」が出力されます…
「sprite.html」は必要ありません…
実寸は…
右、下に余白を設けているので 858 x 522 です…
１０３個の画像を１枚にまとめてあります…
お好きな場所にホストして下さい…
Blogger用の外部ファイル保存場所として「GitHub」の「GitHub Pages」を活用しよう
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Google Drive」
Blogger用のファイル保存場所としてのクラウド型オンライン ストレージ「Dropbox」
Google Blogger用のファイル保存場所としてのGoogle sites/Picasa
そのままでもかまいませんが…
「id」で定義されているのを「class」に…
つまり…「#」を「.」に変えています…
メモ帳で開いて…
「編集」「置換」で「#」を「.」に「すべて置換」して下さい…
マークアップの都合上…改行させないために…
display:inline-block を追加して…
余分な部分を削除しています…
「デザイン」「HTML の編集」から CSS の NavBar の上に記述しておきます…
勿論…外部ファイル化して読み込ませても OK です…
BloggerのCSSを外部ファイル化する方法とJavaScript/CSS圧縮ツール
これで準備完了ッ
もう一つ…例えばフォトアルバムのように…
画像の大きさがほぼ同一でテーマ毎にまとめたい…
なんて時は…
2016年5月の時点で暗号化接続に未対応なのでリンクを削除
…が、お便利です…
画像を zip に圧縮してアップロードするだけのお手軽さです…
オフセットは画像の間隔ですが…
残念ながら「0」にするとエラーです…
OptiPNG で画像を圧縮も出来ちゃいます…
出来あがったら CSS ルールを追加するのをお忘れなく…
まぁ…日本語なので説明はこの位にしときます…
次項は…マークアップの方法です…
0 Comments :
View Comments :: Click!!
0 Comments :
Post a Comment :: Click!!
コメントを投稿