WEB即売会システム「pictSQUARE(ピクトスクエア)」の店舗説明や頒布物説明で使えるhtmlタグについてのメモ(リンク集)です。
作ったタグの情報を公開して下さった皆様ありがとうございます…!
【23.2.10】店舗説明文の入力箇所変更
仕様変更で、店舗のサークルカットをクリックした時に出てくる説明文の入力箇所が「通販サイトピクトスペース」から、「イベントサイトpictSQUARE」内の項目に変更になりました。
あと「HTMLの使用は不可能となります」と説明されていますが自分が3/10に試した時点では使えました(今後も使えるかは不明)。
仕様変更に伴い、過去作成されたタグの表示が当初とは違う見た目になっている場合があります、ご注意ください(主に表示文字数の足切り)。
【重要】イベント会場で表示されるサークル説明文について、仕様の変更とデータのコピーをさせていただきました 2023年03月09日
【21.8.23】htmlリンクが作れるジェネレーターのご紹介
【コピペで簡単】pictSQUARE(ピクトスクエア)用のHTMLジェネレーター・テンプレートのメモ – min.t (ミント) (togetter.com)
単純なリンクを作るだけならこちらのツールが一番簡単です。もっと凝った見た目にしたい時はこの先の記事本文で紹介している各種テンプレートをご利用ください。
当記事では、タグを自動生成してくれるオンラインツールや、コピペで使えるhtmlタグ(及び解説記事)を紹介しています。
タグ使用についてのハードルをめっちゃ下げるのが目的なので、らくらくかんたんコピペでタグを貼り付けてライバルに差をつけようライバルってなんだ。
htmlは雛形があれば、簡単にカスタマイズできます。この記事で紹介したタグをコピペして、頑張ってつくった作品をアピールするのにご利用ください。
当記事のリンク・装飾 htmlは「基本以外の高度な使い方」で「公式サポート対象外」の内容となります。
分からなかった場合、公式サポートやイベント主催者への質問はNGです。
(素直にあきらめてください)
2020.11月に機能追加で公式に「テスト出展」ができるようになり、簡単な手順で展示テストができるようになりました。
この記事のhtmlは複雑なものもあり、見た目や挙動を会場で確認したほうがいいものもあります。確認にはテスト出展機能を利用すると便利です。
テスト出展機能を追加しました。
サークル参加の申込をどのようにすれば、どのように会場に表示されるかが確認できます。
実際にイベントに参加しなくても確認可能ですのでサークル参加練習用に是非どうぞ! pic.twitter.com/R88bHlnafm— pictSQUARE@オンライン即売会サービス (@pictsquarenet) November 26, 2020
(実は元から「自分でイベント作って非公開のまま自分だけ参加(主催無料)」でクローズテストは可能だったが、公式にはアナウンスされていなかった。10sp以外の会場でのテストや、主催さんがイベント検討段階で開催前に主催専用機能を試してみたい場合はこの方法で行けると思います)
[21.1.19] 公式の機能説明(ヘルプページ)の改良版が公開されました。
https://pictsquare-support.zendesk.com/hc/ja
[21.5.6] 機能追加
当記事の親記事はこちらです。カスタマイズ関係(店舗・アバター)に関しても解説しています。よろしければ合わせてお読みください。【上記に追記した記事一覧】
◆ドット素材の拡大のしかたと、オリジナル店舗をつくる素材まとめ
◆無料ツールで文字作品を縦書きに編集し印刷できるPDF状態にする・表紙も作る文字入れる
もくじ
- 最初にpictSPACEの簡単な説明
- 1.1注意
- 2.基本のタグ 文字修飾やリンク(オンラインツールでタグ自動作成)
- 2.5 タグを打つよりリンク集自動生成ツールが知りたい
- 2.1 文字色変更自動生成ツール
- 2.2 リンクタグ自動生成ツール
- 2.3 文字修飾タグ自動生成ツール
- 2.4 タグの改行や空白消しが自動でできる
- 3.見た目を綺麗に!色々なタグを使ってみよう(コピペで)
- 4.見出しやリンクをボタン風に! カラーボックス表示してみよう
- 4.1角丸カラーボックス
- 4.2四角カラーボックス
- 5.ボックス型の見出し・リンク と 頒布物一覧画面に文章をすべて表示
- 6.PictSQUARE用 PictSPACE html記述サンプル群
- 7.pictSQUAREで使えそうな記述色々詰め合わせ
- 7.1 PictSQUARE用PictSPACEで使えるHTMLテンプレート集
- 7.2 PictSQUARE対応 ジャンプリンク付きの目次の作り方
- 8.サークル代表情報を頒布物一覧に表示
- 9.ぴくすくでなんか綺麗に見える頒布物一例
- 10.ぷらいべったーのパスワードやネットプリントのプリント番号をわかりやすく装飾する
- 20.まとめ
最初にpictSPACEの簡単な説明
htmlをピクトスクエアに表示させるにあたっての前提など。
ピクトスクエアとpictSPACEの区別が完全についている人は読み飛ばして大丈夫です。
※2023年の仕様変更「店舗説明文の入力箇所変更」で入力がピクトスクエアに集約されたため説明を折りたたみました
基本のタグ 文字修飾 や リンク
基本の「文字修飾」と「リンク」の設定ができれば、通販宣伝の大抵のことは片付きます。
時間がない人はこの項目だけ読めば必要な設定ができます。
基本のタグが作れるオンラインツールをご紹介します。
タグ打ちがわからない? リンク集が作れる 既存ツールを使おう
「タグを打つよりリンク集自動生成ツールが知りたい」
タグの説明をする前に「htmlやりたいんじゃなくて、手早く外部リンクまとめたものが作りたいだけなんです!」「とにかく時間がないんです!!」という人のために、リンクをまとめて表示できる既存ツールのご紹介です。
はやくイベントの準備したいのにhtml習得とかこんな長い記事読んでられるか!という切羽づまった貴方におすすめです(イベント前あるある)。
閲覧者が目的にたどり着くまでのクリック数が増えますが、それよりも自分が早くかんたんに仕上げるほうが重要という人はこちら。
「プロフィール紹介リンク集を作れる」というサービスはたくさんありますが、今回は「深く考えずに簡単に作れそうなもの」を一部紹介します。
なお、一般向けのサービスはデザインをきれいに作ることも出来ますが、「プロフィールをシェアしてつながる」という視点のサービスです。
厳密に公開限定・検索避けをしたい場合は今回のかんたんリンク集作成サービスよりは、同人向けのカスタマイズ可能なサービスを利用したほうがいいかもしれません(つまり検索避けがされているピクトスペースや自サーバー内にhtmlタグで作る)。
Link Mix (日本語・日本の会社のサービス)
複数のリンクをひとつのURLに https://linkmix.co/ja/
linktree(英語・外国のサービス) https://linktr.ee/
使い方解説記事(別サイト) 【2021年最新】linktree(リンクツリー)とは?複数リンクを貼る方法や使い方を解説!
lit.link (日本語・日本の会社のサービス) https://lit.link/
プロフカード https://profcard.info/
「マシュマロ」の会社のリンク集作成サービスです。Twitterアカウントが必要です。
Strikingly(ストライキングリー)https://jp.strikingly.com/
上記のリンク集とは違い、1ページだけのwebサイトを作れるサービス(英語)。無料プランあり。
よくわかるStrikingly(ストライキングリー)の使い方&評判ガイド【2021年】
上記以外のサービスを紹介している記事。プロフィール用のHTMLテンプレート配布もあります。自分のサーバースペースを持っている場合はこちらも便利です。
SNSアカウントをまとめたい人必見!カンタンにプロフィールページが作れるサービス4選
https://do.gt-gt.org/making-prof-page/
上記の他にも便利なサービスは色々あります。時間がありましたら自分にあったものを探してみてください。
【文字色変更タグ】 文字色変更自動生成ツール
HTMLタグの文字を装飾する設定
細かく色を変更したい場合は、タグ内の「color=”#FF0000“」ここの英数字を変更するか、colorタグを検索して色指定の方法を確認してください。
【色見本】
HTML,CSS カラーコード一覧表 | 背景色や文字色の設定
【リンクタグ】 リンクタグ自動生成ツール
「表示させる文字(リンク先の文字列)」と「飛ばす先のURL」を別で指定してタグを生成できます。
リンク切れ対策と、ブラウザによっては動かないかもしれないので、複数のツールを貼っておきます。
どのツールでも「新しいウィンドウ(別窓)」の指定にチェックを入れてください。
target="_blank"」
が必須です。この指定がタグに書かれていないと、閲覧者がクリックした瞬間に会場から退出してしまうブラウザクラッシュ(罠 Lv.10)の完成です。
記述し忘れを防ぐために作ったリンクタグはテスト店舗に反映させて、クリックしてチェックするのを忘れずに!
初心者にもやさしいリンクHTMLタグ作成
簡単に別窓で開くリンクを作るツール
aタグ作成ツール – ブログHPツール
上のツールで生成したタグに
「rel="noopener noreferrer"
」を手動で追加すると更によし(セキュリティレベルが上がりますが、必須ではないです)。
追加したい人は下記の部分へコピペしてください。
<a href="https://booth.pm/ja" target="_blank" rel="noopener noreferrer">BOOTH – 創作物の総合マーケット</a>
もっと詳しく説明すると
<a href="https://移動させたいURL" target="_blank"[ここに半角空白1個入れてそのあと赤文字部分をコピペで追加]rel="noopener noreferrer">表示させたい文字列</a>
となります。空白を忘れるとブラウザによって動いたり動かなかったりと怪しい動作になる場合があるので、「半角空白」「追加部分」にご注意ください。
「target="_blank"
」は別ウィンドゥを開くための指定で、これを記載しないとピクトスクエアではリンクタグを使うと会場外に出されてしまいます。
先に挙げたツールの場合「リンク先を新しいタブで開く」「新しいウィンドウ(別窓)」等のオプションにチェックを入れれば自動で入ります。
文字修飾タグ (htmlタグ総合 オンラインツール)
HTMLエディタ:見たまま編集、簡単にHTML作成
http://asomin.net/htmleditor/できること
・入力されたテキスト、表、画像、絵文字を元にHTMLを作成できます。
・HTMLソースコードを取り込んでプレビューを確認、HTMLを編集する事もできます。使用例
・WEBサイトを作りたいがHTMLの書き方が分からない際に使用する
・WEBページを公開する前にHTMLのプレビューを確認する
コピペして、ピクトスクエアの「店舗説明」、またはピクトスペース「頒布物説明」に貼ってください。
「文字サイズ」「色」「太字や斜体などの文字修飾」程度なら問題なく動くと思います。それ以外は何処まできちんと動くかわからないので、各自で試してください。
タグの改行や空白消しが自動でできるオンラインツール
pictSPACE・ピクトスクエアはおそらく大本で読み込んでるスタイルシートで改行幅や文字サイズ他が決め打ちで指定されているようなので、ユーザー側がhtmlタグでいろいろ指定しても、全部思った通りに反映されるとは限りません。
そのためちょっとした変更のつもりが思わぬ時間がかかることがあります。
1度試してみて思った通りの表示にならなかった場合、技術力に自信があるか、余裕がある時以外は、htmlタグと格闘するのはおすすめしません。
そういったミスを減らすため、自動で改行や空白消しができるツールをご紹介します。
次に紹介する記事で出てくるこちらのオンラインツール
半角・全角スペース、空行、改行の自動削除機(原稿支援ツール)
を使うと簡単です。
この記事に貼ってあるhtmlタグも、見やすくするために改行を入れています。ツールの「タブを除去」「改行を除去」ボタンで整えてからpictSPACEに貼り付けてください。
見た目を綺麗に!色々なタグを使ってみよう(コピペで)
ここからは見た目に凝って、キレイに表示するタグです。
htmlでの頒布物 通販説明表示について、わかりやすく解説してくださっている記事をご紹介します。
さび様が作成された記事です、ありがとうございます!
タグを直接コピペ可能なので楽ちんです。
※HTMLタグジェネレーターが記事に追加されています。
※ピクトスクエア側の仕様変更のため当初想定の表示と異なる場合があります。
最初の記事は「pictSPACE」つまり「通販倉庫」「サークルスペース倉庫内部」側での話です。(スクエア=イベント会場側、の話ではない)。
ただし操作方法がわかりやすく解説されているので、先にこちらを読むと理解が深まります。
pictSPACEでHTMLタグを入れる【コピペでできる・スマホ対応】
上記記事で操作方法をわかった上でこちらを読むと、なるほどよくわかる。
今度はピクトスクエア(会場側)から見てもOK、というタグの話です。実際に使うタグはこちらの記事を参考にすると良いと思います。
ピクスクからみてもOK!pictSPACE 頒布物・お品書き下部分の装飾HTMLタグ
記事では現在4種類のタグセットが紹介されていますが、そのうち2種類の表示見本を紹介します。
残り2種類や色変え方法など、詳しくはリンク先記事でご確認ください。
こちらの記事で解説されているタグをまるっとコピペして文言を書き換えれば、キレイな見た目にしたいという目的はさくっと解決!となります。
次は更に細かくカスタマイズしたい人向けの、見出しやボタン等に使えるタグです。
見出しやリンクをボタン風にカラーボックス表示してみよう
通販の説明の装飾に特化した記事の次は、説明文などをカスタマイズしていくタグをご紹介します。
カラーボックスを使ったリンク表示について、イベントやブログ記事などでhtmlタグを配布してくださっているサークル様がいらっしゃったので、ありがたく教えていただきました(タグ掲載許可済)。
ありがたやありがたや…。
角丸と四角を教えていただいたので、これだけあれば基本的な表示はだいたいできると思います。
もっとカスタマイズしたいとか、タグの意味を詳しく知りたい人は、タグ+htmlで検索すると講座が色々でてくるので、そちらで勉強してみてください。
角丸カラーボックス
「uf-stgt」(https://uf-stgt.booth.pm/)きみどり様より教えていただきました。ありがとうございました!
この項目のタグの一部についてはオリジナルから多少変更を加えています(色変更など)。
表記がない場合、白背景がpictSPACE店舗、灰色の背景がピクトスクエア(イベント会場)での表示サンプルです。
基本的には「頒布物説明」用のタグですが、一部は「店舗説明」でも表示が崩れず利用できます。
自分がテストした際は「店舗説明・頒布物一覧・頒布物詳細」のどの画面でも比較的安定した見た目で表示されました。
下記はタグを読みやすいように一部改行を入れています。このブログからコピペして使う場合は調整が必要です。
改行やタブ消しは、先に紹介した記事で出てきた「半角・全角スペース、空行、改行の自動削除機(原稿支援ツール)」を使うと簡単です。
タグのダブルクォーテーション「”」が全角になっている可能性があるので、念の為エディタの検索・置き換え機能で半角に修正してください。
◆角丸・大ボックス(オレンジ)に太字サークル名リンク
一番シンプルで使いやすい見出しです。h1
タグを使っているので自動で文字サイズが大きくなります。
見出し
<div style="padding: 16px; margin-bottom: 16px; background:#ff840a;border-radius: 10px; "><h1><font color="ffffff">BOOTH - 創作物の総合マーケット</font></div>
リンクあり
<div style="padding: 16px; margin-bottom: 16px; background:#ff840a;border-radius: 10px; "><a href="https://booth.pm/ja" target="_blank" rel="noopener"><h1><font color="ffffff">BOOTH - 創作物の総合マーケット</font></a></div>
◆角丸・小ボックス(水色)に白文字の見出し
見出しが横幅いっぱいだと強すぎる時にはこちら。
<p style="margin-bottom: 3em;"><span style="padding: 1em 1em; margin-bottom: 1em; background:#00ccff;border-radius: 1em; "><font color="#ffffff">白文字見出し</font></span></p>
◆角丸・大ボックス(水色)に細字でboothのリンク
ボタン風に見えるリンクです。
このタグについては4種類の見本を載せています。同じタグでも表示場所によって見た目が大きく異なるのがわかると思います。
この記事で紹介しているタグも、表示する場所によっては思い通りの見た目にならない場合があります。ご注意ください。
<div style="padding: 16px; margin-bottom: 16px; background:#00ccff;border-radius: 10px; "><a href="https://booth.pm/ja" target="_blank" rel="noopener"><font color="#ffffff">
匿名配送BOOTH
</font></a></div>
<div style="padding: 16px; margin-bottom: 16px; background:#66ccff;border-radius: 10px; "><a href="https://booth.pm/ja" target="_blank" rel="noopener"><font color="#ffffff">
通常配送BOOTH
</font></a></div>
◆角丸・小ボックス(水色・2個1行)に細字でboothのリンク
同じアイテムの頒布先が複数ある時に使えるボタンです。
<p style="margin-bottom: 3em;"><a href="https://booth.pm/ja" target="_blank" rel="noopener"><span style="padding: 1em 1em; margin-bottom: 1em; background:#00ccff;border-radius: 1em; "><font color="#ffffff">匿名配送BOOTH</font></span></a> <a href="https://booth.pm/ja" target="_blank" rel="noopener"><span style="padding: 1em 1em; margin-bottom: 1em; background:#66ccff;border-radius: 1em; "><font color="#ffffff">通常配送BOOTH</font></span></a></p>
以下2つは「カーソルをあわせた時に下線が出ないように設定」されていますが「頒布物説明」専用で使用してください。
店舗の説明に使う場合、レイアウトが大きく崩れる場合があります。
「頒布物一覧」画面で見るのが一番キレイなので、「頒布物一覧」に説明文を全部入れる形式(後述・divタグ等で文を囲む)で作る時に特にオススメです。
◆角丸ボックス ボタン風リンク 上下に2個並び
(カーソルをあわせた時に下線が出ないように設定)
<p style="margin-bottom: 3em;"><a href="任意の書店等のURL" target="_blank" rel="noopener" style="text-decoration: none;"><span style="font-size:2em;display: block; padding: 0.3em 0.6em; margin-bottom: 0.5em; background:#ffff00;border-radius:0.3em;"><font color="#000000">
任意の書店等の名称
</font></span></a><a href="BOOTH_URL" target="_blank" rel="noopener" style="text-decoration:none;"><span style="font-size:2em; display: block;padding: 0.3em 0.6em; margin-bottom: 0.5em;background:#66ccff;border-radius: 0.3em;">
<font color="#ffffff">
BOOTH
</font></span></a></p>
◆角丸ボックス ボタン風リンク 1列に2個並び
(カーソルをあわせた時に下線が出ないように設定)
※表示時に文字列が長いと横並びにならないので、長い名称のときはfontタグにサイズを追加し<font color="#000000" size="5">
などにして調整
<p style="margin-bottom: 3em;"><a href="任意の書店等のURL" target="_blank" rel="noopener"><span style="font-size:2em; display: inline-block; padding:0.3em 0.6em; margin-bottom: 0.5em; background:#ffff00;border-radius: 0.3em;"><font color="#000000">
任意の書店等の名称
</font></span></a>
<a href="BOOTH_URL" target="_blank" rel="noopener"><span style="font-size:2em; display: inline-block;padding: 0.3em 0.6em; margin-bottom: 0.5em;background:#66ccff;border-radius: 0.3em;"><font color="#ffffff">
BOOTH
</font></span></a></p>
角丸ボックスは以上になります。ありがとうございました!
四角カラーボックス
TMS.fes主催様(イベント用インフォメーション)から教えていただきました、ありがとうございました!
イベント用に公開されたタグ(改訂版)はこちらからご確認ください。 ★pictSPACE店舗説明に入力★
他の解説サイト様でも同様のボタン風のタグが紹介されているのですが、他記事で紹介されているタグとは指定方法が異なるので別で紹介致します。
ご利用の際はリンク先や文言を自分のアカウントや自分の通販ページなどに書き換えてご利用ください。
画像は「店舗説明」(会場内でサークルカットを押したら出てくる説明)での表示見本です。「頒布物説明」でも同じようにキレイに表示されます。
タグの大まかな解説
【わかりやすいように タグをリンクごとに分割表示したもの(作業用)】
「<a href=」~「</a>」までが1かたまりでボックス1個分です。
不必要なリンクのボックスは消して、必要な部分だけ残して使ってください。
<a href="★自分のTwitterアカウントのURL★" target="_blank" rel="noopener"><div style="text-align:center;background:#00aced;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">Twitter</div></a>
<a href="★自分のpixivのURL★" target="_blank" rel="noopener"><div style="text-align:center;background:#12a5f4;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">pixiv</div></a>
<a href="★自分のとらのあな通販URL★" target="_blank"><div style="text-align:center;background:#ff9900;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">とらのあな</div></a>
<a href="★自分のフロマージュ通販URL★" target="_blank" rel="noopener"><div style="text-align:center;background:#385780;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">フロマージュ</div></a>
<a href="★自分のBOOTHのURL★" target="_blank" rel="noopener"><div style="text-align:center;background:#ff5c67;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">BOOTH</div></a>
【実際に「店舗管理」の「店舗の注意事項など」に貼る状態のもの(実際に貼付用)】
ピクトスペースの「店舗の注意事項など」の項目に書き込む時、タグごとに改行が入っていると実際の表示時にものすごく隙間があきます。
文言やURLを自分用に書き換えたあと、下記のように全タグ改行無しで貼り付けてください。そうすると見本のように最小の隙間で表示されます。
(上記の「pictSPACE店舗説明に入力」リンク先で配布しているのと同じ改行のない状態に戻す)
改行消しは先に紹介した記事で出てきた「半角・全角スペース、空行、改行の自動削除機(原稿支援ツール)」を使うと、タブスペース無し改行無し状態に整えるのが簡単です。
<a href="★自分のTwitterアカウントのURL★" target="_blank" rel="noopener"><div style="text-align:center;background:#00aced;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">Twitter</div></a><a href="★自分のpixivのURL★" target="_blank" rel="noopener"><div style="text-align:center;background:#12a5f4;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">pixiv</div></a><a href="★自分のとらのあな通販URL★" target="_blank"><div style="text-align:center;background:#ff9900;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">とらのあな</div></a><a href="★自分のフロマージュ通販URL★" target="_blank" rel="noopener"><div style="text-align:center;background:#385780;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">フロマージュ</div></a><a href="★自分のBOOTHのURL★" target="_blank" rel="noopener"><div style="text-align:center;background:#ff5c67;padding:0.8em;margin:0.5em;text-decoration:none;color:#eeeeee;">BOOTH</div></a>
当ブログからコピペしても動作するはずですが、できるだけ配布元からコピーして使用してください。(全角文字エラー防止のため)
ボックス型の見出し・リンク と 頒布物一覧画面に文章をすべて表示
にしおか様が執筆された、「NEW見出し」「年齢制限見出し」「外部通販リンク」など、頒布物詳細ページに使えるタグを配布してくださっている記事を紹介します。
見出しセットに加えて、パーツごとに別れたタグも配布してくださっているので、文字を書き換えて通販以外の見出しにも使いやすいです。(「無配あります!」「予告本です!」などなど)
pictSPACE店舗説明文の装飾タグ
同人専用自家通販サービスの pictSPACEさんで設置できる店舗スペースの説明文に、htmlが使用できるとのことだったので、装飾タグを作成してみました。
ご自由にコピー&ペーストしていただき、オンライン同人イベント参加の際の店舗設営の際にお役立てください。
※店舗の設置方法については pictSPACEさんのサイトをご覧ください。https://qiita.com/nishioka1226/items/f3df4cf1aaaed9d4011f#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB
◆グラデーションボックス
上記の配布タグにはグラデーションボックスも含まれるため、色コードを書き換えればグラデーション表示も自由自在に使える!はず(要基礎知識)。
【カスタマイズ参考】グラデーション色見本(カラーコード配布)
Fresh Background Gradients | WebGradients.com
◆頒布物一覧画面に長文を表示(閲覧者のクリックの手間を減らす)
リンク先記事のタグでは頒布物説明文を「div」タグで挟んでいますが、この場合「頒布物一覧の画面に文章全部が表示される」状態になります。
(長い文章の末尾がリンク先の頒布物詳細ページに送られず、文字やボックスが自動縮小されて全文表示される)
よくわからなかったら「ダミー頒布物」の項目を作って、上記のタグを記入して表示テストをしてみてください。
反面、頒布物一覧ページの文字が小さくなるため、あまり長文だと見づらくなります。
表示については各自の好みになるので、いろいろ試して好みのレイアウトを自分で見つけてください。
【ピクトスクエアの表示仕様の推測】
文字が縮小されて全文表示される謎仕様(多分エラー的なもの)については、divタグだけでなく「頒布物説明の80文字前後の場所にhrタグを入れると発生する」という話を見かけました。
現状の仕様だと、「頒布物詳細の文」の80文字付近に何かしらのタグがにあると全文が一覧画面(詳細ボタンを押す前の画面)で表示されるようです(推測)。
タグの位置によっては最初は文字が大きく、途中から文字が小さくなるので、うまくデザインしないと違和感がある見た目になります。
長い文章を「すべて同じサイズの文字」で頒布物一覧画面に表示させたい場合は、全文をdivタグで挟むのが良さそうです。
PictSQUARE用 PictSPACE html記述サンプル群
こちらのhtmlタグは、boothでhtml形式ファイルで配布しています。
葛葉璃乃様が作成したタグを公開・配布してくださいました。ありがとうございました!
小型の角丸(楕円)ボタンのタグです。
かんぴょまき。売店
PictSQUARE用PictSPACEhtml記述サンプル群
pictSQUAREで使えそうな記述色々詰め合わせ
こちらのhtmlタグは、boothでhtml形式ファイルで配布しています。
甘夏みかん様が作成したタグを公開・配布してくださいました。ありがとうございました!
書店・ギフティ リンクボタン & 文字装飾詰め合わせです。文字修飾はスクロールバー付きボックスや折りたたみボックス、各種文字修飾など、様々な形式が揃っています。
使用するには基礎程度のhtmlの知識が必要になります。
こちらも配布データをコピペするだけで使えますが、html作業用のエディタを用意するのと、タグの開始位置と終端や、文字修飾の設定変更にはどの場所の数値をいじればいいか程度の知識は必要だと思います。
ちょっと難しそうに書きましたが、基本的にはコピペして使うだけなので初心者でもいけるいける(使用者様のやる気に丸投げの姿勢)。
なお注意事項。
5:ピクスク用に改行を削除(こうしないとピクスペの方だと改行されまくって表示が壊れます)
↑Terapadの場合、コードをまるっと選択し、変換→改行削除で一括削除できるので楽です
※先に紹介した記事で出てきた「半角・全角スペース、空行、改行の自動削除機(原稿支援ツール)」を使って改行を削除するのも簡単です。
表示がおかしい場合はタブ・改行消し忘れをご確認ください。
ダウンロードはこちらです。
※20.12.10にデータの修正がありました(半角スペースを追加)。詳細はboothダウンロードページの説明にて。
pictSQUAREで使えそうな記述色々詰め合わせ
https://amanatsumikan.booth.pm/items/2425472
■内容物
・各委託書店風ボタン+α.html とらのあな/メロンブック/アリスブックス/Booth/giftee(2種)
コピペしてURLを書き換えて改行をつぶせば使えるタイプのボタン
・文字装飾関係.html
ピクスク対応の文字装飾や折り畳み、スクロールバー、水平線等
・タグボタン.html タグ風のボタン
基本的なのは取り揃えたつもり
改造すれば自分専用のボタンも作れますが要html知識
流れる文字……おまえ生きていたのか………。
PictSQUARE用 PictSPACEで使える HTMLテンプレート集
こちらのhtmlタグは、boothでhtml形式ファイルで配布しています。
上記と同じく、甘夏みかん様が作成したタグを公開・配布してくださいました。ありがとうございました!
こちらはboothでテンプレートファイルを配布しています。
PictSQUAREで使えそうな感じの、PictSPACE用のhtmlテンプレートです CSSが反応しなかったのでかなりコーディングが回りくどいことになってます
PictSQUARE対応 ジャンプリンク付きの目次の作り方
甘夏みかん様が作成した記事です。
基本的には当記事で紹介している「htmlタグを使って表示した項目」に対して使います。(理由は後述)
便利ですが、後から頻繁に項目(頒布物説明)を追加する場合、管理が若干ややこしくなるので、ある程度htmlを分かっている人向けかもしれません。
説明付きなのでnoteの記事で使い方を解説しつつタグを配布されています。(タグ自体は簡単ですが、入れる場所の説明がむずかしい)
PictSQUARE対応ジャンプリンク付きの目次の作り方|甘夏みかん|note
ピクトスクエアで<a href=”#タグID”></a>のタグを使って、目次から該当の記事に飛ぶ「ページ内リンク」を作るという記事です。当記事の目次と同じ仕組みです。(この記事先頭の目次参照)
上記だけではわからない人はこっちも読むといいかも。
【初心者向け】HTMLで目次を作る方法と陥りがちなミス
上記の記事のタグについて、どういう動きをするかわからない人に文章で説明できる自信がないので実演店舗を作りました。
リンク先はPictSPACE店舗ですが、PictSQUARE上の「頒布物一覧」ページでも同様の動きをします。
※2021/5月現在、PictSPACEの表示方法が変わってジャンプリンクのデモ店舗が作成時に意図した通りに動かせないため見本として使えない状態です。すみません。
このPictSPACE実演店舗上で見て分かるように、PictSPACE店舗では頒布物詳細は文字数がいくつでも全文表示されますが、PictSQUERでは一定文字数以上は省略されます。
「目次に戻るボタン」が省略で消えてしまうのを回避するには
1.ボタンの位置をかなり前に持っていく
2.本文をとにかく短くする
3.htmlタグを使って説明文を書くと文字数に関わらず全文表示されるバグ(仕様)があるためそれを利用する
の、どれかを使うことになります。
1.2の方法だと使い勝手が悪くなるため、目次とジャンプリンクは実質上「htmlタグを使って表示した項目」専用の表示となります。
◆おまけ テスト店舗で使っていた「目次に戻るボタン」存在感があるバージョンのタグ
「id0*000
」の*部分は、目次部分と対応した好きな数字(id)に変更してください。
<!--空白調整--><br>
<!--もくじのジャンプ先--><a id="id0*000"> </a><br>
<!--目次に戻るボタン-->
<a href="#index00000"><span style="font-size:2em; display: inline-block;padding: 0.3em 0.6em; margin-bottom: 0.5em;background:#66ccff;border-radius: 0.3em;"><font color="#ffffff">menuに戻る</font></span></a></p>
サークル代表情報を頒布物一覧に表示
サークル代表0円、というお値打ち情報の話ではなく。いやお値打ち情報なのですが。
見本画像の通り「サークル代表情報を頒布物一覧に表示出来る」htmlタグをLR(るあ)様が開発して、ご自身のpixivFANBOXにて公開された記事をご紹介致します。
たくさんの情報がとってもスッキリ!
pixivFANBOX LR(るあ)
複数のサークル情報URLを頒布物一覧に表示したい方は、こちらが便利だと思います。
こちらのタグも半角・全角スペース、空行、改行の自動削除機(原稿支援ツール)を使って改行を削ると最後の仕上げがらくらくです。
見本画像は改行を全て消した状態でタグを頒布物説明欄に貼り付けています。
ぴくすくでなんか綺麗に見える頒布物一例
蘇芳飛鳥様が作成した記事です。
見ての通りブロック分けで表示されるので、区切りををスッキリ分けて見せたい人におすすめです。
詳しい解説はリンク先の記事本文にてご確認ください。
記事内にタグが例示されています。
ぴくすくでなんか綺麗に見える頒布物一例|蘇芳 飛鳥|note
※リンク先記事「プリント番号やプリント期限を見つけやすくする装飾のやりかた」公開終了につき折りたたみました
枠線カスタマイズ
上記記事「各作品投稿SNSへのリンクを貼り、装飾する」の項目の「パスワードを強調するために囲っている枠線」について。
タグ最後のこの部分で枠線が指定されています。
<div style="margin: 20px 0; padding: 10px; border: 10px double #ff0000; font-size: 1.6rem; color: #ff0000; font-weight: bold; text-align: center;">
パスワード:xxxxxxxx
</div>
この部分は、下記の記事で紹介されている飾りワクのタグに入れ替えることができます。
見本から枠線をカスタマイズしてみたい方はこちらを参考にしてみてください。
もか様のブログより
moca*Bloggerメモ*2nd 初心者向けブログカスタマイズとTwitter活用法
HTMLのみ*コピペで簡単♪かわいい囲み枠デザイン
https://www.moca-memo.com/2019/10/kakomiwaku.html?m=1
こちらの記事の飾り枠だと文字が左寄せになっています。
「各作品投稿SNSへのリンクを貼り、装飾する」の記事のように「文字を強調・中央に配置」に修正する場合は「font-size: 1.6rem; color: #ff0000; font-weight: bold; text-align: center;
」の文字に関する指定部分をコピペします。
元々のタグの後ろに「半角空白」+「文字指定タグ追記」という修正をしてください。
元々のタグ。
【ステッチ風囲み枠】
<div style=" background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 90%; ">
ここに本文を入れます♪
</div>
↓(文字指定追加)
修正後のタグ
<div style=" background: #ffe6e8; padding: 20px; border: 2px dashed #ffb6c1; box-shadow: 0 0 0 5px #ffe6e8; -moz-box-shadow: 0 0 0 5px #ffe6e8; -webkit-box-shadow: 0 0 0 5px #ffe6e8; font-size: 90%; font-size: 1.6rem; color: #ff0000; font-weight: bold; text-align: center; ">
ここに本文を入れます♪
</div>
枠を変更し、文字を目立たせる修正ができました。
パスワードのような「目立たせる一文」ではなく、普通の文章を入れる場合は、ブログに記載の見本をそのまま使ってください。
上記ブログで紹介されていた囲み枠の記事も参考としてご紹介。いろいろなデザインを探したい方はこちらもどうぞ。
こちらで紹介されているものだとCSSがかなり複雑になってくるのと、自分で本文記述式のhtmlに書き換える必要があるので、ピクトスクエアでどこまで使用可能かはわからないので各自で試してみてください。
【HTML・CSS】コピペで簡単!ボックス(囲み枠)デザイン記事まとめ
https://miyazakilife.com/design/5683/
まとめ
この記事では皆様がテストして公開してくださった各種タグを紹介しました。
掲載を許可してくださったみなさまに御礼申し上げます。
20.10.25現在の仕様のままなら、紹介したタグをそのままコピペ、または分かる範囲で書き換えれば、ある程度カスタマイズできるかと思います。
タグ自動生成ツールの作者の皆様、ピクトスクエア用にタグを作って教えてくださった皆様、公開してくださった皆様、本当にありがとうございました!
紹介した他にも色々な方がタグを配布されていると思います。自分の好みに合わせて色々なタグを使ったりカスタマイズしてみてください(html沼)。
最後にですが、タグがうまく動かなくて、全角半角・改行チェックしてもうまく行かない場合はおとなしく諦めて一回寝ることをおすすめします。
また、タグを配布している作者さん達に聞きに行くのも禁止です。公式サポートへの質問は更に絶対禁止です。
検索すればいくらでも講座は出てきますし、コピペした・改行消したと思っても、実はちゃんと出来ていなかった、修正が反映されないと思ったら入力する場所・見る場所を間違っていた等の単純ミスもあります。
きれいな表示には憧れますが、第三者に迷惑かけてまで作るものではないので、駄目だった時はすっぱり諦めるのも必要です。
最悪の場合「ブラウザとの相性のため自分の環境では崩れて見えるタグだった」「この場所でキレイに表示させる事はできない」ということもありえるため「時間をかけてがんばればきれいに表示できる」と限らない事も時々ある。
各自、できる範囲で素敵な説明文を目指してください。
この記事が作業のお手伝いやヒントになれば幸いです。
余談
「pictSPACE上に他所へのリンク作って飛ばす記述は許されるのか」についてですが、pictSQUARE公式ツイッターが20/8/30に「店舗URLから開く頒布物一覧を作成」について説明しているブログ記事をRTしていて、記事を目にされた方も多いのではと思います。
それがあったので、「あれっ、いいんだ?」と、それまで迷っていた「htmlでリンクを作る」ことについての解説記事(当記事)を作り始めることにした、という経緯があります。
そちらの記事は確かpictSPACE内での複数店舗へリンクを作成して便利に使う方法紹介が主で、外部リンクに関しては大きくは扱っていなかったと記憶しています。
とはいえ、方法を紹介していたということは「リンクタグを使うこと、リンクタグでpictSPACEの機能を補うこと、は公式でも問題ないと考えている」ようです。
pictSPACEの機能を使いつつ外部(特に同業他社にあたるboothや書店)へのリンクはかなり迷うところですが、とりあえずはサークル参加費550円に持ち込み料金が入っている、紫の水晶玉からリンクを貼るのと同様の扱いとされている、と(勝手に都合よく)解釈しておこうと思います。積極的に禁止していないご好意に甘えておきます。
ただ、運営から正式に外部通販へのリンク禁止という通達が出たら当記事は修正するか閉じると思います。
「pictSPACE内から外部リンクを貼ってもいいのか」とは別の話ではありますが、実際問題として、現状開催されているイベントで通販されている冊子全てがpictSPACE通販(運営を経由する匿名配送)に回されたとしたら、通販処理しきれるのだろうか…?という疑問が。
今のところ、通販を全て請け負うと仮定した場合の設備投資と、一時的にすごく混むが平時はそこまででもないという作業量の不安定さが釣り合わないため、他の専門業者と通販分担したほうがやりやすいと判断しているのかなあと勝手に推測しています(盆と正月に作業が詰まるとらのあな様を見つつ)。
今後「外部リンク禁止」となる可能性もありますが、今のところはありがたくhtmlと外部リンクを使わせてもらおうと思います。