ふいろのお部屋

現在構築中...

普段いるとこ▷Xissmie
作品勝手に使用しないで!
danbooruやピンタレスト(Pinterest)への引用も禁止!
学習してなくてもふいろ家のキャラクターを出力しないでください!

AI学習に対する考え
  • サービスの規約に同意しても、サービスの利用者が使用していい訳ではない
  • 違法データや、性的な画像、個人情報が学習されている
  • 買うことで見ることのできる画像を無料で転載された場合、著作者は不利益を被っている
  • 検閲を怠っていると、著作権法違法幇助として訴えられる可能性もある

現行法としても怪しい部分があるため合法とは捉えづらく、使用することで生活費も上がってしまうので、自分はどのような生成AIでも使いませんし、使うことを推奨しません。

LINK

URL
https://xxx.xxx.xx
サイト名
□□□□□□□□□□
管理人
□□□□□
バナー

イベント参加予定

20XX.XX.XX イベント名

既刊

XXXXで通販しています

おもな作品・企画ページなど

リンク先の説明

リンク先の説明

リンク先の説明

折り畳めるエリア

ここに内容を書く。各種タグも使えます。

▼ 以下はこのテンプレートの説明です ▼


SNSリンク集のアイコンについて

アイコンのレイアウトを4種類用意しています。(アイコンの再配布にならないよう、画像は省略しました)

小アイコン+文字横並び 大アイコン+文字 大アイコン+長めの説明 小アイコンのみ

各サービスのアイコンはespace様で配布されている「SNS Icon」に対応しています。当テンプレートのダウンロードデータには含まれておりませんので、必要な方はespace様よりご入手ください。

「SNS Icon」に無いアイコンを使いたいときの代替手段
  • アルファベット・漢字・ひらがな等1文字でテキストを入れ、iタグで囲む
  • 「Twemoji」に対応している絵文字を入れる
  • 公式サイトからロゴをDLし、正方形の画像にして、imgタグで入れる

※当テンプレートの「div class="linklist"」のタグ内のみで有効です。


もしかしたら使うかもしれないレイアウト

PC・タブレット・スマホ横向きで見たとき、2カラムで左側が広い
PC等で見たとき2カラムで左側が狭い
PC等で見たとき2カラムで右側が広い

リンク先の説明

リンク先の説明

リンク先の説明

リンク先の説明

リンク先の説明

リンク先の説明

クラス名の説明 前提…
  1. おもにsectionタグで囲ったところが、薄い背景色のついた四角になります。
  2. その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にしています)