何があと一ヶ月なのか。
あっ…(無慈悲な察し(ry
では、運命の4月12日にむけて、できることを、していこう……
【謹記】本記事公開から約40分間、管理人NSの不手際により誤った情報が掲載されました。当該部分を削除し、関係者及び閲覧者の皆様にお詫び申し上げます。(06:28)
ロン
<a href="http://negative4sugar.blog.fc2.com/img/p2.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/4/7/4723c4d6.gif" alt="二筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p3.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/0/2/0220dfa6.gif" alt="三筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p3.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/0/2/0220dfa6.gif" alt="三筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p3.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/0/2/0220dfa6.gif" alt="三筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p4.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/c/0/c0a38b22.gif" alt="四筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p5a.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/d/e/decf25c0.gif" alt="赤五筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p6.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/3/d/3de19ae8.gif" alt="六筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p1.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/0/1/010624f4.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="https://livedoor.blogimg.jp/nsforscoyan/imgs/c/0/c0a38b22.gif" alt="四筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p4.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/c/0/c0a38b22.gif" alt="四筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/y_p4.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/9/5/95a1ecc3.gif" alt="倒四筒" border="0" width="28" height="22" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/y_p9.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/3/d/3df2132e.gif" alt="倒九筒" border="0" width="28" height="22" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p7.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/d/0/d0fc99a4.gif" alt="七筒" border="0" width="21" height="29" /></a>
<a href="http://negative4sugar.blog.fc2.com/img/p8.gif/" target="_blank"><img src="https://livedoor.blogimg.jp/nsforscoyan/imgs/9/c/9c10c0eb.gif" alt="八筒" border="0" width="21" height="29" /></a><br />
ネットで無料で手に入る、麻雀牌のフリー素材をダウンロードします。GIFかPNG、透過性のもの。JPGはNGです。利用規約をよく確認し、クリエイターの方にきちんとお礼を言いましょう。
無料で変換してくれる便利なサイトがあります。
必要な画像をzipに圧縮してアップロードすると、1枚のスプライト画像とCSSコードを一瞬で書き出してくれます。
NSはこちらのお世話になりました。
サイトの作業ウィンドウに画像をドラッグ&ドロップして配置します。
手作業なので時間はかかりますが、自分好みの配置にできるのが魅力。
はやりやはりCSSコードを自動生成してくれます。はやりんかわいい
はやっ☆↓79枚の画像ファイルが、1枚に収まっています☆
自分のブログ/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牌1行にまとめた方が見易いかもしれませんね。
画像とスタイルシートの準備ができたところで、牌画を表示させるためのHTMLタグを書いてみます。
使用するタグはspanです(aタグでリンク用のアイコンのような使い方もできます)。
その下準備として、例えば <span class="ancoro tile_"></span> という文字列を辞書登録しておきます。NSは「すこ」で登録しました。////
ancoro tile_xxxのxxxの部分に牌の種類を表す記号を書き入れます。白ならhakとか一索ならs1とか、4.で定義したクラス名になるように。
エディタで <span class="ancoro tile_s1"></span> と書けば、ブラウザにはⅠが表示されるというわけです。いちいち画像挿入のサブメニューを呼び出さなくてもよくなりました。とても快適ですね。
では、この方式で上の絹ちゃんの和了形をもう一度書いてみます。絹ちゃんかわいい
②③③③④⑤⑥ ①ロン ④④④ ⑨⑦⑧
※スマホやケータイではbackground属性の画像を表示できないことがあるので、<span・・・></span>タグの間に代替テキストを挿入しておきます。赤字の部分は、⑤を赤くして赤五筒であることを示すための記述です。(3/16追記)
<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 style="color:red">⑤</span></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>
どうすか。シロかわいい
最初のよりずいぶんスッキリしましタネ。メグでかい
いろいろ応用できる技術なので、興味のある方はトライしてみてはいかがでしょうか。
一緒に楽しもうよ!咲さんかわいい
自分で作った方が気持ちが入るヨ!
なお、高浜がすこやんの実家の舞台であることは、仮想と現実の真ん中あたり様の、以下の記事で知ることができました。
管理人USO9000様の、僅かなヒントから論理と知識を武器にみるみるうちに舞台を特定していく手際はお見事というほかありません。こうした先人の業績に、心から敬意を表したいと思います。