pictSQUAREのイベントページを作るときに使える小技

イベントページを作りながらいろいろ試したところ、HTMLとCSSの他にFont AwesomeとBootstrapにも対応してると気づいてしまったオタクの備忘録になります。
オタク特有の事情で何となくHTMLがわかる人向けにコピペで使えるようにはしてますが、技術的な説明がほぼないので中～上級者向けです。

※pictSQUARE側からすれば想定外かもしれない手法かつ、仕様変更で使えなくなったり表示が崩れる可能性が大なので使用は自己責任でお願いします。
※記事の作成時(21/7/9)、Font Awesomeが5でBootstrapが4.4

BootstrapとFont Awesomeに対応してると何ができるのか

Bootstrapに対応しているとスマホとPCで表示を変える、折りたたみコンテンツなどの拡張機能の使用ができるようになり、Font Awesomeに対応してると使えるアイコンや記号の幅が広がります。やったね！

イベントページで即戦力なFont Awesomeの記号一覧

Font Awesomeがあると❤みたいな記号がいっぱい使えるようになる、かつ、他のテキスト同様、色や大きさを変えたりできるので便利なんですが、とにかく数が多い。
なので、自分が実際使った記号と使われそうな記号を下記にまとめてみました。
見出しや各タイトルの左につけるだけでもおすすめです。

// 🔔 アラート
<i class="fas fa-bell"></i>

// 📅 カレンダー
<i class="fas fa-calendar-alt"></i>

// ＃ ハッシュタグ
<i class="fas fa-hashtag"></i>

// ⚠ よく注意書きで出てくるヤツ
<i class="fal fa-exclamation-triangle"></i>

// 🚫 禁止マーク
<i class="fas fa-ban text-danger"></i>

// ℹ️ インフォメーション(の丸いヤツ)
<i class="fas fa-info-circle"></i>

// 🎂 お誕生日ケーキ
<i class="fas fa-birthday-cake"></i>

// 📷 カメラ
<i class="fas fa-camera"></i>

// 📖 薄い本
<i class="far fa-book-open"></i>

// ☑ 丸の中にチェックマーク
<i class="fas fa-check-circle"></i>

// ☒ 丸の中にバツ
<i class="fas fa-times-circle"></i>

// → 矢印　※arrowで検索するといろいろある
<i class="fas fa-arrow-right"></i>

// >> こういう感じの矢印 ※angleで検索するといろいろある
<i class="fas fa-angle-double-right"></i>

※左のはあくまでイメージ

上記の他にもデザイン違いを含め7000近くあるので、使いたい記号がなかったりこだわりたい人は公式からピッタリのものを探すといいかも。
それっぽい英単語で検索すると結構絞れるんですが、個人的にはpersonとかshopあたりで検索して出てくるヤツは使えそう……な気がする。

Font Awesome

※現段階のpictSQUAREではversion 5 Proに対応してるのでプロ仕様のシャレオツなのも使えます

Bootstrapの中でもカンタンかつ役立つハック一覧

Bootstrapの詳しい話をすると技術的な話になってしまうので割愛しますが、とりあえずスマホ(※この記事内ではタブレットも含む)やパソコンで表示を変える系の小技を集めました。
スマホの時・PCの時みたいな言い方をしてますが、実際は画面の横幅が広い時・狭い時ぐらいの条件だと思ってください。

スマホもしくはPCのときだけ文章を改行する

// スマホの時だけ改行する
<br class="d-md-none">
// 使用例
PCでは1行、スマホでは改行したい時は、<br class="d-md-none">こんな感じに1行に収まるように。

// PCの時だけ改行する
<br class="d-none d-lg-block">
// 使用例
PCでのみ時改行したい時は、<br class="d-none d-lg-block">こんな感じに1行に収まるように。

スマホもしくはPCのときだけ表示させる

// スマホの時だけ表示する
<div class="d-md-none">ここに内容</div>

// PCの時だけ表示する
<div class="d-none d-lg-block">ここに内容</div>

下記についてはクラス属性(class="～")の箇所をピンポイントでコピペすれば応用が利くコードになります。

// PCでの表示時のみ文字を中央寄せ、他のデバイスでは左寄せ
<p class="text-left text-lg-center">ここに文字</p>

折りたたみメニュー

サークル主だけに見て欲しい内容等に使えるかもしれない。
同じページ内に複数設置したい場合、href(#以降)とidの2箇所を同一かつ他の折りたたみメニューと被らない名称に変更してください。
※下記コードサンプルで言えば「clps01」「clps02」の部分

// 折りたたみメニュー
<a href="#clps01" data-toggle="collapse" class="d-block mt-2"><u>▶ 折りたたみタイトル</u></a><div id="clps01" class="collapse border p-2">ここに文字列ここに文字列ここに文字列ここに文字列</div>

// 2つ目設置サンプル
<a href="#clps02" data-toggle="collapse" class="d-block mt-2"><u>▶ 折りたたみタイトル</u></a><div id="clps02" class="collapse border p-2">ここに文字列ここに文字列ここに文字列ここに文字列</div>

動かない原因あるある：タグの閉じ忘れ、スペルミス、hrefの#を忘れてる

イベントページ内コンテンツへのリンクの貼り方

aタグのクラス属性とデータ属性に諸々追加したら何かできた。
○○○にはイベントページトップの/以降を入れてください。
ex) https://pictsquare.net/asdfghjの場合、asdfghjの部分

// お知らせ
<a href="javascript:void(0);" class="href" data-action="/events/news/○○○">お知らせ</a>

// 問い合わせ
<a href="javascript:void(0);" class="href" data-action="/events/contact/○○○">問い合わせ</a>

// 注意事項など
<a href="javascript:void(0);" class="href" data-action="/events/notice/○○○">注意事項など</a>

誰かの参考になれば幸いです。