【htmlで『店舗・頒布物』の説明文を作る】pictSQUARE(ピクトスクエア)サークル設営についてのメモ

WEB即売会システム「pictSQUARE(ピクトスクエア)」の店舗説明や頒布物説明で使えるhtmlタグについてのメモ(リンク集)です。

作ったタグの情報を公開して下さった皆様ありがとうございます…！

 

【21.8.23】htmlリンクが作れるジェネレーターのご紹介

【コピペで簡単】pictSQUARE(ピクトスクエア)用のHTMLジェネレーター・テンプレートのメモ – min.t (ミント) (togetter.com)

単純なリンクを作るだけならこちらのツールが一番簡単です。もっと凝った見た目にしたい時はこの先の記事本文で紹介している各種テンプレートをご利用ください。

 

 

当記事では、タグを自動生成してくれるオンラインツールや、コピペで使えるhtmlタグ(及び解説記事)を紹介しています。

タグ使用についてのハードルをめっちゃ下げるのが目的なので、らくらくかんたんコピペでタグを貼り付けてライバルに差をつけようライバルってなんだ。

htmlは雛形があれば、簡単にカスタマイズできます。この記事で紹介したタグをコピペして、頑張ってつくった作品をアピールするのにご利用ください。

 

 

 

 

 

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]  機能追加

「pictSQUAREで入力する【プロフィール情報】が店舗にも表示される」機能が追加されました。(サークル参加時に対象の機能)

今まではアバターをクリック→「プロフィール」のボタンが出る→押すとプロフィール情報が表示される、という仕様で、アバタークリック時にのみ表示されていました。

店舗の看板をタップしたときにお品書き等が表示されますが、ユーザー情報も表示されるようになりました。
プロフィール情報の「活動サイト」もリンクされますので、是非ご活用いただければと思います。 pic.twitter.com/lG6EyjirdT

— pictSQUARE@オンライン即売会サービス (@pictsquarenet) May 6, 2021

★pictSPACE(通販サイト)を使わなくても、pictSQUARE(イベント会場)の「ユーザー設定→プロフィール」に記入することで参加者全員が任意のURLを店舗に表示することができるようになりました。

★今まで手入力htmlで(サークルカットを押すと出る画面に)外部へのリンクを作っていましたが、公式機能でも対応できるようになりました。現状では『活動サイト』に記入したURL3つまで表示可能です。

★「自己紹介」のテキスト入力エリアにhtmlタグを入力した場合、店舗のサークルカットクリック時に出るウィンドゥに反映されます。単純な文字リンク、ボックス表示タグ等は反映されたので、4つ以上外部リンクを作りたい場合はhtmlタグを併用することで表示可能です。

★ただし「プロフィール」の内容は「サークルカットとお品書き画像の上側下側」に表示されるため、あまり長々書くとサークルチェック時に見にくくなるのでご注意ください。(※上側表示で実装された後、お品書きが見にくくなると評判が悪かったため後日に下側・ボックス内に表示に修正されました。今後も表示形式が変更されるかもしれません)

 

 

 

当記事の親記事はこちらです。カスタマイズ関係(店舗・アバター)に関しても解説しています。よろしければ合わせてお読みください。

pictSQUARE(ピクトスクエア)参加とサークル設営についてのメモ[20.08.05版]

【上記に追記した記事一覧】

◆オリジナルアバターを描くためのツールや素材まとめ

◆ドット素材の拡大のしかたと、オリジナル店舗をつくる素材まとめ

◆無料オンラインツールでサークルカットと画像店舗を作る

◆無料ツールで文字作品を縦書きに編集し印刷できる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の区別が完全についている人は読み飛ばして大丈夫です。

 

 

ピクトスクエア – オンライン即売会サービス

WEB上のレンタルホールです(最近○○スクエアって建物名増えてますよね)。

主催さんはホールを借りてイベントを開けます。

参加者さんは「サークルスペース(売る場所)」「サークルスペース(売り場外観)」「アバター(個人外観)」を借りられます。

この記事で説明するhtmlはピクトスクエア上では入力する場所は現状ありません。

【21.5.6機能追加】ピクトスクエアの「プロフィール設定」の「自己紹介」欄にhtmlタグを入力すると、店舗のサークルカットクリック時に出るウィンドゥに反映されます。

ピクトスクエアでもう1つhtmlを使える場所があります。イベントを立ち上げて「イベント説明文を表示」させる場所です。これは主催機能なので一部の人のみが使う機能になります。

主催機能「サークル参加時の設問設定」や「お知らせ」などでは、20.11月時点の仕様ではhtmlタグは使えません。

 

 

あくまでレンタルホールなので、ピクトスクエア運営はイベントは開きません。(なおpictBLandもピクトスクエア運営と同じ会社です)

むしろイベントの運営自体よくわかっていないレベルの「システム屋」「webシステムのレンタル屋」です。

※悪い意味で言っているのではなく、システム屋がユーザーの内情をよくわかっていないという例はたくさんあるというか割と普通です。pixivとか…。

要望を出すときには「こちらの事情をわかっていない」前提で説明しないと、話が通じない可能性があるのでご注意ください。

 

 

 

 

 

 

 

pictSPACE – 創作活動を支援する同人専用自家通販サービス

pictSPACEはピクトスクエアと同会社のサービスで、連携した場合html表示が使えます。

pictSPACEはbooth、STORESと同様の通販システムレンタルで同業他社です。

もとからあった「pictSPACE」に「webレンタルホール・ピクトスクエア」を後付するかたちのサービスのため、説明を斜め読みするとどっちの話かわからなくなって混乱するので注意してください。

この記事では赤い本=倉庫 pictSPACEと色を付けて話します。

 

pictSPACEはWEB通販サービスの一つで、WEB即売会だと自スペースの通販倉庫として使います。

サークル参加者はpictSPACEに自分の配布・頒布物を詰めた自サークルスペース(在庫の詰まったバックヤード)を作って、ピクトスクエア(webレンタルホール)にくっつけて、無料配布や通販をします。(サークル申込時に自スペース固有のコードを入力して紐付ける)。

アレです最近流行の異世界転生物に出てくる「アイテムボックス」のスキル(わかりにくい例え)。

 

「在庫の詰まったバックヤード」はpictSPACE以外にもbooth、委託書店、minne、ピコ通販、自家通販、など色々指定可能です。ただしhtml説明文が使えるのはpictSPACEだけです。

 

 

 

pictSPACEを使う場合

こちらの記事では、イベントが開催される貸しホール「ピクトスクエア(内のサークルスペース)」にくっつける通販倉庫を「pictSPACE」に指定した場合に使えるhtmlタグの話をしています。

サークルスペース中央に赤い本がある状態で、赤い本をクリックしたり、サークルカットをクリックすると出てくる説明文が対象です。

 

1か所目　赤い本

赤い本をクリックすると「頒布物一覧(サムネイルと説明の一部)」→「頒布物詳細(サムネイルと説明全文)」の順で表示されます。

赤い本ではpictSPACEの「頒布物説明」(頒布しているアイテムの説明)に入力した内容が出てきます。アバターが入店しないとクリックできません。

※pictSPACEメニューの「店舗設定」→「店舗管理」内から、編集したい店舗の「店舗管理画面へ」ボタン押す →「頒布物管理」タブ選択 → (頒布物新規作成) → 編集したい頒布物の「編集」ボタン押す →「説明文」の項目に説明記入して保存

 

 

2か所目　サークルカット

サークルカットをクリックすると、全員共通で「お品書き画像」が出ます。サークルカットは店外からでもクリックできます。

pictSPACE利用時は、「お品書き画像」の下に追加で「店舗の注意事項など」に入力した内容(文章)が出てきます。

ここには「自己紹介」「サークルの傾向説明」「今後の活動予定」などを書いておくといいと思います。

※pictSPACEメニューの「店舗設定」→「店舗管理」内 → (頒布物新規作成) → 編集したい店舗の「店舗管理画面へ」ボタン押す →「店舗管理」タブ選択→「店舗の注意事項など」の項目に説明記入して保存

 

 

 

 

 

pictSPACEを使わない場合

別会社の通販システム(booth、委託書店、minne、ピコ通販、自家通販、他)を利用する場合、サークルスペース中央には紫の水晶玉が出て外部通販サイトへと飛ばされるため、自分で説明文を入力する欄はありません。この記事に書いてある話は関係ないので、頑張って読まなくても大丈夫です。

pictSPACEではこういう事もできるので時間があればまた今度、という認識で内容をご確認ください。

 

 

 

注意

ピクトスクエア(イベント概要など)/pictSPACE(サークル・通販説明)では、単純なhtmlタグならほぼ100%思った通りに動きます。

当記事後半の見た目を指定する複雑なタグの場合、9割は思った通りの動きをするけれど、もしかしたら極稀に表示が崩れて見える場合もあるかもしれない、ということはご留意ください。

(ピクトスクエア/pictSPACE側でどういう指定をしているかわからないため、通常のブラウザではキレイに表示されるタグもピクトスクエア上では予想外の動きをする可能性がある。ブラウザによっては表示が崩れることがある。機能更新で突然使用不能になる可能性がある)

 

あとは、一度pictSPACE上で保存するとタグが予想外の文字に置き換わることがあるため、難しめのhtmlの編集は別のシンプルなエディタ上で書いてから、pictSPACEのエディタにコピペして保存するのが安全だと思います。

 

pictSPACEにあるオンラインエディタは「文章を書くこと」を重視したエディタなので、文章をきれいに表示するための制御記号を自動で挿入します。このブログで記号が全角になってしまうのも同様の理由です。

基本的には「半角文字のhtml」の複雑な文字列を編集するのには向いていません。

 

 

htmlタグをコピペ時の注意

このブログではhtmlタグは当然 半角 で記述していますが、表示時点でwordpressが一部を勝手に 全角 に変換しています(コピペしたタグ誤動作の原因はだいたいそれのようです)

この記事のhtmlタグに関しては半角表示する指定をしていますが、コピペして貼り付けたけどタグが動かなかったり、リンクを作った時にピクスペ内に飛ばされる等の変な動きをしたら、コピペしたタグに全角が混ざっていないか確認してください。(シンプルなテキストエディタなどにコピペするとわかりやすいです)

ダブルクォーテーション「”」が全角になっていることが多いようです。見た目が半角でも騙されてはいけません。

当ブログからコピーしたタグの動作がおかしかった場合は、文章編集ソフト(エディタ)の検索・置き換え機能ですべて半角に置き換えてご利用ください。

 

 

 

 

 

 

 

 

基本のタグ　文字修飾 や リンク

基本の「文字修飾」と「リンク」の設定ができれば、通販宣伝の大抵のことは片付きます。

時間がない人はこの項目だけ読めば必要な設定ができます。

基本のタグが作れるオンラインツールをご紹介します。

 

タグ打ちがわからない? リンク集が作れる 既存ツールを使おう

「タグを打つよりリンク集自動生成ツールが知りたい」

タグの説明をする前に「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アカウントをまとめたい人必見！カンタンにプロフィールページが作れるサービス４選

https://do.gt-gt.org/making-prof-page/

 

上記の他にも便利なサービスは色々あります。時間がありましたら自分にあったものを探してみてください。

 

 

 

 

 

【文字色変更タグ】　文字色変更自動生成ツール

 

HTMLタグの文字を装飾する設定

https://www.bannerkoubou.com/html-tag/moji/

細かく色を変更したい場合は、タグ内の「color=”#FF0000“」ここの英数字を変更するか、colorタグを検索して色指定の方法を確認してください。

【色見本】

HTMLカラーコード: WEB色見本 原色大辞典

HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定

 

 

 

 

【リンクタグ】　リンクタグ自動生成ツール

「表示させる文字(リンク先の文字列)」と「飛ばす先のURL」を別で指定してタグを生成できます。

リンク切れ対策と、ブラウザによっては動かないかもしれないので、複数のツールを貼っておきます。

どのツールでも「新しいウィンドウ(別窓)」の指定にチェックを入れてください。

 

 

 

☆タグの部屋

https://tagnoheya.com/tag/link.html

 

初心者にもやさしいリンクHTMLタグ作成

http://sunafukey.fc2web.com/urltool.html

 

簡単に別窓で開くリンクを作るツール

http://tachibana.id25.com/sofware/link_blank.html

 

aタグ作成ツール – ブログHPツール

https://www.webtoolss.com/linktag.html

 

 

上のツールで生成したタグに

「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タグ総合 オンラインツール)

 

Online HTML Editor
http://asomin.net/htmleditor/

画面下側に「エディター」と「ソース」の切り替えボタンがあります。

上側メニューで文字を修飾したら、下側ボタン「ソース」をポチッして切り替えると、出来上がったタグが出てきます。

コピペして、ピクトスペースの「店舗説明」または「頒布物説明」に貼ってください。

 

「文字サイズ」「色」「太字や斜体などの文字修飾」程度なら問題なく動くと思います。それ以外は何処まできちんと動くかわからないので、各自で試してください。

 

 

 

 

タグの改行や空白消しが自動でできるオンラインツール

pictSPACE・ピクトスクエアはおそらく大本で読み込んでるスタイルシートで改行幅や文字サイズ他が決め打ちで指定されているようなので、ユーザー側がhtmlタグでいろいろ指定しても、全部思った通りに反映されるとは限りません。

そのためちょっとした変更のつもりが思わぬ時間がかかることがあります。

1度試してみて思った通りの表示にならなかった場合、技術力に自信があるか、余裕がある時以外は、htmlタグと格闘するのはおすすめしません。

 

そういったミスを減らすため、自動で改行や空白消しができるツールをご紹介します。

次に紹介する記事で出てくるこちらのオンラインツール

半角・全角スペース、空行、改行の自動削除機（原稿支援ツール）

を使うと簡単です。

この記事に貼ってあるhtmlタグも、見やすくするために改行を入れています。ツールの「タブを除去」「改行を除去」ボタンで整えてからpictSPACEに貼り付けてください。

 

 

 

 

 

 

 

見た目を綺麗に！色々なタグを使ってみよう(コピペで)

ここからは見た目に凝って、キレイに表示するタグです。

htmlでの頒布物 通販説明表示について、わかりやすく解説してくださっている記事をご紹介します。

さび様が作成された記事です、ありがとうございます！

タグを直接コピペ可能なので楽ちんです。

 

 

最初の記事は「pictSPACE」つまり「通販倉庫」「サークルスペース倉庫内部」側での話です。(スクエア＝イベント会場側、の話ではない)。

ただし操作方法がわかりやすく解説されているので、先にこちらを読むと理解が深まります。

pictSPACEでHTMLタグを入れる【コピペでできる・スマホ対応】

https://naruheso.hateblo.jp/entry/2020/09/26/031252

 

 

 

 

 

上記記事で操作方法をわかった上でこちらを読むと、なるほどよくわかる。

今度はピクトスクエア(会場側)から見てもOK、というタグの話です。実際に使うタグはこちらの記事を参考にすると良いと思います。

ピクスクからみてもOK！pictSPACE 頒布物・お品書き下部分の装飾HTMLタグ

https://naruheso.hateblo.jp/entry/2020/10/02/235319

 

記事では現在4種類のタグセットが紹介されていますが、そのうち2種類の表示見本を紹介します。

残り2種類や色変え方法など、詳しくはリンク先記事でご確認ください。

 

 

 

こちらの記事で解説されているタグをまるっとコピペして文言を書き換えれば、キレイな見た目にしたいという目的はさくっと解決！となります。

 

 

次は更に細かくカスタマイズしたい人向けの、見出しやボタン等に使えるタグです。

 

 

 

 

 

 

見出しやリンクをボタン風にカラーボックス表示してみよう

通販の説明の装飾に特化した記事の次は、説明文などをカスタマイズしていくタグをご紹介します。

 

カラーボックスを使ったリンク表示について、イベントやブログ記事などでhtmlタグを配布してくださっているサークル様がいらっしゃったので、ありがたく教えていただきました(タグ掲載許可済)。

ありがたやありがたや…。

 

角丸と四角を教えていただいたので、これだけあれば基本的な表示はだいたいできると思います。

もっとカスタマイズしたいとか、タグの意味を詳しく知りたい人は、タグ+htmlで検索すると講座が色々でてくるので、そちらで勉強してみてください。

 

 

角丸カラーボックス

「uf-stgt」(https://uf-stgt.booth.pm/)きみどり様より教えていただきました。ありがとうございました！

この項目のタグの一部についてはオリジナルから多少変更を加えています(色変更など)。

 

表記がない場合、白背景がpictSPACE店舗、灰色の背景がピクトスクエア(イベント会場)での表示サンプルです。

基本的には「頒布物説明」用のタグですが、一部は「店舗説明」でも表示が崩れず利用できます。

自分がテストした際は「店舗説明・頒布物一覧・頒布物詳細」のどの画面でも比較的安定した見た目で表示されました。

 

下記はタグを読みやすいように一部改行を入れています。このブログからコピペして使う場合は調整が必要です。

改行やタブ消しは、先に紹介した記事で出てきた「半角・全角スペース、空行、改行の自動削除機（原稿支援ツール）」を使うと簡単です。

タグのダブルクォーテーション「”」が全角になっている可能性があるので、念の為エディタの検索・置き換え機能で半角に修正してください。

 

 

 

◆角丸・大ボックス(オレンジ)に太字サークル名リンク

一番シンプルで使いやすい見出しです。h1タグを使っているので自動で文字サイズが大きくなります。

見出し

リンクあり

 

 

 

◆角丸・小ボックス(水色)に白文字の見出し

見出しが横幅いっぱいだと強すぎる時にはこちら。

 

 

 

 

◆角丸・大ボックス(水色)に細字でboothのリンク

ボタン風に見えるリンクです。

このタグについては4種類の見本を載せています。同じタグでも表示場所によって見た目が大きく異なるのがわかると思います。

この記事で紹介しているタグも、表示する場所によっては思い通りの見た目にならない場合があります。ご注意ください。

 

 

 

 

 

 

 

 

 

◆角丸・小ボックス(水色・2個1行)に細字でboothのリンク

同じアイテムの頒布先が複数ある時に使えるボタンです。

 

 

以下2つは「カーソルをあわせた時に下線が出ないように設定」されていますが「頒布物説明」専用で使用してください。

店舗の説明に使う場合、レイアウトが大きく崩れる場合があります。

「頒布物一覧」画面で見るのが一番キレイなので、「頒布物一覧」に説明文を全部入れる形式(後述・divタグ等で文を囲む)で作る時に特にオススメです。

 

◆角丸ボックス　ボタン風リンク　上下に2個並び
(カーソルをあわせた時に下線が出ないように設定)

 

 

 

 

◆角丸ボックス　ボタン風リンク　1列に2個並び
(カーソルをあわせた時に下線が出ないように設定)

※表示時に文字列が長いと横並びにならないので、長い名称のときはfontタグにサイズを追加し<font color="#000000" size="5">などにして調整

 

 

角丸ボックスは以上になります。ありがとうございました！

 

 

 

 

 

 

四角カラーボックス

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店舗説明に入力」リンク先で配布しているのと同じ改行のない状態に戻す)

改行消しは先に紹介した記事で出てきた「半角・全角スペース、空行、改行の自動削除機（原稿支援ツール）」を使うと、タブスペース無し改行無し状態に整えるのが簡単です。

当ブログからコピペしても動作するはずですが、できるだけ配布元からコピーして使用してください。(全角文字エラー防止のため)

 

 

 

 

 

 

 

ボックス型の見出し・リンク と　頒布物一覧画面に文章をすべて表示

にしおか様が執筆された、「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

https://webgradients.com/

 

 

◆頒布物一覧画面に長文を表示(閲覧者のクリックの手間を減らす)

リンク先記事のタグでは頒布物説明文を「div」タグで挟んでいますが、この場合「頒布物一覧の画面に文章全部が表示される」状態になります。

(長い文章の末尾がリンク先の頒布物詳細ページに送られず、文字やボックスが自動縮小されて全文表示される)

よくわからなかったら「ダミー頒布物」の項目を作って、上記のタグを記入して表示テストをしてみてください。

 

反面、頒布物一覧ページの文字が小さくなるため、あまり長文だと見づらくなります。

表示については各自の好みになるので、いろいろ試して好みのレイアウトを自分で見つけてください。

 

【ピクトスクエアの表示仕様の推測】

文字が縮小されて全文表示される謎仕様(多分エラー的なもの)については、divタグだけでなく「頒布物説明の80文字前後の場所にhrタグを入れると発生する」という話を見かけました。

現状の仕様だと、「頒布物詳細の文」の80文字付近に何かしらのタグがにあると全文が一覧画面(詳細ボタンを押す前の画面)で表示されるようです(推測)。

タグの位置によっては最初は文字が大きく、途中から文字が小さくなるので、うまくデザインしないと違和感がある見た目になります。

長い文章を「すべて同じサイズの文字」で頒布物一覧画面に表示させたい場合は、全文をdivタグで挟むのが良さそうです。

 

 

 

 

 

 

PictSQUARE用  PictSPACE html記述サンプル群

こちらのhtmlタグは、boothでhtml形式ファイルで配布しています。

葛葉璃乃様が作成したタグを公開・配布してくださいました。ありがとうございました！

小型の角丸(楕円)ボタンのタグです。

 

かんぴょまき。売店

PictSQUARE用PictSPACEhtml記述サンプル群

https://booth.pm/ja/items/2386253

 

 

 

 

 

pictSQUAREで使えそうな記述色々詰め合わせ

こちらのhtmlタグは、boothでhtml形式ファイルで配布しています。

甘夏みかん様が作成したタグを公開・配布してくださいました。ありがとうございました！

書店・ギフティ リンクボタン & 文字装飾詰め合わせです。文字修飾はスクロールバー付きボックスや折りたたみボックス、各種文字修飾など、様々な形式が揃っています。

 

使用するには基礎程度のhtmlの知識が必要になります。

こちらも配布データをコピペするだけで使えますが、html作業用のエディタを用意するのと、タグの開始位置と終端や、文字修飾の設定変更にはどの場所の数値をいじればいいか程度の知識は必要だと思います。

ちょっと難しそうに書きましたが、基本的にはコピペして使うだけなので初心者でもいけるいける(使用者様のやる気に丸投げの姿勢)。

 

なお注意事項。

5:ピクスク用に改行を削除(こうしないとピクスペの方だと改行されまくって表示が壊れます）
↑Terapadの場合、コードをまるっと選択し、変換→改行削除で一括削除できるので楽です

※先に紹介した記事で出てきた「半角・全角スペース、空行、改行の自動削除機（原稿支援ツール）」を使って改行を削除するのも簡単です。

表示がおかしい場合はタブ・改行消し忘れをご確認ください。

 

ダウンロードはこちらです。

※20.12.10にデータの修正がありました(半角スペースを追加)。詳細はboothダウンロードページの説明にて。

pictSQUAREで使えそうな記述色々詰め合わせ

https://amanatsumikan.booth.pm/items/2425472

 

■内容物

・各委託書店風ボタン＋α.html とらのあな/メロンブック/アリスブックス/Booth/giftee（２種）

コピペしてURLを書き換えて改行をつぶせば使えるタイプのボタン

 

・文字装飾関係.html

ピクスク対応の文字装飾や折り畳み、スクロールバー、水平線等

 

・タグボタン.html タグ風のボタン

基本的なのは取り揃えたつもり

改造すれば自分専用のボタンも作れますが要html知識

 

 

流れる文字……おまえ生きていたのか………。

 

 

 

 

PictSQUARE用 PictSPACEで使える HTMLテンプレート集

こちらのhtmlタグは、boothでhtml形式ファイルで配布しています。

上記と同じく、甘夏みかん様が作成したタグを公開・配布してくださいました。ありがとうございました！

 

こちらはboothでテンプレートファイルを配布しています。

PictSQUAREで使えそうな感じの、PictSPACE用のhtmlテンプレートです CSSが反応しなかったのでかなりコーディングが回りくどいことになってます

https://amanatsumikan.booth.pm/items/2565913

• 
• 
• 

 

 

 

 

 

PictSQUARE対応 ジャンプリンク付きの目次の作り方

甘夏みかん様が作成した記事です。

基本的には当記事で紹介している「htmlタグを使って表示した項目」に対して使います。(理由は後述)

便利ですが、後から頻繁に項目(頒布物説明)を追加する場合、管理が若干ややこしくなるので、ある程度htmlを分かっている人向けかもしれません。

 

説明付きなのでnoteの記事で使い方を解説しつつタグを配布されています。(タグ自体は簡単ですが、入れる場所の説明がむずかしい)

PictSQUARE対応ジャンプリンク付きの目次の作り方｜甘夏みかん｜note

https://note.com/amanatsu_mikan/n/naeeb0a515f9a

ピクトスクエアで<a href=”#タグID”></a>のタグを使って、目次から該当の記事に飛ぶ「ページ内リンク」を作るという記事です。当記事の目次と同じ仕組みです。(この記事先頭の目次参照)

上記だけではわからない人はこっちも読むといいかも。

【初心者向け】HTMLで目次を作る方法と陥りがちなミス

https://room.trunk.school/product/7395

【初心者向け】HTMLで目次を作る方法と陥りがちなミス

 

 

上記の記事のタグについて、どういう動きをするかわからない人に文章で説明できる自信がないので実演店舗を作りました。

リンク先はPictSPACE店舗ですが、PictSQUARE上の「頒布物一覧」ページでも同様の動きをします。

※2021/5月現在、PictSPACEの表示方法が変わってジャンプリンクのデモ店舗が作成時に意図した通りに動かせないため見本として使えない状態です。すみません。

 

このPictSPACE実演店舗上で見て分かるように、PictSPACE店舗では頒布物詳細は文字数がいくつでも全文表示されますが、PictSQUERでは一定文字数以上は省略されます。

「目次に戻るボタン」が省略で消えてしまうのを回避するには

１．ボタンの位置をかなり前に持っていく

２．本文をとにかく短くする

３．htmlタグを使って説明文を書くと文字数に関わらず全文表示されるバグ(仕様)があるためそれを利用する

の、どれかを使うことになります。

1．2の方法だと使い勝手が悪くなるため、目次とジャンプリンクは実質上「htmlタグを使って表示した項目」専用の表示となります。

 

 

◆おまけ　テスト店舗で使っていた「目次に戻るボタン」存在感があるバージョンのタグ

「id0*000」の*部分は、目次部分と対応した好きな数字(id)に変更してください。

 

 

 

 

 

 

 

サークル代表情報を頒布物一覧に表示

サークル代表0円、というお値打ち情報の話ではなく。いやお値打ち情報なのですが。

見本画像の通り「サークル代表情報を頒布物一覧に表示出来る」htmlタグをLR（るあ）様が開発して、ご自身のpixivFANBOXにて公開された記事をご紹介致します。

たくさんの情報がとってもスッキリ！

pixivFANBOX　LR（るあ）

ピクスク頒布物一覧にサークル情報を載せるヤツ

複数のサークル情報URLを頒布物一覧に表示したい方は、こちらが便利だと思います。

 

こちらのタグも半角・全角スペース、空行、改行の自動削除機（原稿支援ツール）を使って改行を削ると最後の仕上げがらくらくです。

見本画像は改行を全て消した状態でタグを頒布物説明欄に貼り付けています。

 

 

 

 

ぴくすくでなんか綺麗に見える頒布物一例

蘇芳飛鳥様が作成した記事です。

 

見ての通りブロック分けで表示されるので、区切りををスッキリ分けて見せたい人におすすめです。

詳しい解説はリンク先の記事本文にてご確認ください。

記事内にタグが例示されています。

ぴくすくでなんか綺麗に見える頒布物一例｜蘇芳 飛鳥｜note

https://note.com/cooairon/n/n12928fb71e10

 

 

 

 

 

ぷらいべったーのパスワードやネットプリントのプリント番号を わかりやすく 装飾する

「プリント番号やプリント期限を見つけやすくする装飾のやりかた」を解説した記事がありました。

2020年12月5日（土）開催『紅き道を2人で』イベントページ記事をご紹介します。

ゲームジャンル・男女カップリング　オンラインオンリー

『紅き道を2人で』企画サイト様より

pictSQUAREにおけるpictSPACE活用アイディア

HTMLタグを装飾する　https://hxe.uta-mizuki.com/pictspace-idea/

リンク先のページ、後半の「HTMLタグを装飾する」にて、HTMLタグの使い方について丁寧に解説されています。

当記事はタグ紹介がメインで説明はあまりしていないため「カスタマイズしたいけどよくわからない」というかたはこちらの記事ご参照ください。

 

pictSQUAREオンラインイベント告知HP内のページのため、いつまで公開されているのかわからないのですが、開催日の2020/12/5（土）までは確実に閲覧可能だと思います。

それ以降はいつまでアクセスできるかわからないため、後ほどリンク切れになっていたら申し訳ありません。

 

 

 

枠線カスタマイズ

上記記事「各作品投稿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>

 

↓(文字指定追加)

修正後のタグ

 

枠を変更し、文字を目立たせる修正ができました。

パスワードのような「目立たせる一文」ではなく、普通の文章を入れる場合は、ブログに記載の見本をそのまま使ってください。

 

 

 

上記ブログで紹介されていた囲み枠の記事も参考としてご紹介。いろいろなデザインを探したい方はこちらもどうぞ。

こちらで紹介されているものだとCSSがかなり複雑になってくるのと、自分で本文記述式のhtmlに書き換える必要があるので、ピクトスクエアでどこまで使用可能かはわからないので各自で試してみてください。

【HTML・CSS】コピペで簡単！ボックス（囲み枠）デザイン記事まとめ
https://miyazakilife.com/design/5683/

【HTML・CSS】コピペで簡単！ボックス（囲み枠）デザイン記事まとめ

 

 

 

 

 

 

まとめ

この記事では皆様がテストして公開してくださった各種タグを紹介しました。

掲載を許可してくださったみなさまに御礼申し上げます。

 

20.10.25現在の仕様のままなら、紹介したタグをそのままコピペ、または分かる範囲で書き換えれば、ある程度カスタマイズできるかと思います。

タグ自動生成ツールの作者の皆様、ピクトスクエア用にタグを作って教えてくださった皆様、公開してくださった皆様、本当にありがとうございました！

紹介した他にも色々な方がタグを配布されていると思います。自分の好みに合わせて色々なタグを使ったりカスタマイズしてみてください(html沼)。

 

 

最後にですが、タグがうまく動かなくて、全角半角・改行チェックしてもうまく行かない場合はおとなしく諦めて一回寝ることをおすすめします。

また、タグを配布している作者さん達に聞きに行くのも禁止です。公式サポートへの質問は更に絶対禁止です。

検索すればいくらでも講座は出てきますし、コピペした・改行消したと思っても、実はちゃんと出来ていなかった、修正が反映されないと思ったら入力する場所・見る場所を間違っていた等の単純ミスもあります。

きれいな表示には憧れますが、第三者に迷惑かけてまで作るものではないので、駄目だった時はすっぱり諦めるのも必要です。

最悪の場合「ブラウザとの相性のため自分の環境では崩れて見えるタグだった」「この場所でキレイに表示させる事はできない」ということもありえるため「時間をかけてがんばればきれいに表示できる」と限らない事も時々ある。

 

各自、できる範囲で素敵な説明文を目指してください。

この記事が作業のお手伝いやヒントになれば幸いです。

 

 

 

余談

「pictSPACE上に他所へのリンク作って飛ばす記述は許されるのか」についてですが、pictSQUARE公式ツイッターが20/8/30に「店舗URLから開く頒布物一覧を作成」について説明しているブログ記事をRTしていて、記事を目にされた方も多いのではと思います。

それがあったので、「あれっ、いいんだ？」と、それまで迷っていた「htmlでリンクを作る」ことについての解説記事(当記事)を作り始めることにした、という経緯があります。

そちらの記事は確かpictSPACE内での複数店舗へリンクを作成して便利に使う方法紹介が主で、外部リンクに関しては大きくは扱っていなかったと記憶しています。

とはいえ、方法を紹介していたということは「リンクタグを使うこと、リンクタグでpictSPACEの機能を補うこと、は公式でも問題ないと考えている」ようです。

 

pictSPACEの機能を使いつつ外部(特に同業他社にあたるboothや書店)へのリンクはかなり迷うところですが、とりあえずはサークル参加費550円に持ち込み料金が入っている、紫の水晶玉からリンクを貼るのと同様の扱いとされている、と(勝手に都合よく)解釈しておこうと思います。積極的に禁止していないご好意に甘えておきます。

ただ、運営から正式に外部通販へのリンク禁止という通達が出たら当記事は修正するか閉じると思います。

 

 

「pictSPACE内から外部リンクを貼ってもいいのか」とは別の話ではありますが、実際問題として、現状開催されているイベントで通販されている冊子全てがpictSPACE通販(運営を経由する匿名配送)に回されたとしたら、通販処理しきれるのだろうか…？という疑問が。

今のところ、通販を全て請け負うと仮定した場合の設備投資と、一時的にすごく混むが平時はそこまででもないという作業量の不安定さが釣り合わないため、他の専門業者と通販分担したほうがやりやすいと判断しているのかなあと勝手に推測しています(盆と正月に作業が詰まるとらのあな様を見つつ)。

 

 

今後「外部リンク禁止」となる可能性もありますが、今のところはありがたくhtmlと外部リンクを使わせてもらおうと思います。