MJ初段で逃亡したNSです。
すこやんの記事の続きを書きたいのに、雑記みたいなのが続いてしまい申しわけないです。
今回の記事もすこやんとは関係ない、本当ならブログカテゴリにすべき内容なのですが、咲-Saki-要素をごり押ししつつ行ってみたいと思います。すこやんだいすこ！
なお、HTMLやCSSについてある程度知識のある方には噴飯ものの内容かもしれませんので、ウェブデザイン？歴３ヶ月のNSと同レベルな感じの方にしか、閲覧はお奨めできません。
さて、咲-Saki-の記事を書くとき、麻雀牌の画像を表示するわけです。NSの場合、何の分析もできないくせに、なんかカッコいいですし！カッ ユキちゃんかわいい
しかし、それが結構大変だったりします。弊ブログでは右のサイドバーにリンクが貼ってあるアンコロ牌画という素晴らしいデザインの牌画を、無償で使わせて頂いているのですが、たとえば先日の記事 咲-Saki-第140局[攻防] 削り合い で絹ちゃんが和了ったところ。絹ちゃんかわいい
画像
ﾛﾝ
タグコード
<a href=”http://negative4sugar.blog.fc2.com/img/p2.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p2.gif” alt=”二筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p3.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p3.gif” alt=”三筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p3.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p3.gif” alt=”三筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p3.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p3.gif” alt=”三筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p4.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p4.gif” alt=”四筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p5a.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p5a.gif” alt=”赤五筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p6.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p6.gif” alt=”六筒” border=”0″ width=”21″ height=”29″ /></a> <a href=”http://negative4sugar.blog.fc2.com/img/p1.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p1.gif” alt=”一筒” border=”0″ width=”21″ height=”29″ /></a><span style=”font-size:x-small;”>ﾛﾝ</span> <a href=”http://negative4sugar.blog.fc2.com/img/p4.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p4.gif” alt=”四筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p4.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p4.gif” alt=”四筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/y_p4.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/y_p4.gif” alt=”倒四筒” border=”0″ width=”28″ height=”22″ /></a> <a href=”http://negative4sugar.blog.fc2.com/img/y_p9.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/y_p9.gif” alt=”倒九筒” border=”0″ width=”28″ height=”22″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p7.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p7.gif” alt=”七筒” border=”0″ width=”21″ height=”29″ /></a><a href=”http://negative4sugar.blog.fc2.com/img/p8.gif/” target=”_blank”><img src=”http://blog-imgs-78.fc2.com/n/e/g/negative4sugar/p8.gif” alt=”八筒” border=”0″ width=”21″ height=”29″ /></a><br />
発狂してもいいですか？
まあアルバムへのリンクとか、要らないタグや省略できるプロパティも含まれてるから削れる部分があるとは言え、めげたい投げたいつらいつらい末原さんかわいい
さらにもうひとつの問題があります。上の上埜さんかわいい和了形を表示するためだけに、牌の枚数と同じ、14回ものサーバーへの読み込みリクエストが発生するということです。
サイズは小さくても、リクエストが多ければサーバーへの物理的な負担が増え、これにアクセス数をかけたぶん、「重く」なるのです。幸か不幸か弊ブログにはそんな事態は起こらないと思いますが…ワハハー
とにかく決して広くはないエディタウィンドウがHTMLタグに占拠されて、本文が肩身を狭くして縮こまっている、そんな環境をなんとかしたいと思い至ったわけですよフナQかわいい。
で、いろいろ調べたり自分で考えたりする中で、スプライトという技を知ったのです。アイコンなどの、小さくて頻繁に使われるウェブアイテムの画像を１枚の大きな画像ファイルにまとめてしまう。するとそのぶんの全画像の読み込みは一回で済み、あとはその情報は端末のメモリ上でやり取りされるので処理が速くなる。メンテナンスが面倒、というデメリットはありますが、ユーザーとしてブログに手軽に牌画を書き込めるメリットの方がはるかに大きい。
やってみようそうしよう。
では、以下は具体的な手順です。
- 牌画のデータを入手する
ネットで無料で手に入る、麻雀牌のフリー素材をダウンロードします。GIFかPNG、透過性のもの。JPGはNGです。利用規約をよく確認し、クリエイターの方にきちんとお礼を言いましょう。
- 牌画のデータをスプライト画像に変換する
無料で変換してくれる便利なサイトがあります。
CSS Sprite Generator
必要な画像をzipに圧縮してアップロードすると、１枚のスプライト画像とCSSコードを一瞬で書き出してくれます。
Sprite Pad
NSはこちらのお世話になりました。
サイトの作業ウィンドウに画像をドラッグ＆ドロップして配置します。
手作業なので時間はかかりますが、自分好みの配置にできるのが魅力。
はやりやはりCSSコードを自動生成してくれます。はやりんかわいい
はやっ☆↓79枚の画像ファイルが、１枚に収まっています☆
- スプライト画像をアップする
自分のブログ/HPのサーバーに、完成したスプライト画像をアップロードします。
- スタイルシートをカスタマイズする
ブログのスタイルシートに、牌画用のCSSコードを書き込みます。既存のセレクタコード(この場合クラス、つまりピリオドで始まるセレクタ)群のいちばん下にでも挿入すればOKです。各牌のコードは2.のサイトで書き出してくれますが、これは座標など個別のプロパティしか定義していないので、全ての牌画の表示を制御するために、以下のコードを自分で書きます。
.ancoro {
display:inline-block;
background:transparent url(http://・・・) -1000px -1000px no-repeat;
vertical-align:bottom;
text-indent:-9999px;
}黄色のマークは半角スペース、赤字の部分は3.でアップしたスプライト画像のURLです。
これは共通プロパティなので、各牌のCSSコードに追加しても同じことです。ただ、そうすると全体のコード量が倍になってしまいます。それにブラウザがスタイルシートを読み込むときに、79回も同じスプライト画像のファイルにアクセスすることになり(まあ実際はキャッシュ参照とかするのかもしれませんが)、いろいろ非効率な気がするので、共通部分だけ別のクラスとして定義しています。
なお、上のancoroというクラス名は、既存のものと被らなければ、何でも構いません。
ちなみに2.のサイトで書き出してくれる牌のCSSコードがどんなものかというと、こんな感じ。.tile_ton{
background-position: 0 -90px; /*スプライト画像内の座標*/
width: 21px; /*牌の表示領域の幅*/
height: 29px; /*牌の表示領域の高さ*/
}tile_tonはを表すクラスの名前で、これも任意に名づけて構いません。79種類の牌すべてに、同様のコードが生成されていますから、上のancoroと合わせ、計80クラスとなります。
実際にスタイルシートに書き込むときは改行などせず、1牌１行にまとめた方が見易いかもしれませんね。 - 文章に牌画を使ってみる
画像とスタイルシートの準備ができたところで、牌画を表示させるためのHTMLタグを書いてみます。
使用するタグはspanです(aタグでリンク用のアイコンのような使い方もできます)。
その下準備として、例えば <span class=”ancoro tile_”></span> という文字列を辞書登録しておきます。NSは「すこ」で登録しました。////
ancoro tile_xxxのxxxの部分に牌の種類を表す記号を書き入れます。白ならhakとか一索ならs1とか、4.で定義したクラス名になるように。
エディタで <span class=”ancoro tile_s1″></span> と書けば、ブラウザにはが表示されるというわけです。いちいち画像挿入のサブメニューを呼び出さなくてもよくなりました。とても快適ですね。
では、この方式で上の絹ちゃんの和了形をもう一度書いてみます。絹ちゃんかわいい画像
ﾛﾝ
タグコード
<span class=”ancoro tile_p2″></span><span class=”ancoro tile_p3″></span>
<span class=”ancoro tile_p3″></span><span class=”ancoro tile_p3″></span>
<span class=”ancoro tile_p4″></span><span class=”ancoro tile_p5a”></span>
<span class=”ancoro tile_p6″></span> <span class=”ancoro tile_p1″></span>ﾛﾝ
<span class=”ancoro tile_p4″></span><span class=”ancoro tile_p4″></span>
<span class=”ancoro tile_y_p4″></span> <span class=”ancoro tile_y_p9″></span>
<span class=”ancoro tile_p7″></span><span class=”ancoro tile_p8″></span>どうすか。シロかわいい
最初のよりずいぶんスッキリしましタネ。メグでかい
いろいろ応用できる技術なので、興味のある方はトライしてみてはいかがでしょうか。
一緒に楽しもうよ！咲さんかわいい
最後になりましたが、牌画スプライト作成と本記事執筆に当って、以下のサイト様の記事がとても参考になりました。
ここに記して御礼申し上げます。
ウェブサイト作成入門>CSSの小技集>CSSスプライト。
