プレイ日記制作の注意点

はじめに

・このページは、プレイ日記の制作をhtmlで行いたい人向けに書かれてありますが、そうではない人も、画像関係は初めてプレイ日記を制作する前に見ておくといいかもしれません。

・プレイ日記をhtmlから制作される際は、レイアウトは原則としてガードリーダー隊長の作ったプレイ日記に倣ってください。

ロングソード連合の管理人はガードリーダー隊長です。「ロングソード連合はガードリーダーさんのサイトである」という意識は常に持ちましょう。
何かトラブルがあった場合、大変な思いをしたり責任を負う立場にあるのは隊長です。それは忘れないでください。

※なぜこのようなことを書いたのかというと、ロングソード連合はガードリーダー隊長一人で管理されているサイトなので、あまりにもレイアウトが他のプレイ日記と合わなかったり、データに不備があるものを送ったりすると、管理人である隊長の負担になってしまうからです。隊長の負担軽減のためにhtmlで送ったのに、負担が増えてしまった…なんてことにならないようにしましょう。

後援者の秋穂さんが、プレイ日記制作についてまとめて下さいました。

htmlの形式

・htmlは、html4.01で制作してください。
ガードリーダー隊長のホームページビルダーのバージョンが7で、これでサポートされているhtml言語がhtml4.01だからです。
html5.0以降定められた要素を使用しなければ、問題はないはずです。

・CSSは使用しないでください。
バックグラウンドの色指定は、CSSを使用せずbody backgroundのタグで行ってください。html5で非推奨となったタグですが、ロングソード連合プレイ日記はすべてこのタグが使われているので、そちらに従ってください。

・中央寄せのタグは、CSSで指定せず、<p align=”center”>のように指定してください。
同じく文字色の指定も、<font color=”#00ff90″>のように指定してください。

・テーブルを使用する際は、横幅を450~500ピクセル程度にしてください。
テーブルは、第721弾のようにアンケート結果の報告などでよく使われています。

画像

・原則として、JPEGかGIFで送るようにしましょう。PNGはブラウザによっては非対応です。
アイコン以外の画像は、GIFは表現できる色が少ないのでJPEGにするのがいいでしょう。

・アイコンのサイズは、原則的に横55ピクセル×縦66ピクセルとなっています。

このアイコンは横58ピクセル×縦66ピクセルです。
アイコンを作る際は、これより大きいサイズにならないようにしましょう。

・画像のサイズは、横幅が400ピクセルを超えないくらいの大きさにしましょう。縦も500ピクセルを超えない程度が望ましいです。
横300ピクセルくらいの、横長の画像がちょうどいいのではないでしょうか。

この画像は横394ピクセル×縦336ピクセルです。
あまりにも大きいと、隊長によって画像サイズの縮小という処置がとられます。JPEGは何度も修正すると画質が劣化するので、綺麗な画像を掲載してもらうためにも、あまり大きくないサイズで画像を準備しましょう。

・画像の解像度は、72dpiが望ましいです。ですが、極端に大きくなければ気にしなくていいです。

レイアウト

・中央寄せ、背景色は黒で文字色が灰色、という点に注意すれば、そこまで気を付けるポイントはありませんが、対話形式でのプレイ日記を投稿する際、キャラクターのセリフとセリフの間をある程度空けてください。
「会話三行、それ以外は一行空け」という形式で、隊長は日記を更新しているようです。

以下、会話文の例とそのソースを表記しました。参考になれば幸いです。

例1

 私がプレイ日記キャラクターアンケート1位の党員一号です。

 ……認めん、俺は断じて認めんぞ!!

このやりとりの、ソースはこのようになっております。

<p align=”center”><img src=”http://greystreets.com/wp-content/uploads/2014/07/touin.jpg”> 私がプレイ日記キャラクターアンケート1位の党員一号です。<br>
<br>
<br>
<br>
<img src=”taityou.jpg”> ……認めん、俺は断じて認めんぞ!!</p>

例2

 私がプレイ日記キャラクターアンケート1位の党員一号です。

 

 ……認めん、俺は断じて認めんぞ!!

このやりとりの、ソースはこのようになっております。



<p align=”center”><img src=”touin.jpg”> 私がプレイ日記キャラクターアンケート1位の党員一号です。</p>
<br>
<p align=”center”><img src=”taityou.jpg”> ……認めん、俺は断じて認めんぞ!!</p>

例1は隊長の形式、例2はalphaEDITなどで編集した形式になります。

文字色について

・Webセーフカラーと呼ばれる、216色の色の中から選べば、どのブラウザでもきれいに表示されます。
Webセーフカラーは検索すればすぐ出てきますが、文字コードを指定する際、00・33・66・99・cc・ffの数字で指定すればセーフカラーになります。
たとえば、
#cccccc#ff6633#66ff99、#㏄33ff…というように指定します。
#の後の左2ケタが赤、中央2ケタが緑、右2ケタが青となります。この組み合わせで様々な色を表現することが出来ます。
そのほかにも、redgreenblueといった指定をしても、該当の色を表示できます。興味のある方は、いろいろ調べてください。

・背景色が真っ黒なので、黒に近い色や濃い色を文字色にすると読みづらいです。強調するなどの目的で文字色を指定するときは、薄い色、たとえば水色やピンク、黄色を指定するといいでしょう。

その他

・画像をインターネットから探してくる際は、くれぐれも著作権を侵害していないか注意してください。

戻る