特殊タグを使用したデザインの紹介 (SunGenuin(佐藤))
しおりを挟む
特殊タグを使用したデザインの紹介その1
・マシュマロ
・掲示板タグ内での動作確認
・LINE
・参照機能の利用
タグの詳細については「誤字報告」をONにすると御覧いただけます。
絶対にズレないマシュマロ
boxタグを重ねることで枠の太さを表現
上記のマシュマロを表現するためにどのようなタグを使用しているか紹介します。
使用しているもっとも重要な特殊タグは「box」です。
boxは本当に便利なタグで、いろんなものを表現するのに利用できます。
※タグとして機能しないように、下記で紹介しているものには《》とbox の間に半角スペースを入れていますが、実際に使用する際は半角スペースを削除してください。
《 box : w100%,bg#a9a9a9,p1》
「w100%」＝「画面幅いっぱいまで表示」
「bg#a9a9a9」＝「bgは「bgcolor」の略。box内部の背景色を設定することができる」
「p1」＝「p = paddingとはbox内部の余白のこと。p横の数字を大きくした分だけ余白が大きくなる」
例：
内側に余白があることがわかります
他にも「bo」というbox内部のタグがあります。
「bo#fe8196」＝「boは「bordercolor」の略。boxの外枠色を設定することができる」
例：
padding「2」
外枠色をピンクに設定したボックス
薄いですが外枠があることがわかります
外枠を太くしたい場合は、
《 box : w100%,p0.5,bo#fe8196,bg#fe8196》
《 box : w100%,p0.2,bg#ffffff》
《 / box》
《 / box》
このように、背景色(bg)と外枠(bo)が同色、かつpaddingで任意の余白を作ったベースのboxに、
背景色(bg)が別色のboxを重ねると、外枠を太く見せることができます。
boxタグを利用すれば、PCとスマホで表示がズレてしまうといった不安点も気にせずに済みます。
また、下記のように他のタグと同時にしようした場合どうなるのかも紹介します。
例えば掲示板を表現するために「boxbgcolor」タグを利用して背景色を変える場合があると思います。その際にtableタグなどでマシュマロや他のコンテンツを表現しようとすると、背景色などの設定に悩むかも知れません。
なぜなら「boxbgcolor」タグ内に「boxbgcolor」タグを使用することができないからです。
色の設定に悩むこともなければ、
PCでもスマホでも横ズレせずに
閲覧端末の画面サイズに合わせて自動でサイズ調整されます
また、
tableタグなどを併用するよりもいじるタグを押さえることが可能です
マシュマロを例にとってboxタグの使用を紹介しましたが、
下記はboxタグを利用して掲示板を表現する方法の紹介です。
まずbox内部の設定は
・w100%
・bg#dcdcdc
・p1
あとはいつも通り、
1：掲示板タグを追加 ID:AU312wPEJ
テスト
2：掲示板タグを追加 ID:AU312wPEJ
>>1 レスも機能していますね
3：掲示板タグを追加 ID:AU312wPEJ
「boxbgcolor」タグを利用して掲示板の背景色を設定する場合、同じタグ内でもう1度boxbgcolorを使用することはできません。
しかしこれはbox内なので、boxbgcolorを使用することが可能になります。
4：掲示板タグを追加 ID:AU312wPEJ
たとえば
5：掲示板タグを追加 ID:AU312wPEJ
もちろん今まで通り、
| こうして | テーブルタグも |
| 利用することが | 可能です |
6：掲示板タグを追加 ID:AU312wPEJ
7：掲示板タグを追加 ID:AU312wPEJ
boxでマシュマロを表現しているので、ref(参照機能)と併用してもマシュマロのレイアウトが崩れることはありません。
8：掲示板タグを追加 ID:AU312wPEJ
Twitterの画面もboxとtableタグを利用して作ってみました
ここにプロフィールを書く
0 フォロー中 | 0 フォロワー |
| ツイート | ツイートと返信 | メディア | いいね |
9：掲示板タグを追加 ID:AU312wPEJ
有志の方が追加してくれているフォントを利用することで、Twitter風のデザインにかなり近づけられる
使用したフォントはこちら↓
https://syosetu.org/font_maker/?mode=font_detail&font_id=58
boxごとコピペすることで2ツイート目がすぐ作れます
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
10：掲示板タグを追加 ID:AU312wPEJ
特定の文字にだけサイズや背景色を付けたい場合もあるかと思います
その時は「text」タグが便利です
textタグはboxタグ同様、内部を設定することができます
《 text : s1.5,bg#ffffff》確認《 / text》
確認
「s」＝「sはサイズの略」
「bg」＝「bgは「bgcolor」(背景色)の略」
このほかに、
「r」＝「rはおそらく「rotate」の略。文字を傾けることができる」
《 text : r30,s1.5,bg#ffffff》確認《 / text》
確認
11：掲示板タグを追加 ID:AU312wPEJ
LINE風のデザインも
スタンプもどきも作ってみました
| ここにテキストが入ります |
| ここにテキストが入ります |
12：掲示板タグを追加 ID:AU312wPEJ
>>11 LINE風やTwitter風のデザインなどはご自由に使ってください
もちろん改造もOKです
13：掲示板タグを追加 ID:AU312wPEJ
何か気になる点があればコメントください
14：掲示板タグを追加 ID:AU312wPEJ
特殊タグいっぱいの小説、もっと流行れ──……！！！！
マシュマロが表現できることがわかります
refからマシュマロを見れるようにすると、
なんだかURLをクリックしているような感覚になりますね
コピペ等はご自由にどうぞ
※LINE内のスタンプ等はあくまでサンプルです
目次 感想へのリンク しおりを挟む
しおりを挟む
特殊タグを使用したデザインの紹介その2
「特殊タグを使用したデザインの紹介その1」でLINE風画面のタグが見づらかった場合はこちらを御覧ください。
大枠となるboxには「w100%」の他、背景色と外枠のみを設定。
内枠(メッセージ部分)には大枠同様、横幅と、こちらには文字が見やすいようpadding(余白)をつけています。
中のメッセージ部分(ふきだしもどき)にはtableタグを使用しているので、メッセージを増やすときはその部分をまるまるコピペしてください。
| ここにテキストが入ります |
| ここにテキストが入ります |
目次 感想へのリンク しおりを挟む
しおりを挟む
特殊タグを使用したデザインの紹介その3
「特殊タグを使用したデザインの紹介その1」でTwitter風画面のタグが見づらかった場合はこちらを御覧ください。
プロフィール画面もツイート画面も大枠にboxタグを使用しています。
boxの背景色は指定しなくても問題はありません。
ですが、例えば掲示板タグと一緒に利用するときに、掲示板の背景色を設定している場合は、Twitterに使用しているboxタグに背景色を設定しないと、掲示板と同化してしまうのでご注意ください。
今回Twitter画面を再現するために、有志の方が作成してくださっているこちらのフォントを使用しています。
ここにプロフィールを書く
0 フォロー中 | 0 フォロワー |
| ツイート | ツイートと返信 | メディア | いいね |
↓のアイコンと名前、ID部分はtableタグを使用しています。
tableタグとboxタグは併用可能なので、今回はboxタグで四角を作りました。
《 box : w10%,bg#1e90ff,p1.5》《 / box》
wide を10%くらいで、padding を 1.5くらいで設定すると良い感じの四角になります。
bg で指定している色を変えればいろんなアイコンができますし、例えば
《 box:w9%,bg#ffa500,p1》☀《 /box》
wide を9%に落として、paddingも1.5から1に変更。
表示するテキストのサイズを2に設定すると、下記のようなアイコンになります。
スマホで表示するときは「w18%」の方がキレイに見えるみたいです。
プロフなどのアイコンに使用する際は、wide を100％にするとキレイに表示されますよ。
☀ | 山田太郎 @testtesttest |
ここにプロフィールを書く
0 フォロー中 | 0 フォロワー |
| ツイート | ツイートと返信 | メディア | いいね |
アイコンの中に文字の入っていない、柄なしのアイコンの場合はwideはしっかり設定しましょう。
《 box:w10%,bg#1e90ff,p1.5》《 /box》
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
下記のようにboxを続けて書くことでツイートをつなげることができます。
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
山田太郎 @testtesttest |
ここにツイートの内容
| こ | り | い | き |
ref(参照機能)を使用してリプを表現しても面白いかもしれません。
構成としては、
《 ref:《 font:u58》こ《 /font》》
《 box:w100%,bg#ffffff,bo#ff69b4,p0.5》
《 table:#ffffff》
[[《 box:w10%,bg#ff69b4,p1.5》《 /box》[《 left》山田花子《 /left》
《 left》《 color:#808080》@testtesttest《 /color》 《 color:#808080》@replytest《 /color》《 /left》《 /table》
ここに返信の内容
《 table:#ffffff》
[[ [ [ [ [[《 font:u58》こ《 /font》[《 font:u58》り《 /font》[《 font:u58》い《 /font》[《 font:u58》き《 /font》《 /table》
《 /box》
《 /ref》
《 ref:》の「：」から「》」の間にリンク部分を置きます。
上記でいうところの「《 font:u58》こ《 /font》」ですね。
正常に表示される場合は「こ」こうなります。
これにカーソルを合わせたり、スマホ版だとタップしたりする際に参照機能が動作します。
参照したい中身は、
《 ref:》《 /ref》の「》」と「《」の間に置いてください。
この場合はツイート内容ですね。
ref機能を使用した例が下記です。
refで参照するものは、あとがきの部分に自動追加される仕組みです。
山田花子 @testtesttest @replytest |
ここに返信の内容
| こ | り | い | き |
山田花子 @testtesttest @replytest |
ここに返信の内容
| こ | り | い | き |
目次 感想へのリンク しおりを挟む
しおりを挟む
特殊タグを使用したデザインの紹介その4
某大百科もどきのデザインです。
ここでもboxタグが大活躍。
デザインの都合上、ヘッダー部分をPC版、スマホ版の2パターンにわけています。
そのため、boxにPCのみ表示、スマホのみ表示の設定を加える必要があります。
《 box:w100%,p0.2,inline,pc,bg#ffffff》
inline = 内側の要素。ブラウザサイズに合わせて表示。
pc = PC版のみで表示
もし上記の設定がされたboxタグが使用されている小説をスマホで読もうとしても、スマホ版ではその箇所が無かったことにされ、本来表示される箇所にスマホ版でも表示される部分が繰り上がって表示されます。
《 box:w100%,p0.2,inline,sp,bg#ffffff》
スマホでのみ表示する場合は、pc の部分を sp に変更してください。
この大百科もどきのデザインの場合、PC版とスマホ版で表示するデザインを変更しています。
PC、スマホで切り替えてデザインを確認してみてください。
PC版のタイトルロゴ部分「例：ニヤニヤ大百科」にはルビが振ってありますが、
こちらは少々扱いづらく、従来のルビ振り「文字《 もじ》」ではなく、《 Ruby》を使用しています。
カタカナ部分とルビ部分でフォントが違うためです。
フォントなどの拘りがない方は、こちら「文字《 もじ》」のルビ振りでも対応可能だと思います。
| タイトル | け |
| い88 |
| お114514 |
| い いいね！ |
| お ナニニ優しく応援 |
| す 記事編集 |
| け |
タイトル _単語_
タイトル
いいね(88)
応援(114514pt)
その他
ヘッダー部分と中身のboxタグはわけています。
なのでヘッダー部分での失敗がこちらの中身に反映されてしまうことはありません。
この大百科もどきでは、中身部分のboxタグには特別な設定はなく、wide(横幅)を100%にしているだけです。
各項目の装飾
各項目の冒頭に、idを設定しています。
このidは通常の閲覧では確認することはできません。
これはページ内を移動するために使用しているからです。
《 id:at1》 これはこの行のidが「at1」という設定です。
このidに対して、linkタグを使用するとページ内を移動することができます。
例
《 link:#at1》ここに移動《 /link》
■ 項目名
まるでリンクが張られているかのような見た目
《 blue》《 u》まるでリンクが張られているかのような見た目《 /u》《 /blue》
カラータグと下線タグを併用することで、まるでリンクが張られているかのように演出することができます。
ちょっと某動画サイトの動画っぽい感じ。
| ||
|---|---|---|
さ お こ だ | ||
関連動画のていでこのような演出をするとより大百科っぽくなるかもしれません。
こちらで使用しているフォントも、Twitter再現の時と同じこちらのフォントです。
これはboxタグではなくtableタグを使用しました。
このままコピペして、中の文字を変えるだけですぐ使用できるかと思います。
refタグと併用することで、記事内で別記事から持ってきたような演出をすることも可能です。
よりそれっぽい感じですね。
ほかにもref機能を使ってミニ記事を作って参照、というやり方もできるかな、と思います。
記事の量が膨大になる場合は、下記のように「上に戻る」リンクを置いておくと便利かもしれません。
このリンクも、先に紹介した「id」を利用しています。
《 link:#TOP》上に戻る《 /link》
実は大百科のヘッダー部分に《 id:TOP》というものを作って置いてありました。
ちょっと某動画サイトの動画っぽい感じ。
| ||
|---|---|---|
さ お こ だ | ||
目次 感想へのリンク しおりを挟む
しおりを挟む
個人の備忘録「多機能フォーム：掲示板形式タグ」
ちょっとよくわからん、という場合は感想欄に書き込んでいただければと思います。
ハーメルンで小説を投稿されている方は、
・メモ帳やwordなどを利用して執筆し、投稿時に張り付けて投稿
・ハーメルンに直打ち
などいろんなタイプの方がいらっしゃるかと思います。
私はどちらのパターンでも執筆をしたことがあるのですが、ハーメルンの執筆エディタは自動保存されるなど本当に優秀で優秀すぎて課金したいくらいです。
特殊タグの反映もすぐに確認できるので、特殊タグを含む文章を作成するときはハーメルンの執筆エディタがオススメですね(個人の意見)
今回はハーメルンの執筆エディタ、その高性能版である「多機能フォーム」について。
特に利用頻度が高いと思われる「掲示板形式タグ」の仕様について、自分用の備忘録も兼ねてご紹介したいと思います。
掲示板形式タグ
ハーメルンでも多く投稿されている「掲示板形式」の作品ですが、その多くが運営提供の特殊タグ「掲示板形式テンプレ」を使用しているかと思います。
慣れていたり、自分用のテンプレを使用していない限りは、多機能フォームの特殊タグメニューから選択している方が多いのではないでしょうか。
掲示板形式テンプレを使用する場合は、下記の手順を踏む必要があります。
①執筆エディタから多機能フォームを起動
②左のボタンから4番目「特殊タグ」を展開
③テンプレートの内容を設定
設定できる内容
・開始番号
・個数
・名前
・開始時刻
・速度
・速度幅
慣れてくれば深く考えなくてもサクサク設定できるようになるかと思うのですが、私は未だに「アレこれどう使うんだっけ」となるので、使用例も含めてご紹介します。
※掲示板部分がわかりやすいように、boxタグを使用して背景に色を付けています。
※前提として、掲示板形式を利用する際は、該当する小説の「小説情報」画面から、タグに「掲示板形式」を必ず追加してください。
※タグの例文をコピペする際は空白の箇所を削除してからご使用ください。
開始番号
掲示板の開始番号です。
「1」と入れた場合は番号：1から掲示板のテンプレートが生成されます。
実際に生成される例
《 id:r1》1：ここに「名前」
生成後にここに任意の内容
《 id:r1e》
1：ここに「名前」
生成後にここに任意の内容
「id:r1」が番号となる。このIDに対して「>>」とIDの数字をつけることでレスすることができるようになります。
例
>>1
＞＞1
このように「>>」を全角「＞＞」にすると機能しないため注意が必要です。
個数
掲示板内の投稿数の数値設定欄です。
「5」と入れれば5個分のIDが発行され、「100」と入れれば100個分のIDが発行されます。
想定している掲示板の長さより多めに作ると、足りなくなる心配がないのでおすすめです。
連番増加乱数幅
「開始番号」を起点に、設定した数値を基に乱数幅を作成します。
たとえば「2chまとめ」などを再現する際に、飛ばし飛ばしのものを作成するのに便利です。
設定の前提：
開始番号/1
個数/10
連続増加乱数幅/2
名前/テスト
例：
1：テスト
このように
3：テスト
番号を
5：テスト
飛ばし飛ばしに
6：テスト
表現
8：テスト
することが
10：テスト
できます
11：テスト
この掲示板には >>2 が存在しません
13：テスト
個数自体は
15：テスト
ちゃんと
17：テスト
10個あります
名前
投稿者のデフォルトの名前になります。
ハーメルン運営様(作る人様)のTwitterからの引用ですが、
名前を設定する入力欄に、
《 green》ここに名前《 /green》
と入れると、下記のようになります。
ここに名前
本格的に2chや5chの掲示板を表現したい、というときに「age/sage」を色で表現したいときに便利です。
また、他の特殊タグとも併用可能なので、例えば名前を太字にしたいときは「《 b》《 /b》」タグを使用する、など。
《 b》《 green》ここに名前《 /green》《 /b》
ここに名前
IDの種(ID設定)
たぶん多くの方が「ランダム」のチェックボックスをONにして使用せずに使っている、と思われるID設定。
この紹介文を作成するに当たってこちらでもいくつかテストしたのですが、これだという確信が持てなかったためハーメルン運営様にメールにて質問させていただきました。
仕様：適当な文字列を入力すると、その文字列をもとにIDが自動的に生成されます。
※原文ママです
※回答メールからこちらに転載することは運営様にご許可頂いています。
「その文字列をもとにIDが自動的に生成」ってつまりどういうことだ、とお思いの方もいるかもしれません。
まずこちらで試した内容を紹介します。
テスト内容：
「IDの種」の入力欄に「0から9」までの1桁の数字を入れてみる。
| 数値 | 生成結果 |
|---|---|
| 9 | Jgw2TrASo |
| 8 | AbaBbMfI+ |
| 7 | l18078ZG+ |
| 6 | yN7zdZTTV |
| 5 | yO5LuNjMy |
| 4 | Rkga3HAQ1 |
| 3 | Im99Jw6jd |
| 2 | SHLPIJaL+ |
| 1 | awanJE1B4 |
| 0 | 0O959qyzJ |
固定値のようです。
chrome、Microsoft Edge、スマートフォンから多機能フォームを起動して同じテストをしましたが同じIDが生成されました。
今回は1桁だけでしたが、テンプレートで生成できるIDは9桁までなので、9桁まで埋めればそれをもとにIDを生成してくれるのでしょう。
なお、個数を10や100にしても、IDの種が設定されている場合はすべて同じIDになります。
それを利用して、例えば多機能フォームの「▼整形・置換・変換」機能の「置換」でIDを用意していたモノに一括変換することも可能です。
他にも運営様からお教え頂いた使用例をご紹介します。
運営様提案の使用例：
前提
連続増加乱数幅：任意の数
IDの種：任意の文字
IDが飛ばし飛ばしとなった掲示板と、IDの種をランダムで生成した掲示板を組み合わせることで、同一ID(スレ主/主人公)とランダムID(スレ民)のやりとりを再現しやすくなるのではないでしょうか。
IDコピペ慣れした方だと逆に使いにくいかもしれませんんが、これから掲示板を触る、作成してみる方にはとっつきやすいかもしれません。
IDの設定自体は使い方が難しいですが、触っていて「こういう使い方、面白いかも」というご意見があれば感想欄にお寄せください。
IDの種：おまけ
IDの設定に限定したことではありませんが、掲示板テンプレート作成後にID周りのサイズを変更したい、等の場合は、多機能フォームの「置換」機能から正規表現を利用すると1度で済むのでおすすめです。
置換前：ID:([A-Za-z0-9\-+@]{9})$
置換後：《 small》ID:$1《 /small》
※前提として正規表現を有効にするようチェックボックスをONにしてください。
置換前欄にセットした正規表現について。
簡単に説明すると「どこを」「どの部分を」「どの範囲を」置換の対象にするのかを指定しています。
上記を分解して中身をご紹介します。
これは正規表現
これはその説明です
正規表現に使われる一部の記号は、ハーメルン内の特殊タグと衝突する恐れがあります。
衝突 = ブロックされる要素に関しては、運営様のページをご確認ください。
置換前入力欄
[]
[] は『角括弧』と呼ばれる。角括弧で囲まれたいずれか1文字が対象となる、と言う意味。
例：『[a]』と表記した場合、『a』が含まれる文字が対象となる。
A-Za-z0-9\-+@
半角大文字・小文字の英字AからZ、数字は0から9、記号は\、-、+、@が含まれているものを対象とする、と言う意味。
上記の『[]』と組み合わせて使用する。
例：『[A-Z]』の場合は、AからZの英字が対象となり、上記例文の場合は『半角大文字のAからZ、小文字のaからz、数字は0から9まで、記号の\なども置換対象に含む』という意味になる。
{9}
直前の文字数を指定する、という意味。
例：『[a{9}]』の場合、直前の文字『a』が9個含まれているものを置換の対象とすることになる。最初の例文の場合は『AからZまでの英字と0から9までの数字、そしていくつかの記号』を含む9桁の文字列を指定していることになる。
$
直前の文字列がその行の末尾にある場合に置換の対象とする、という意味。
最初の例文の場合、『AからZまでの英字と0から9までの数字、そしていくつかの記号を含む9桁の文字列が行の末尾にある』時に置換の対象として指名することになる。なので、末尾に置換条件を満たす9桁の文字列がない場合は、その行は置換されない。
()
文字列をひとつのグループとして扱う、と言う意味。
例：『([A-Z0-9{5}])』の場合、AからZまでの英字と0から9までの数字を含む5桁の文字列でひとつのグループとして指定していることになる。
例：
1：ここに「名前」 ID:AbaBbMfI+
↑の場合、末尾「AbaBbMfI+」が条件を満たす9桁の文字列のグループのため、置換の対象となります。
逆に、
1：ここに「名前」 ID:AbaBbMfI
↑の場合、末尾「ID:AbaBbMfI」が9桁に満たないため、置換の対象外となります。
置換後入力欄
$1
()で囲まれたグループの『変数名』という意味。
例：
置換前欄『080-([0-9]{4}-[0-9]{4})』
置換後欄『090-$1』
と設定した場合、冒頭の『080』を『090』に置換するが、グループ化した箇所(変数名『$1』)のみ置換せず残すことができる。
改めて冒頭の設定を見てみましょう。
置換前：ID:([A-Za-z0-9\-+@\/]{9})$
置換後：《 small》ID:$1《 /small》
『ID：《条件を満たす9桁の文字列》』が縮小されて表示されるようになります。
縮小の他にも『《 red》《 /red》』で囲んでカラーチェンジする等、いろいろ応用できるかと思います。
正規表現に関しては下記のサイトがわかりやすかったので、本格的にいじりたい時などにご参照ください。
開始時刻
掲示板の各投稿に開始時間(投稿時間)を設定することが可能です。
例えば日時の指定が必要な内容だったり、日時自体が掲示板のメインになる話を作成している方にとっては便利だと思います。
速度
開始時間を起点として、そこからどれほどの速度で時が進むか設定することができます。
下記は「速度：1」としているため、最低でも1秒以上は幅ができるはずです。
しかし、開始時間と速度のみを設定しただけでは、以下のように開始時間が付くのは最初の1レス分のみになってしまいます。
1：テスト 2021/11/19 14:50:45
2：テスト Invalid Date
3：テスト Invalid Date
4：テスト Invalid Date
5：テスト Invalid Date
すべての投稿に投稿時間を付けるためには、速度幅の設定が必要不可欠です。
速度幅
こちらを設定することで、すべての投稿に投稿時間を設定することができます。
前提：
開始番号/1
個数/5
連続増加乱数幅/未設定
開始時間/ 2021/11/19 14:50:45
速度/1
速度幅/1
1：テスト 2021/11/19 14:50:45
2：テスト 2021/11/19 14:50:46
3：テスト 2021/11/19 14:50:47
4：テスト 2021/11/19 14:50:48
5：テスト 2021/11/19 14:50:49
しかし稀に下記のように2秒以上幅ができることもあります。
※前提の設定は同じです。
1：テスト 2021/11/19 14:50:45
2：テスト 2021/11/19 14:50:46
3：テスト 2021/11/19 14:50:47
4：テスト 2021/11/19 14:50:49
5：テスト 2021/11/19 14:50:51
目次 感想へのリンク しおりを挟む
しおりを挟む
特殊タグ使用例配布①
某育成ソーシャルゲームの二次創作で使用できそうなモノをまとめました。
すでに似たようなデザインのものを作ってる方もいらっしゃるかと思います。
こちらにおいてあるのはPC版、スマホ版どちらから見ても横ズレしないことをテーマに作成したものです。
※誤字報告機能をONにすると、現在画面には表示されていない「コメント(注釈)」部分が確認できます。
出走前画面
//PC版
1 | ここ二つ名的な物 ここにキャラ名とか | 調子は？ | ◎ ◎ ◎ 番号的な物 戦法 |
//SP版 デザインの微妙な調整のための空白がPC版と異なります
1 | ここ二つ名的な物 ここにキャラ名とか 調子は？ | ◎ ◎ ◎ 番号的な物 戦法 |
例①：
//PC版
1 | 美貌の太陽王 サンジェニュイン | ↑絶好調 | ◎ ◎ ◎ 1番 人気 逃げ |
//SP版
1 | 美貌の挑戦者 サンジェニュイン ↑絶好調 | ◎ ◎ ◎ 1番 人気 逃げ |
※情報等は連載していた二次創作のキャラクターから流用
上記のように、ゲーム画面のワンシーンをそれっぽく再現できます。
コピペして使用する場合は、「pc」と「sp」の2つを用意する必要があるのですが、そうすることによってPC版・スマホ版どちらに対しても画面崩れしないデザインにすることができます。
お手間がかかってしまいますが、きれいに整えたい方はこちらを是非ご利用ください。
上記デザインの簡易版。
tableタグを使用しています。
こちらはPC版・SP(スマホ)版どちらでも横ズレしないことを確認済。
| ① サンジェニュイン | ◎ ◎ ◎ 1番 人気 逃げ |
出走表(縦)は次ページで紹介しているのでよかったらそちらもご覧ください。
ステータステンプレート
tableタグのみを使用しています。
横ズレが心配な場合は全体を「《 box:w100%》《 /box》」で囲むとズレないです。
テーブル内の構成(結合など)は運営様が投稿している特殊タグの使用例を参考にしています。
| ステータス(☆3) | |||||
|---|---|---|---|---|---|
| スピード | スタミナ | パワー | 根性 | 賢さ | |
| 150 | 80 | 80 | 80 | 60 | |
| バ場適性 | |||||
| 洋芝 | 和芝 | ダート | |||
| A | B | F | |||
| 距離適性 | |||||
| 短距離 | マイル | 中距離 | 長距離 | ||
| G | C | A | A | ||
| 脚質適性 | |||||
| 逃げ | 先行 | 差し | 追込 | ||
| A | E | G | G | ||
| 成長率 | |||||
| パワー +30% | |||||
| 固有スキル『ナンチャラカンチャラ』 | |||||
| なんらかの効果 | |||||
table内で結合を行うことで表現しています。
上記のさらなる応用パターンとして、下記のような血統表も作成してみました。
5代血統まで出したかったのですが4代が限界でした。
5代まで改良できたらぜひぜひ感想欄にてお教えください。
| 父 | ||
| 父の父(2代父) | ||
| 3代父 | 4代父 | |
| 3代父の母 | ||
| 2代父の母 | 2代父の母父 | |
| 2代父の母母 | ||
| 父の母(2代父母) | 2代父母の父 | 2代父母の父父 |
| 2代父母の父母 | ||
| 2代父母の母 | ||
| 2代父母の母父 | ||
| 2代父母の母母 | ||
| 母 | ||
| 母の父(2代母父) | ||
| 2代母父の父 | 2代母父の父父 | |
| 2代母父の父母 | ||
| 2代母父の母 | 2代母父の母父 | |
| 2代母父の母母 | ||
| 母の母(2代母) | 2代母の父 | 2代母の父父 |
| 2代母父の父母 | ||
| 3代母 | ||
| 3代母の父 | ||
| 4代母 |
上記のtableタグを使用した実例がこちらです。
参考までにご覧ください。
目次 感想へのリンク しおりを挟む
しおりを挟む
特殊タグ使用例配布②
某育成ソーシャルゲームの二次創作で使用できそうなモノその2。
出走表(縦)です。
こちらは横スクロールしないと表現できないので、横スクロールできるようになっています。
PCだとスクロールバーが表示されるので「横スクロールされるやつだ」と視覚的にすぐ理解できるのですが、スマホ版だとちょっとわかりにくいので、使用する際は読者の方にもわかりやすいように前書きなどに注意分を入れておくといいと思います。
構成内容
・メイン：boxタグ
・内側：tableタグ
出走表のboxタグの構成
w100%：ほぼ保険でかけてる、画面いっぱいまで使いますよという意味。
p0.8：枠線部分の幅。「1」だとデカすぎるが「0.5」だとやや細い印象だったので。
bg：出走枠によって決まっている色を設定
vertical：縦書き指定の要素。
upright：半角英数字を縦書き表記する指定。
lh：行の高さ指定。
pcまたはsp：PCまたはスマホのみに表示する指定。
出走表のtableタグの構成
＝：中央配置。
#ffffff：テーブル背景の指定。
出走表のtextタグの構成
s：文字サイズの指定。
tcy：縦書き内において横文字表記にするための指定。boxタグで「upright」を使用している場合、3文字以上の文字列に使用すると正常に反映されない可能性がある。
r：回転の指定。「r90」と表記することで縦書きの状態から90度回転させて横文字に見せることができる。ただし記号だからこそそれっぽく見えているだけで、文字列に使用するのは非推奨。
── 以下「pc」版
1 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
2 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
3 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
4 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
5 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
6 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
7 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
8 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
9 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
10 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
11 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
12 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
13 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
14 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
15 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
16 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
17 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
18 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
── 以下「sp」版
1 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
2 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
3 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
4 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
5 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
6 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
7 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
8 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
9 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
10 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
11 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
12 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
13 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
14 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
15 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
16 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
17 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
18 | キュウモジノムスメ | △◎◎ | 1番人気 | 脚質 |
目次 感想へのリンク しおりを挟む
しおりを挟む
特殊タグを使用したデザインの紹介その5
ハーメルンにおける「掲示板形式」のほぼ8割は「2ch/5ch」をベースに表現されているかと思います。
世の中にはメイン機能が掲示板ではなく、付属品として掲示板を提供しているサービスもあります。
今回は、そういった「付属品としての掲示板」を表現できるデザインを紹介します。
あくまでも一例ですので、下記を参考にいろいろとカスタムしてみてください。
今回の参考にしたのは競馬情報サイト「netkeiba.com」さんの掲示板ページです。
PC版を元にしているため、色合いもPC版の緑を中心にしています。
スマホ版っぽくしたい場合は、色を青やそれに近しいカラーコードに置き換えてください。
≪例≫
○○掲示板（XXXX件）
？ ミュート、報告の使い方 ∨
なまえ さん lwqBCAJ | と フォローする |
タグの構成を説明します。
今回メインで使用するタグは「box」です。
「table」等で表現することも可能ではあると思いますが、個人的に分解しやすく打ちやすいタグが「box」なのでこちらで表現します。
構成の大外のbox①は
wide : 100% ※固定
padding : 0.2
backgroundColor : 4C7F00 (= green)
paddingはbox内側の余白を指定するものです。
一番外の縁から0.2余白を取って、そこにもう1個下記のbox②を重ねることで太い枠を表現します。
wide : 100% ※固定
padding : 0.3
borderColor : 4C7F00 (= green)
backgroundColor : 4C7F00 (= green)
新しくborderColor(bo)を追加しています。
これはbox②の外枠のカラーを指定したものです。
後は他に変化はありませんが、このbox②内に掲示板のタイトルを入れることを想定しています。
次のbox③は、box②を《 /box》で閉じてから使用しましょう。
wide : 100% ※固定
padding : 0.3
backgroundColor : FFFFFF(= white)
box③内部にあるbox④には掲示板に関する注意書きを置いています。
必要ない場合はbox④を作成しなくてもかまいません(しかしbox③は打ちましょう)
次のbox⑤からメインに入ります。
《 hr》で水平線を入れた後、box③と同じ構成のboxをもう一度置きます。
この時重要なのは、box③を閉じた後に打ち始めることです。
打ち終えたら、box⑤内にtableを置きます。
ここから少し複雑です。
テーブル全体の構成
backgroundColor : FFFFFF
各コマごとの構成(※半角スペースを入れているのでコピペ注意)
①アイコン
《 box:w10%,bg#EAE8F2,p1.5》《 /box》
②ユーザー名やID
《 left》《 blue》なまえ《 /blue》 さん 《 color:#808080》lwqBCAJ《 /color》 《 /left》
全体的に左に寄せるよう指定する
③フォローボタン
《 box:p0.2,bo#a9a9a9,bg#FFFFFF》《 blue》《 text:s0.8》《 font:u58》と《 /font》 フォローする《 /text》《 /blue》《 /box》
boxタグでボタンを再現すると崩れにくい
フォントは有志が提供しているものです
ここまでテーブルを整えたら「《 /table》」でしっかり閉じてください。
その後にメインのコメントを書き込むbox⑥を設置します。
wide : 100% ※固定
padding : 0.5
backgroundColor : FFFFFF(= white)
内側の余白を0.5に変更することで、文字を見やすくできます。
box⑤を《 /box》で閉じた後は、再び水平線(《 hr》)を打ち込みます。
コメントを増やす場合は、box⑤とその中身、そして水平線までをコピーし、再度貼り付けることで続きます。
≪例2≫
○○掲示板（XXXX件）
？ ミュート、報告の使い方 ∨
なまえ さん lwqBCAJ | と フォローする |
なまえ さん lwqBCAJ | と フォローする |
改行も機能します
以上で完了です。
冒頭では付属的な掲示板として紹介しましたが、もちろんメインの掲示板としての使用していただくのもOKです。
あくまで一例ですので、常識と利用規約の範囲でご自由にお使いください。
このデザインとは別の話ですが、有志の方による「ハーメルの特殊タグに対応したジェネレーター」なるものもございます。
制作者様より当デザインをいくつかベースに利用しているとのことで、こちらでもご紹介させて頂こうと思います。
Z/Generator
2024/04/13時点で確認できているのは
・マシュマロ風
・大百科風
・LINE風
・匿名掲示板風
です。
ハーメルン非公式の有志によるジェネレーターなので、もちろんハーメルンを運営していらっしゃる「作る人」様は関与しておらず、当方もデザインをベースにして頂いているだけで関与しておりません。
ジェネレーターに関するご質問等は上記サイトにて直接運営者様にお聞き頂ければと思います。
目次 感想へのリンク しおりを挟む