LINK
- URL
- https://xxx.xxx.xx
- サイト名
- □□□□□□□□□□
- 管理人
- □□□□□
- バナー
イベント参加予定
20XX.XX.XX イベント名既刊
XXXXで通販していますおもな作品・企画ページなど
折り畳めるエリア
ここに内容を書く。各種タグも使えます。
▼ 以下はこのテンプレートの説明です ▼
SNSリンク集のアイコンについて
アイコンのレイアウトを4種類用意しています。（アイコンの再配布にならないよう、画像は省略しました）
小アイコン＋文字横並び 大アイコン＋文字 大アイコン＋長めの説明 小アイコンのみ
各サービスのアイコンはespace様で配布されている「SNS Icon」に対応しています。当テンプレートのダウンロードデータには含まれておりませんので、必要な方はespace様よりご入手ください。
「SNS Icon」に無いアイコンを使いたいときの代替手段
- アルファベット・漢字・ひらがな等１文字でテキストを入れ、iタグで囲む
- 「Twemoji」に対応している絵文字を入れる
- 公式サイトからロゴをDLし、正方形の画像にして、imgタグで入れる
※当テンプレートの「div class="linklist"」のタグ内のみで有効です。
もしかしたら使うかもしれないレイアウト
クラス名の説明
前提…- おもにsectionタグで囲ったところが、薄い背景色のついた四角になります。
- そのsectionタグを2カラム・3カラム・4カラムにするときは、divタグで囲ってクラス名をつけます。
- grid
- divタグで囲った場所を2～4カラムにするときの基本的な設定が入っています。
- grid2
- 2等分の2カラムにします。
- grid1-2
- 1：2の2カラムにします。
- grid2-1
- 2：1の2カラムにします。
- grid3
- 3等分の3カラムにします。
- grid4
- 4等分の4カラムにします。
- linkcards
- 画像と説明がぴったりくっついてセットになったリンクカードっぽいレイアウトにします。
- ogp
- linkcardsと併用する想定。指定した要素内の画像をogp画像っぽい縦横比でトリミングします。（1.91：1）
- square
- linkcardsと併用する想定。指定した要素内の画像を正方形でトリミングします。
- small
- 指定した要素内のフォントを小さくします。
- accentbg
- 指定した要素内の背景色をアクセントカラーの2番にします。
- gridlist
- dl要素に使うことで、表組み（テーブル）のような見た目にできます。（ここでも使っています）
cssカスタムプロパティの説明
cssカスタムプロパティとは…cssの冒頭に書ける共通設定です。当テンプレートではstyle.cssの17～25行目あたりに書いてあります。
- --content-width
- ページ横幅の設定（demoでは900pxにしています）
- --eic-basic-color
- SNS Icon 汎用アイコンの色設定（demoではメインの文字色と同じにしています）
- --margin-nallow
- レイアウト間の狭いスキマ設定（demoでは1remにしています）
- --margin-wide
- レイアウト間の広いスキマ設定（demoでは3remにしています）