loading...

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブログ名を変更しました

新名称は路麓の人萬一(ろろくのひと・よろづはじめ)です!
新サイト一萬人の麓路()と名前が似ている状態を解消したかったのです。

せっかく作っていただいたヘッダーを活かしたいと思いまして。
「一行一字縦書き」の国語の正格から外れることになるのは残念ですが…
こちらのサイトでは、管理人は萬一と名乗ります。

以上、御報告まで
スポンサーサイト

こっそり再開

引越し後一年以上更新していないこちらのブログ。

FC2の不祥事がきっかけでライブドアの方に移ったんですが、
なんやかやでアクセス解析とかでもお世話になり続けていますし
閉鎖するのももったいないので、しれっと戻ってきました。

久しぶりに管理画面に入ろうとしたら自動ログインが無効になっていて、
やっと当時のパスワードのメモを見つけたと思ったらパスワード変更を強制されて、
新しいパスワードでログインしようとしたらパスワードが間違ってますと言われて、
・・・
まあいろいろ苦労してやっと管理画面に入れました。
投稿画面がおしゃれになっていてびっくり。
引越し先とは違う感じの記事を書いて行けたらなと思います。

具体的には何も固まっていないんですが、咲-Saki-以外の好きな漫画の話とか…将棋の話とか…
いや全然違う流れになるかもしれないし
何も決めず、書きたいときに書きたいことを書く、そんな感じで。

【お知らせ】前に向かうために…一旦あぽーん

リニューアル前からだと約四か月間、弊ブログがお世話になったFC2ブログ様ですが、
いろいろ使い勝手の面で不要な消耗を強いられることが多く、割と以前から引っ越ししたいと思っていたところ、
先日の報道をきっかけに、決心がつきました。
この桜をモチーフにしたテンプレートはとても気に入ってたんですケド…

引っ越し先はライブドアブログ様になります。
ブログタイトルは 一萬人の麓路() にしました。仮です。

URLはコチラ→http://humotomiti.blog.jp/

記事と画像のエクスポートは完了しました。
あとは細かい調整と、必要なカスタムコードやプラグインを手作業で移植していくだけですが、かなり日数がかかりそうです。143局の記事までに終わるといいなあ…



生活の中で、思わず出てしまう咲-Saki-フレーズ

saki-004-173-05(033).png

本編休載中に、いかに咲-Saki-成分を自給するか。
グッズや巡礼という選択肢(マニー)が無い時、いやある時でも。
リアルの中で、咲-Saki-のセリフを使って生活する。
それは生存本能みたいなものなんすよね。

いやほんと今更なネタで申しわけないんですが...



[東] 起床時「うぅ…みなも……さかな……」

atiga-006-068-03(16).pngこれはさすがに皆さんもやられてることと思います。
仮にお腹の上に幼女お姉さんが乗っていない状況でも不自然には聞こえない、汎用性の高いフレーズと言えます。

和の「あと少しだけ…………」は二度寝の時に言ってみたいんですが、全部再現するうちに頭が冴えてしまい二度寝にならないので、難易度高くて、まだ成功したことはありません。



[南] 食事時「おいしい~~~~っ」

saki-004-197-04(hwtr).pngハミレスでタルタルたっぷりエビフライを食べたころたんの第一声。
顔も作るのがポイント。そう!それ大事!
ただ、家で一人のときにしかやりません。
不気味ですね。



[西] 家を出る時「階前万里――透華はいつも心早すぎる」

saki-002-195-03(015).pngこれも衣ですが、原作の右のセリフがアニメで改変された部分ですね。
大将戦前にハギヨシが迎えに来て、川べりに座っていた衣が立ち上がる時、僅かによろめきます。
こころばやのあたり。
福原香織さんはそのかすかなよろめきを声で表現していて、上手いなーと感心しました。
そもそも、アニメでこんな細かい演出入れてくるスタッフ何なの…
彼らへの敬意も込めつつ、玄関で靴を履くとき、わざと少しよろけて、このセリフを言います。
大丈夫です。



[北] 可愛く見られたい時「ねぇ○○ケド…」

saki-008-189-02(fksk).png若くもなければ女の子でもない、それでも可愛く見られたい――そんなシチュエーションってありますよね。

ありますよね。

そんな時はぜひ、すこやんに倣え、という諺を思い出して下さい。
ねぇちょっとあの店寄って行きたいんだケド…、のように使います。
ケド…の部分を気持ち可愛く言ってみるだけ。簡単です。
相手が引き気味でも挫けないことがコツかナ。
当然ながら、実際に可愛くなるわけではありません。
でもやらずにはいられないわけで。
心は痛いです。



[白] 運転時「ワハハー」

saki-007-119-04(057).pngNSは常に安全運転を心掛けていますが、高速の追い越し車線に入るときだけは言ってしまうぞー
あ、ワハハカーって左ハンドルだったんですね。
さっき初めて気がつきました。



[發] たくさんある時「○○、沢山よー」

saki-009-067-01(075).pngたくさんある時に使います。



 *ウラも乗ってる感じで



[中] 食事時(2) 「ハハ ザコばかりで笑える」



???「ジャコだけどね(ズバァ!」

???「おいしいよ!お食べ!

NSの今日の朝御飯でした。


saki-004-197-04(hwtr).png



一枚画像での牌画表示

MJ初段で逃亡したNSです。
すこやんの記事の続きを書きたいのに、雑記みたいなのが続いてしまい申しわけないです。

今回の記事もすこやんとは関係ない、本当ならブログカテゴリにすべき内容なのですが、咲-Saki-要素をごり押ししつつ行ってみたいと思います。すこやんだいすこ!
なお、HTMLやCSSについてある程度知識のある方には噴飯ものの内容かもしれませんので、ウェブデザイン?歴3ヶ月の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かわいい

で、いろいろ調べたり自分で考えたりする中で、スプライトという技を知ったのです。アイコンなどの、小さくて頻繁に使われるウェブアイテムの画像を1枚の大きな画像ファイルにまとめてしまう。するとそのぶんの全画像の読み込みは一回で済み、あとはその情報は端末のメモリ上でやり取りされるので処理が速くなる。メンテナンスが面倒、というデメリットはありますが、ユーザーとしてブログに手軽に牌画を書き込めるメリットの方がはるかに大きい。
やってみようそうしよう。

では、以下は具体的な手順です。

  1. 牌画のデータを入手する

    ネットで無料で手に入る、麻雀牌のフリー素材をダウンロードします。GIFかPNG、透過性のもの。JPGはNGです。利用規約をよく確認し、クリエイターの方にきちんとお礼を言いましょう。


  2. 牌画のデータをスプライト画像に変換する

    無料で変換してくれる便利なサイトがあります。

    CSS Sprite Generator

    必要な画像をzipに圧縮してアップロードすると、1枚のスプライト画像とCSSコードを一瞬で書き出してくれます。


    Sprite Pad

    NSはこちらのお世話になりました。
    サイトの作業ウィンドウに画像をドラッグ&ドロップして配置します。
    手作業なので時間はかかりますが、自分好みの配置にできるのが魅力。
    はやりやはりCSSコードを自動生成してくれます。はやりんかわいい
    はやっ☆↓79枚の画像ファイルが、1枚に収まっています☆

    SP_ancoro_blue.png

  3. スプライト画像をアップする

    自分のブログ/HPのサーバーに、完成したスプライト画像をアップロードします。


  4. スタイルシートをカスタマイズする

    ブログのスタイルシートに、牌画用の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行にまとめた方が見易いかもしれませんね。


  5. 文章に牌画を使ってみる

    画像とスタイルシートの準備ができたところで、牌画を表示させるためのHTMLタグを書いてみます。
    使用するタグはspanです(aタグでリンク用のアイコンのような使い方もできます)。
    その下準備として、例えば <span class="ancoro tile_"></span> という文字列を辞書登録しておきます。NSは「すこ」で登録しました。////
    ancoro tile_xxxxxxの部分に牌の種類を表す記号を書き入れます。白なら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>

    どうすか。シロかわいい
    最初のよりずいぶんスッキリしましタネ。メグでかい
    いろいろ応用できる技術なので、興味のある方はトライしてみてはいかがでしょうか。
    一緒に楽しもうよ!咲さんかわいい


最後になりましたが、牌画スプライト作成と本記事執筆に当って、以下のサイト様の記事がとても参考になりました。
ここに記して御礼申し上げます。

  ウェブサイト作成入門>CSSの小技集>CSSスプライト。



nocturne
最新記事
最新コメント
タグ検索

FC2 アクセスランキング
[ジャンルランキング]
アニメ・コミック
5834位
アクセスランキングを見る>>

[サブジャンルランキング]
その他
1067位
アクセスランキングを見る>>
はてなブックマーク
アクセスカウンター
現在の訪問者数
総訪問者数
カレンダー
プルダウン 降順 昇順 年別

08月 | 2017年09月 | 10月
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
記事検索
カテゴリ
RSSリンクの表示
リンク
すこやんコーナー
諸国日和


-天気予報コム- -FC2-
プロフィール

萬一

Author:萬一
いろいろやりたいけれど時間がない。
才能がない。
でものほほんと生きよう。

メール

名前:
メール:
件名:
本文:

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。