トップページや詳細ページをHTMLで装飾する

このページでは、Confitのトップページや開催情報ページを装飾するための、少し高度な手法について説明しています。ここに書かれている内容はすべてソースコードの編集 からHTMLタグを入力する必要があります。

HTMLを使わない、基本的なテキストエディターの使用方法については以下をご確認ください。

🔍 参照記事：文字装飾（テキストエディター）の使い方が知りたい

⚠️ ここで紹介しているコードは、Confitのシステムの既存レイアウトを利用しています。Confitのデザイン方針が変更された場合、レイアウトや配色が変更される可能性がありますので、あらかじめご了承ください。

1．ソースコードの編集画面を開く

テキストエディタにはソースコードの編集画面があります。この画面を利用すると、HTMLタグを直接入力して画面を作成することができます。

メニューの「表示 > ソースコード」を選択する、またはソースコードアイコンをクリックすると、ソースコードの編集画面が開きます。

ソースコード編集画面を開くと以下のような画面が開き、HTMLタグが入力できるようになります。

保存をクリックすると、変更内容を保存してもとの画面に戻ります。

2．カラーテーマを使用する

💡 大会ごとのテーマカラーに合わせて、サイト全体の色味を統一することも可能です。設定方法の詳細は以下の記事をご参照ください。

🔍参照記事：大会のテーマカラーに合わせて配色設定をする

本記事では、サイト全体ではなくページ単位で設定する方法をご紹介します。親要素にカラーテーマを指定することで、基本のスタイルを上書きして子要素の配色を変更することができます。

例えば、基本の見出しスタイルは以下のようにグレーをベースにしたものとなっていますが、

テーマを適用することで以下のように配色を変更することが出来ます。このカラーパターンは見出しやテーブル、リストなどの装飾に反映されます。

カラーテーマの適用方法

適用したい要素をdiv で囲い、そのdivにテーマ用のクラスを指定することでテーマが適用できます。以下は、Confitカラーを適用した場合の例です。

この例であれば theme-confit の部分をそれぞれの以下のテーマ用のクラスに書き換えることで反映されます。

カラーテーマの種類

以下のカラーテーマが利用できます。

CSSクラス名	配色
theme-confit	Confitカラー（もえぎ色）ベースの配色です
theme-green	緑色ベースの配色です
theme-blue	青色ベースの配色です
theme-purple	紫色ベースの配色です
theme-orange	オレンジ色ベースの配色です
theme-yellow	黄色ベースの配色です
theme-red	赤色ベースの配色です

theme-red を指定した場合のサンプルは以下のとおりです。赤色ベースの配色になります。

3．ボタンでリンクを作成する

リンクを作成するためのHTMLタグについての技術的な仕様についてはこちらを参照ください。

🔍 参照記事：アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN

基本のラベルリンク

aタグのclassにlinklabel を指定することで、ラベル形式のリンクを作成できます。

アイコンつきのラベルリンク

linklabelと組み合わせてlink-moveなどのアイコン用のクラスを指定することで、アイコン付きのリンクを作成できます。

<a class="linklabel link-move" href="{URL}">進むアイコンのリンク</a>
<a class="linklabel link-return" href="{URL}">戻るアイコンのリンク</a>
<a class="linklabel link-other" href="{URL}" target="_blank">別ウィンドウアイコンリンク</a>

4．よく使われるリンクの種類（PDF、オンライン会場など）

その他のアイコンも利用できます。サンプルをいくつか掲載しておくので、ご活用ください。

ダウンロード

<a class="linklabel" href="{URL}">
<span class="fa-solid fa-file-arrow-down"> </span>ダウンロード
</a>

PDFファイル

<a class="linklabel" href="{URL}">
<span class="fa-solid fa-file-pdf"> </span>PDFファイル
</a>

Wordファイル

<a class="linklabel" href="{URL}">
<span class="fa-solid fa-file-word"> </span>Wordファイル
</a>

ビデオ会議（オンライン会場やオンデマンド動画）

<a class="linklabel" href="{URL}">
<span class="fa-solid fa-video"> </span>ビデオ会議
</a>

汎用的な矢印

<a class="linklabel" href="{URL}">
汎用的な矢印リンク <span class="fa-solid fa-circle-chevron-right"> </span>
</a>

5．リンクの配色を変える

デフォルトのブルー以外にもいくつか配色パターンを用意しています。linklabelと組み合わせてlink-col-subなどの配色用のクラスを使用することでそれぞれの配色が反映されます。

<a class="linklabel" href="{URL}">1.通常リンク</a>
<a class="linklabel link-col-sub" href="{URL}">2.通常リンク（反転）</a>
<a class="linklabel link-col-primary" href="{URL}">3.システムカラーリンク</a>
<a class="linklabel link-col-primary-sub" href="{URL}">4.システムカラーリンク（反転）</a>
<a class="linklabel link-col-mono" href="{URL}">5.モノクロリンク</a>
<a class="linklabel link-col-destruct" href="{URL}">6.赤色のリンク</a>

6．リンクのサイズを変える

大小のリンクパターンを用意しています。linklabelと組み合わせてlink-s-largeなどのサイズ指定用のクラスを指定することでサイズを変更できます。

<a class="linklabel link-s-large" href="{URL}">大きいリンク</a>
<a class="linklabel" href="{URL}">通常サイズ</a>
<a class="linklabel link-s-small" href="{URL}">小さいリンク</a>

<a class="linklabel link-s-min" href="{URL}">最小リンク</a>

7．動画を掲載する

You Tube等の動画を掲載することができます。以下ソースの{ID}部分を更新してご利用ください。

YouTube動画

💡You Tubeの動画IDは、動画のURLから確認できます。動画IDは、URLの末尾に表示されている11桁の英数字です。
例えば、動画のURLが「https://www.youtube.com/watch?v=xxxxxxxxxxx」の場合、「xxxxxxxxxxx」の部分が動画IDになります。

Vimeo動画

💡Vimeo ID は、動画編集ページから確認できます。
動画のURLが https://vimeo.com/xxxxxxxxx の場合、 xxxxxxxxx の部分がVimeoIDです。

上記で解決しない場合は、担当者までご連絡ください。

目次