「IRC」タグアーカイブ

一年で記事を２２７個投下

やあ、「aoringo works」もついに一周年が経過いたしました。ありがとうございます。ありがとうございます。

現時点で総記事数２２７という中々に良い数字となりました。ほぼ日刊という形でしょうか。まあよくもここまでこれたなあと自分では思います。

今回から数回にわけて、一周年の振り返りをしたいと思いますよ。

書評サイトとしてスタート

元々は書評サイトとしてスタートしました。クリエイターズネットワークさんのブログスペースサービス開始に合わせての始動、といった感じでしょうか。同時にいくつかのサイトを始動させ、経過を観察。

クリエイターズネットワーク

今でも書評は続けており、一カテゴリ、一コンテンツとして収まっています。

プログラムを始める

サイトを運営し始めて数ヶ月たったくらいから、デザイン、機能もろもろに不満が出始めます。

微妙に使いづらいなあ。そうだ、じゃあ自分で作ればいいんだ。

まあそんな感じで即本を買い込み勉強を始めます。ここから一ヶ月ほどブログ運営を停止、プログラムに熱中してました。

そこからは自分の欲しい機能を持ったプログラムをほぼ日刊で製作し続け、サイトの性質もここで「書評＆プログラムサイト」へと変化していきます。

チャットログを整形するaoringo chat logmakerの製作

時を同じくして、IRCチャットログを吹き出し状に整形するプログラムを作り、ブログに取り込みました。これがその後「chat logger」へと変化します。

aoringo CHAT logger

ここくらいから、TRPG界になんとなく足を踏み入れます。どどんとふの存在をしり、セッションマッチングサイト「セッションマッチングシステム」を共同製作します。

TRPG.NET セッションマッチングシステム

この時点ではまだＴＲＰＧを実際に遊んでません。受注し、提供している状況です。その後も色々作っていく中で、そろそろＴＲＰＧを遊んでみたいな。と思うようになります。

TRPGを遊び始める

実際にTRPGを遊び始めたのはプログラムを始めてから五ヶ月程度後。ブログ開始時からは七ヶ月程度経ってから。割と貪欲にシステムにとらわれず色々遊んでおりました。

ここくらいからサイトの性質が完全によろず屋状態に。カテゴリごとに完全に分かれた形なりはじめます。デザインも八月手前くらいに今のデザインに落ち着きました。

今に至る

そうして今に至ります。実際の文章より現実はもっとカオスなんですが、大体こんな感じですよ。プログラムを提供したり、思い立ったら色々作っていたりします。結果としてこんなへんてこなサイト状態になりましたが、私らしくていいかなと思っています。

統一することは怖いことじゃない

一つのブログに色々な要素を詰め込むことは、基本的には利用者を迷わせてサイト自体が迷宮化すると言われています。

しかし、カテゴリをきちんと整理し、トップページからの導線を考えれば、私はそんなことはないと考えています。今後も新しい趣味や計画が始動したとしても、このサイトを中心に活動していく事でしょう。目指せライフログブログ。そんな感じですよ。

html

TRPGのリプレイに最適なCSSスタイルを考える

2013年7月13日 aoringo12

タイトル通りです。

CSSってのは、HTMLの見た目をエレガントにカッチョウヨクデザインする事の出来る特別な文法であります。この機会に勉強するのもよいでしょう。

この記事では、CSSはある程度理解しているという前提に立ち考えていこうかと思いますよ。

pre か p か dl か。

まずどのHTMLタグを使用してデザインをするのか、選定をしていかないといけませんね。

テキストをそのまま持って来るという意味で、一番簡単なのが「pre」タグです。

<pre>
改行なんかも気にせずいけるもんね
わーいわーい
</pre>

↓

brタグなんかを利用しなくてもそのままコピペでいけちゃいますね。ただ、問題点もあります。

それは各行のデザインをする事が出来ないということ。無難なテキスト丸出しなのでションボリーにな感じになりがちです。

二つ目、「dl」タグです。これは辞典などの項目に用いられますね。

<dl>
 <dt>PC1</dt>
 <dd>あいうえお</dd>
</dl>

↓

こんな感じです。見出しと内容でこのように分かれてくれるの比較的見やすい形になるし、CSSでスタイリングもしやすいです。

が、htmlタグを見ての通り、それぞれの項目をタグで包む必要があるので面倒くさいという点があります。

そんなわけで、今回私は「p」タグを利用することにしました。

このブログを作るのに利用されている「wordpress」では、普通に文章を打てば、吐き出されるhtmlデータは全て「p」タグで囲われているのです。

これを利用しない手はありません。

実際にデザインしていく

とはいっても特に難しい事は考えません。見やすい文章になるように細かく調整していくだけです。

<div class="replay">
 <p>ＰＣ１：テスト</p>

<p>ＧＭ　：テテスト</p>

<p>
 ＰＣ１：テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

<p>ＧＭ　：テ、テスト</p>
</div>

利用するテキストはこんな感じ。div.replayに囲まれた物のみに適応される形ですね。

素のままだとこんな感じ。

まず横幅を大体600pxにします。これは、横長になりすぎるとそれだけでストレスになる場合があるからですね。

読みやすい！

しかし折り返された文章が名前と被って読みづらい気もします。

そこで。

「text-indent」と「padding-left」を使用します。

text-indentは文章の一行目だけをインデントします。

p{
 text-indent:1em;
}

これで、

こんな感じになるわけですね。

じゃあこうしてみると？

p{
 text-indent:-3em;
 padding-left:3em;
 }

こんな感じで二行目以降にインデントする事が出来るわけですね。

他にも色々と装飾を乗っけて、見やすいTRPGリプレイを目指してみて下さいね。

軽く修正してみて最終的にはこんな形に。

<style type="text/css">
 body{
 max-width :600px;
 margin :0 auto;
 }

p{
 margin :0;
 text-indent :-4em;
 padding :10px 0 10px 4em;
 border-bottom :1px dotted gray;
 font-size :12px;
 font-family :monospace;
 }
 </style>