2016年06月30日

ゲムマブログ編集忘備録。

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

No.7:箱は箱の中に並べて敷き詰めて

どうも、思考です。ファミリーゲームフェスティバルも無事に終了しました。感想や反省はあれやこれやとありますが、そこは近日ラジオになるか別のブログで語られるかもしれません。
ちょっとブログ更新をお休みいただいて、おりゃーーーーーーっと書いていた別原稿もどうにか脱稿できました!!
AHCの刺客は一体何名紛れ込んでいるのやら?

 

はい、では本題。

 

箱を並べて敷き詰める?

前回、『大きな箱』の中に『中くらいの箱』を入れて、さらに『小箱』となる<div>タグを入れ子にしました。
ちょっと前回のソースを再度書いてみる事にしましょう(主に自分が思い出すためにですが……)

画面表示

大きな箱(ブログ記事の外側と同じサイズ)
中くらいの箱(章立て:商品タイトル画像)
中くらいの箱(章立て:探索者について)
小箱(探索者カードの紹介)
小箱(プレイ動画)
小箱(バックナンバー)
中くらいの箱(章立て:当日取扱商品)

HTMLコード(cssはあえて省略しています)
<div  style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ) <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:商品タイトル画像)</div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:探索者について) <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(探索者カードの紹介)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(プレイ動画)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(バックナンバー)</div> </div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:当日取扱商品)</div> </div>

今の状態は、少し大きさが違う箱を1つずつ上から詰めている状態です。

右側の画像の形になるよう『小箱』の中を仕切るには、引き続き<div>タグを使って行きます。

現実の箱を思い浮かべてください。仕切りたいのであれば、仕切り板を1つ真ん中に差し込めば完了です。板が無ければ、『小箱』の半分の幅ぐらいの箱2を並べてあげれば良いのです。

では、『小箱』<div>タグの中に追記してみましょう。ついでに、見えやすいように背景色も付けてみます。

教材はこれ
スクリーンショット 2016-05-19 18.36.39.png
画面表示

小箱(バックナンバー)

左側
右側
HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="width:50%;float:left;background-color:#d8c0ad;" > 右側</div> </div>

◆ width:50%

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="padding:20px;width:50%;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
外側の<div> タグに定義されている幅の50%を、スタイルを記述している<div> の幅と指定する。

ソースを書き足してみましたが、幅は小さくなっても横並びになっていません。どうして、こんな表示になるかというと

div_nakami.jpg

『小箱』の中に書いた<div>タグの横幅は半分として表示されますが、<div>タグは幅いっぱいに透明な領域が広がっています。このままでは、横並びにできません。では、この問題を解決するためにHTMLタグとスタイルを追記してみましょう。

画面表示

小箱(バックナンバー)

左側
右側
HTMLコード
<div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="width:50%;float:left;background-color:#d8c0ad;" > 右側</div> <div style="clear:both;" ></div> </div>

◆ float:left

画面表示

小箱(バックナンバー)

左側
HTMLコード
 <div  style="width:700px;margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > <p>小箱</p> <div style="width:50%;float:left;background-color:#cfe09d;" > 左側</div> <div style="clear:both;" ></div> </div>
解説
スタイルを定義した<div> タグを指定されている幅か、中のコンテンツ分の大きさにして「左寄せ」します。それ以外の要素を右側に回り込んで表示させます。

◆ clear:both

解説
このスタイルが定義さいれているHTMLタグより下は、floatの影響を受けません。

文字が横並びになっているかと思います。こうやって箱を並べて仕切りをつくっていくことで、レイアウトの外観を作成していきます。
このHTMLタグの最大の注意点は、「clear:both」を忘れずに記載することです。そうしないとデザインが崩れて、ゲムマブログ自体のレイアウトまで崩す大変な状態を引き起こしてしまいます。
良いですね? 「clear:both」を忘れてはいけません。

 

今回はここまで。そろそろ、他のHTMLタグについての説明をしていこうかと思います。引き続きよろしくお願いいたしますm(_ _)m

posted by AHC at 19:23| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年06月16日

ゲムマブログ編集忘備録。

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

No.6:divタグは続く

どうもぅ、思考です。ファミリーゲームフェスティバルまで……もう数日!? 6月も半分過ぎてしまったことにビックリです。
マッタリとゲーム制作も再開しておりますが、居眠りの街は「コミックマーケット(C90)」に落選してしまったので着地点をどこにしようかと……。どうしましょうね?

さて、そんなことを悩みながらお知らせを

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!

5月17日〜6月17日までファミリゲームフェスティバルの購入事前予約を現在受け付け中。

 

はい、では本題。

 

中くらいの箱を入れてみよう

前回は<div>タグについてと、ブログ記事の一番外側にあたる『大きな箱』に対してのCSSを書きました。その結果、どんな風になったかを改めて確認してみましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>

でしたね? では、第4回の最後にお見せしたような形にするため『中くらいの箱』をコレに加えてみましょう。

HTML的には、<div>〜</div>の中へ新たに<div>〜</div>を追加してあげるだけです。それだけだと、視覚的には見えないのでいきなりCSSも書いてしまいましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
中くらいの箱(章立て:商品タイトル画像)
HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
<div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;font-size:14px">
中くらいの箱
</div> </div>

落ち着いて、style属性に書かれているCSSを確認してみましょう。大きな箱のスタイルと大きな違いはありません。スタイルも1つずつ分解してみると……

  1. margin-top:20px;
  2. padding:20px;
  3. border:2px solid #3686a0;
  4. color:#3686a0;
  5. font-size:14px;

厳格にレイアウトするためには、『大きい箱』意外にも「width」のスタイルを入れておくと良いでしょう。ここで、初めて見かけるのは「margin-top:20px」だと思いますが、何の命令かはピンと来るかと思います

しかし、「margin」と「padding」はスタイルを見て行く中で最初に混乱しやすい場所でもあるので、ちょっと図にしてみようと思います

◆ margin-top:20px

paddingとmargin.jpg
HTMLコード
<div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;font-size:14px"> 
中くらいの箱
</div>
解説
<div> タグの外側の上部に「20px」の空白を設けます。

「margin」は外側の余白、「padding」は内側の余白です。これを忘れなければ大丈夫です!

とはいえ、ゲムマブログの中では一カ所だけその概念が通じない箇所があります。

これは、この連載の最終回付近で触れることになるかと思います。

 

ここまで理解できたら、『中くらいの箱』の中に小『小箱』を入れるのは簡単です。スタイルは『中くらいの箱』の色や文字サイズを変えるだけです。

是非、チャレンジしてみてください。

画面表示

大きな箱(ブログ記事の外側と同じサイズ)
中くらいの箱(章立て:商品タイトル画像)
中くらいの箱(章立て:探索者について)
小箱(探索者カードの紹介)
小箱(プレイ動画)
小箱(バックナンバー)
中くらいの箱(章立て:当日取扱商品)

HTMLコード(cssはあえて省略しています)
<div  style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ) <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:商品タイトル画像)</div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:探索者について) <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(探索者カードの紹介)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(プレイ動画)</div> <div style="margin-top:20px;padding:20px;border:2px solid #af9841;color:#af9841;
font-size:12px" > 小箱(バックナンバー)</div> </div> <div style="margin-top:20px;padding:20px;border:2px solid #3686a0;color:#3686a0;
font-size:14px" > 中くらいの箱(章立て:当日取扱商品)</div> </div>

今回はここまで。ここまでの内容がステップ1となります。

次回からは右の教材のように、<div>タグが横並びにするための命令から、他のHTMLタグも踏まえて、『小箱』の中を詳細に詰め込んで行こうと思います。

引き続き、よろしくお願いしますm(_ _)m

教材はこれ
スクリーンショット 2016-05-19 18.36.39.png
posted by AHC at 20:14| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年06月09日

ゲムマブログ編集忘備録。

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

No.5:CSSなんて怖くない

どうも、最近作業をするときはもっぱら「かもめ食堂」やら「マザーウォーター」をループ再生させている思考です。気付けばもうすぐファミリゲームフェスティバルです。
他のサークルさんの出展情報も増えてきましたねぇ〜。

ハイボールとビーフカツレツサンドイッチに想いをやや馳せながら(笑)、本題に入る前にお知らせを。

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!

5月17日〜6月17日までファミリゲームフェスティバルの購入事前予約を現在受け付け中。

 

はい、では本題。

 

いよいよ登場、CSS

前回、ざっくりと解説させていただいた<div>タグ。今回は、いよいよCSSを合体させていこうと思います。
説明が抜けていましたが、CSSは「Cascading Style Sheets」の略で、HTMLと組み合わせて使うことを前提とした言語です。
HTMLだけでは、ホームページを綺麗に見せるように設定(文字装飾やレイアウト整備、最近だとグラデーションなど)ができないので、CSSでそこを補って行きます。

前回記述したHTMLを再び書いてみることにしましょう。実際にCSSが入っていない状態だと、どういう風に表示されるかと言うと……。

画面表示

cssの無いhtml.png

HTMLコード
<div> 大きな箱(ブログ記事の外側と同じサイズ)
    <div> 中くらいの箱(章立て:商品タイトル画像)</div> 
    <div> 中くらいの箱(章立て:探索者について)
         <div> 小箱(探索者カードの紹介)</div> 
         <div> 小箱(プレイ動画)</div> 
         <div> 小箱(バックナンバー)</div> 
     </div> 
    <div> 中くらいの箱(章立て:当日取扱商品)</div> 
</div> 

ご覧の通り、<div>タグだけだと画面に表示される際は何の影響も及ぼしません。HTMLはあくまでも文章の構造を定義するものだから、ブラウザを通してもこのようになります。

では、ちゃんと可視できるようにしていきましょう。

HTMLタグには元となる効果(<div>タグの場合はグループ化)の他に、もっと詳細に設定を施すための「属性」というパラメーター群が存在します。例えば、フォントの大きさや背景の色を変更したり……。

属性の詳しい種類は、是非Google先生か書籍でご確認ください。

ゲムマブログで記事を書く&今回のお題であるHTMLとCSSを合体させるのに必要な属性は、ズバリ「style」です。

使い方は至って簡単<div>とタグを書いていたところを<div style="">と書きます。「""」の中にCSSを書くことで、HTMLとCSSは無事に合体します。

前回の表記を一部、合体した状態で記述してみるとしましょう。

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="margin-left:auto;margin-right:auto;width:500px;padding:20px;
border:2px solid #f00;color:#f00;font-size:18px;" > 大きな箱(ブログ記事の外側と同じサイズ)</div>

HTMLコードを見て、後ずさってしまった人がいるかもしれません。落ち着いてください! 深呼吸です!!
………
……

大丈夫ですね? では、これを分解してみましょう。
プログラムと思わずに、英単語を使った命令だと思ってください。そしたら、こんなのまったく怖くありません。
「大きな箱(ブログ記事の外側と同じサイズ)」は以下の6つの命令により成り立ってます。

  1. margin-left:auto;とmargin-right:auto;
  2. width:500px;
  3. padding:20px;
  4. border:2px solid #f00;
  5. color:#f00;
  6. font-size:18px;

順不同になってしまいますが、1つずつCSSを追加しながら解説していきます。

◆ border:2px solid #f00;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="border:2px solid #f00;" > 大きな箱(ブログ記事の外側と同じサイズ)</div> 
解説
「2px」の太さで線種「solid」の線を、「#f00」色で<div> タグに沿って表示する。

◆ width:500px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="width:500px;border:2px solid #f00;" > 大きな箱(ブログ記事の外側と同じサイズ)</div> 
解説
<div> タグの幅を「500px」と定義する

◆ padding:20px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部、上下左右を「20px」空ける

◆ font-size:18px;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="font-size:18px;padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部にある文字の大きさを「18px」にする

◆ color:#f00;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style=" color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" > 
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの内部にある文字の色を「#f00」とする

◆ margin-left:auto;とmargin-right:auto;

画面表示
大きな箱(ブログ記事の外側と同じサイズ)
HTMLコード
<div style="margin-left:auto;margin-right:auto;
color:#f00;font-size:18px;padding:20px;width:500px;border:2px solid #f00;" >
大きな箱(ブログ記事の外側と同じサイズ)
</div>
解説
<div> タグの外側にある左右の空白を「auto」自動調節とし、<div> 要素を中央に表示する

CSSを書く際に優先順序はありません。なので、一番最初に書いた例題と違う順序で書いても効果を再現できます。

解説の「」部分は変更できる箇所です。線種などはブラウザ(Google chromeなど)によっては表現しないものがあります。ひとまずは、Google先生か書物を参考にしてみてください。

HTMLやCSSで指定できるカラーコード

HTMLやCSSではコーデ色を指定します。今回出てきている「#f00」がそれです。これはCSS専用に省略した形となっていて、実際は「#ff0000」となります。どちらの形式で記述しても表示される色は一緒ですので、ご安心を。
このコードはPCでイラストを描く人やオンデマンドなどの印刷サービスを活用されている人なら見覚えなる「RGB形式」と呼ばれるカラーコードです。

R(赤)G(緑)B(青)の色を16進数形式で指定して、3色が混ぜ合わさった色を表現します。

色に関しては、RGBではなく色名(「red」など)を指定することで表現できる色がHTMLの方で140色設定されています。また、どんなディスプレイでも見える色が変わらない「セーフティカラー」というのが216色存在します。

まぁ、まずはそんな事気にせずに試してみるのが良いかと思います。下記のURLは色名が定義されている140色の紹介ページとAdobeがウェブ上で公開しているカラーパレットサービスです。

さて、今回はここまで。次回も引き続き<div> タグに定義するCSSを中心に書いていこうと思います。

posted by AHC at 17:56| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年05月26日

ゲムマブログ編集忘備録。

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

No.3:HTMLって何ですか?

どうも、どうも。思考です。5月も、もう下旬ですね。5月なのにかなり暑いし……今年の夏が心配です(夏コミとかも含めて)。会場などに関してもけんけんガクガク色々ありそうですし……。もちろん、当選した暁には張り切ってあんな企画やら、こんな企画やら〜(以下抹消

本題に入る前にお知らせ

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!

5月17日〜6月17日までファミリゲームフェスティバルでの購入事前予約も現在受け付け中です。

 

はい、では本題。

 

HTMLについて

前回の記事にて、ゲムマブログ上でHTMLが動作する事を実証しました。
では、そもそもHTMLって何でしょう? ただ、「HTML」という単語だけを忘れないだけでも良いのですが寄り道しておきましょう。
実際のところ、HTMLはプログラム言語ではありません。
「Hyper Text Markup Language」 の略で、文書の一部を「タグ」と呼ばれる特別な文字列で囲うことにより、文章の見出しやリンクや文字の大きさやレイアウトの設定を追加していく記述言語の定義です。
ホームページやアプリ、電子メールなどを適切かつ綺麗に表示させるために使用されます。

ここまでは良いでしょうか?

少し、話を難しくします。

このブログで、私が「HTML」と言ってしまっているもの……本来は色々と細分化されます。全部説明するともはや呪文なので、ざっくりと1つのHTMLファイルを創り出すのは基本的にこういった3つの分類をまとめる必要があります。
部屋に見立ててみると……。

HTML
間取り
CSS
コーディネート
Image
装飾品

こんな感じでしょうかね?(違っていたら、スイマセン……いや本当)

ホームページの本来は、それぞれHTML形式ファイルCSS形式ファイルメディアファイルがそれぞれ独立して存在していて、ブラウザ(Google Chromeなど)でHTML形式のファイルを表示することで初めてすべてのファイルが合わさった完成品となります。

ゲムマブログでは、記事内でHTMLCSSを一緒に扱います。

何の話? と思いますよね?

前回のHTMLコードを再び書いて、HTMLCSSに分解してみるとしましょう

HTMLコード
<b style="font-size: 20px;color: #c71f2d"> 【邪神がこの中にいる!】</b> 
HTML
<b></b>
CSS
font-size: 20px;color: #c71f2d;

このように分解できます。

何故、合体しているかというと……
記事を編集できる出展サークル側は、画像など(image部分)を追加する(アップロードする)事ができても、CSS形式ファイルをアップできません。

じゃぁ、HTMLファイルは?
これはもう、記事を投稿・編集するツール側で
「このツールを使って投稿される記事はHTMLファイルである」
という宣言が既に行われているので、別途HTML形式ファイルをアップする必要がありません。なので、前回のように記事を編集する画面上でいきなりHTMLで記述しても動作します。

マークアップ言語(Markup Language)にとって宣言は重要な事で、一番最初に
「これはHTMLファイルである」
という宣言が無ければ、ただのテキストとコンピュータが認識してしまいます。

詳しい解説はGoogle先生か書籍をどうぞ(笑)

さて、私と同じくHTMLの知識が少しある人向けに、ゲムマブログの仕様をこっそりお伝えしようと思います。
私の方で多少ですがトライ&エラーを行っておりますので、何かの役に立てて頂けると幸いです。
※HTMLの知識が無い人は『記事の表示幅』だけ、忘れないようにしてください。

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

今回は、ここまで。次回は、簡単レイアウト構造と、実際に私がゲムマブログの記事で使ったHTMLタグの簡単な解説をできればと思います。

posted by AHC at 17:40| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年05月19日

ゲムマブログ編集忘備録。

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

No.2:怒られない程度に実験しましょう

どうも、どうも。思考です。そういえば、先日AHCの公式アカウント@creativeAHCが開設されました!! 今後はそっちのアカウントから色々なお知らせが発信されると思います。……そうですよね?

● 本題に入る前にお知らせ

ファミリーゲームフェスティバル2016は、アナログゲームの販売及び体験を行うイベントです。
遊んだ事のあるゲームから初めて見るゲームまで、国内・海外から多くのゲームを集めました。
気になるゲームを体験するも良し、面白かったゲームを購入するも良し。未経験の子どもからコレクターの大人まで、誰もが楽しめるイベントです。
ファミリーゲームフェスティバル2016様Webサイトより引用

公式サイト >> http://www.fgamefestival.com/

居眠りの街 / AHC購入事前予約 >> こちらをクリック!!(別ページが表示されます)

ファミリゲームフェスティバルの5月17日〜6月17日まで購入事前予約も現在受け付け中!

はい、では本題。

「でも、HTML知らないからやっぱり無理……」という方を少しでも減らすため、ここでは
「コピー & ペーストすれば再現できる」
ところまで公開するため、見つかったらゲムマ運営様に怒られてしまうかも……しれませんが実験してみようと思います。

画面表示

【邪神がこの中にいる!】

HTMLコード
<b style="font-size: 20px;color: #c71f2d"> 【邪神がこの中にいる!】</b> 

前回の最後に書いたHTMLコードです。それで下の画像がゲームマーケットブログのテキスト編集部分のみとなります。画像を見て
「お前、これ●●じゃないかっ!」
と気付いた方は、今後の幸せのために黙秘しておきましょう(にっこり)

think_02_1.jpg

この編集画面上でHTMLコードを入力するときに、必ずチェックしておく場所があります。上の画像で【ビジュアル】と【テキスト】のタブがあるのがわかるでしょうか?(赤枠で囲ってある部分)
編集する前に必ず【テキスト】タブをクリックしておきましょう。その後で、いよいよHTMLコードをコピペして[プレビュー]ボタンをクリックします。

HTMLコード
スクリーンショット 2016-05-19 16.16.39.png
ゲームマーケットブログ
スクリーンショット 2016-05-19 16.17.33.png

無事にゲームマーケットブログ上でも、コードが機能することが確認できました。

これにて一件落着!……ではありません。ここからが本番です。HTMLはテキストを装飾するだけではなく、ページをレイアウトするのが本来の力です。テキストでギッシリのページもHTMLを使えば……

こんなのから
スクリーンショット 2016-05-19 18.49.39.png
こんなのまで
スクリーンショット 2016-05-19 18.36.39.png

ブログ内の記事をレイアウト可能にします。ただ、内容も分からずにコピー&ペーストしても自分たちのサークル用に改造できないので意味も含めて解説させていただければと思います。

次回は、ゲムマブログの仕様とHTMLについてから始めたいと思います。

posted by AHC at 18:56| Comment(0) | TrackBack(0) | Thinkの惰眠講座

2016年05月12日

ゲムマブログ編集忘備録。いつどこで閲覧されるかわからない。

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

No.1:ゲムマブログはコーディングできる

どうも、どうも。Twitter上では「@Think_cod」で活動している思考と申します。ゲムマやイベント情報ではややメインで情報を配信しておりましたので、見覚えのあるアカウントと思って頂ける方もいるかと思います。

今回は会場をブラついたり、【毒の王冠】の試遊卓でお手伝いをしていました(ゲムマ春も2スペース、2試遊台。1台は【邪神がこの中にいる!】専用でした)

ふと、休憩を終えて試遊台へ戻って来ると【邪神がこの中にいる!】の試遊台のまわりで何名かがスマホやらタブレットをかざしている人がいました。
(写真を撮ってるのかな?)
と思いつつ、マナー違反と思いつつ画面をチラッと見てしまうと
………
……

【邪神がこの中にいる!】ゲムマブログ記事を、その場で読んでいました。

たしかに、会場内をウロウロしているときは内容を読めないですが、試遊台の実際のプレイを見ながら「どんなゲーム?」と確認するにはうってつけのコンテンツです。
ゲムマブログに記事を公開しておいてよかった〜と勝手に感動してしました。

ただ、Twitterで他のサークル様のつぶやきを見ている感じだと……実は知られていないのではないか? という出来事に何回か遭遇しました。
運営スタッフでも何でも無いので、大きな声では言えませんが。

ゲムマブログはHTMLコーディングができます!
ゲムマブログはHTMLコーディングができます!!

知識がある人だったり、Web制作を本業にしている方は、運営様に怒られない程度にチャレンジしていただければと思います。

HTMLは一番簡単なプログラム

ここからは「HTMLって何?」という同人サークル様やゲムマ出展予定者様にできるだけ向けて説明できたらと思います。

見出しにはプログラムと書きましたが、やっている事は

(ただのテキスト)【邪神がこの中にいる】

HTMLでコーディング

【邪神がこの中にいる!】

このように、ただのテキストを見栄えよくしてくれます。色々追加していくことによって、行間だったりテキストや画像の並べ方なども限られた中で自在に操ることができるようになります

「でも、HTML知らないからやっぱり無理……」という方を少しでも減らすため、ここでは
「コピー & ペーストすれば再現できる」
ところまで公開していこうと思います。最初は……こちらを。次回は実際にゲムマブログにコピペしつつ、HTMLの属性とゲムマブログ仕様について少し書こうと思います。

画面表示

【邪神がこの中にいる!】

HTMLコード
<b style="font-size: 20px;color: #c71f2d"> 【邪神がこの中にいる!】</b> 
posted by AHC at 18:00| Comment(0) | TrackBack(0) | Thinkの惰眠講座