ゲムマを振り返って(ただしゲームではない)


しんく顔アイコン_小.jpg

この記事はゲームについてではありません。

ゲームマーケット2017秋も、どうにか無事に終わりました。
【両-B052】クリエイティブブースへ足を運んで頂きありがとうございました。
『毒の王冠 第2幕』と『オールゲーマーズ』は、しっかりとゲットできましたか?
どちらも、この秋(公式が秋だというので、秋と言いはっておきます)イチオシの作品となっております。

さっそく、『オールゲーマーズ』の委託がconosさん(https://conos.jp/)開始されました。
すべてのアナログゲームとアナログゲーマーの架け橋となるべく、これからも頑張っていきますので
どうぞご支援の程、よろしくお願いいたします。

販売ページへは下のバナーをクリック!!


はい、お知らせはここまで(笑) 本題に入って行きましょう。私がこのページでゲームマーケットについて語るとなると、ゲームマーケット公式サイト上にで出展者に開放されている『ゲムマブログ』についてです。
2日開催になり、更なる出展者数が増えたことでより管理が大変になったようで。
しかも、それ以外にも色々と悪質な使い方をする人もいらっしゃったようで……いくつかの規制が通達されました。
それに関しては、「運営様、ご苦労様です!!」ただこれだけです。

今回も、恐る恐る仕様を確認しながらトライ&エラーで記事をCSSで装飾しています。これまでは「キチンと数字を決めた段組レイアウト」でしたが、前々回からゲムマブログに取り入れられたレスポンシブWebデザイン(どんな画面サイズの端末で見てもホームページが見栄え良く見えるデザイン)には相性が最悪です。

そのため、ゲムマブログの仕様を確認しつつ今回のようなレイアウトを考えてみました。まずは仕様を復習してみましょう。
下のボタンをクリックすると、ビローンと過去調べた仕様が表示されます。


記事の表示幅
680px(ピクセル)
表記の諸注意
  • ツール側で自動的に<p>タグと<br>タグが入るようになっています。想定しているレイアウトからズレが生じる場合が、js形式のminファイルのように、改行や行間を削除することをオススメします。
  • タグ内にstyleを表記する際、最後のスタイル設定に「;」を付ける必要はありません。ツール内で自動的に最後だけ「;」が付いてしまうので、二重表記エラーでstyleが機能しなくなります。
  • コメントアウトタグが<p></p>タグへ自動置換される事があります(前例あり、今はその仕様は削除されているようですが復活する可能性有り?)。
  • デザインのズレがどうしても直せないときは、ブラウザ内蔵のデベロッパーツール(開発ツール)でソースコードを確認してみてください。
HTMLのバージョン
Ver5準拠
アップできる画像
jpg形式
png形式
gif形式(アニメーションgifも可)
利用可能な
メディア・サービス
ニコニコ動画
YouTube
PDF形式ファイル
自前のレンタルサーバーにアップした音声データ(ゲムマブログにはアップできない)
禁止されているHTMLタグ
<iframe>
<script>
<video>
禁止されているcss
  • position
  • font-familyの一部(全角フォント名?)
  • background-image関連
  • background(簡略表記全般)
  • border-radiusなどのCSS3から導入された丸みを付けるなどの装飾命令
  • writing-modeなどのCSS3から導入された書式に関する命令
  • -webkit〜で始まる命令すべて

思い出してきましたか? 私も思い出しました。そして、レスポンシブWebデザインに対応させるべくCSSを確認していたときに、重要なCSSが利用できないことが判明しました。

禁止されているcss
  • flexbox関連全般

FlexboxはCSS3から導入されたもので、画面サイズによって変動するレイアウトをつくる際にはFlexbox内で配置が動いたりするフレシキブルさを発揮するには最適なCSSです。それが使えません。
運営のチェックがしっかりしております(笑) 間違ってタグを閉じ忘れた日には、サイト全体に影響をあたえたりしますからね。
そうなってくると、これまでのようにテトリス風に大きな箱の中へ小さな箱を敷き詰めると言った類のレイアウトが一切できなくなります。
…………
……

レスポンシブデザインをする際にこれまで気をつけておく事は『幅やフォントサイズの値を固定にしすぎないこと』
後々、調べていたのですが%より「rem」という単位の方が綺麗に縮小拡大をしてくれるとのことです。remは他の単位と違い、一番ルートhtmlタグやbodyタグに設定されている値を継承して拡大や、縮小を行います。
これを利用する事で、CSSを適用した要素が入れ子構造になっていても、徐々に文字サイズが小さく(または大きく)なる問題は起こりません。文字サイズを割合で指定した複数のボックスを重ねてレイアウトしていても、どれくらいの文字サイズで表示されるのかが簡単に把握できます。
どんどん便利になっていきますね。

敷き詰めるレイアウトの替わりに考えたのが、外枠一杯の要素を上から順に敷き詰めていく……名付けたら「積層レイアウト」と言ったところでしょうか? 本当はちゃんとした名前があったりするかもしれませんが……まぁ、適当なレイアウトです。画像に関しては、素材をアップロードして記事内容に挿入した際に「width」「height」「class」をテキスト編集モードにして消す事で、フレシキブル対応になります。ゲムマブログの場合は、680ピクセルが目安なので画像が編集できる方はそれぐらいの大きなモノを用意するようにしましょう

いつものように、ゲムマブログに投稿した内容をさらしてみます。今回から、コピーしやすい仕組みを導入してみました。ゲムマブログで投稿する際にレイアウトに困ったら、是非テキストや画像を入れ替えて使ってみてください。

何やら、今後ゲムマブログを含めたWebサイト改修があるようです。また、仕様がガラッと変わってくるんでしょうかねぇ?? どーなることやら

コメントを残す

メールアドレスが公開されることはありません。

コメント

お名前

ウェブサイトURL