方眼紙を背景にしたい

コミュニティ

方眼紙を背景にしたい

トピックス by ユーザーボイス 64 pt 2022年7月7日 18:17 772 PV
方眼紙の背景の上に
画像やテキストを置くようなウィジェットを作成したいです！
どなたか方法を教えてください！
はしもっちゃん CX ヒートマップ好き 2 年, 3 月前 4 人 · 3 コメント
- Widget（ウィジェット）
- 制作
3 コメント

ホリィ CX @SIVA

管理者

2022年7月7日 18:27

画像のような見た目でよければこちらのHTMLで可能です！！

HTML

<div class="box">
　　　　　<img src="画像URL" draggable="false" width="413" height="201" class="lazyload">
    <p>
        サンプルテキスト。<br>ここにコンテンツを入れてください
    </p>
</div>

CSS

 .box {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;
  /* 以下任意のスタイル */
  padding: 20px;
} .box {
  /* 方眼紙模様に必須のスタイル */
  background-image: linear-gradient(0deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), #f0f0f0 calc(100% - 1px));
  background-size: 16px 16px;
  background-repeat: repeat;
  background-position: center center;

  /* 以下任意のスタイル */
  padding: 20px;
}

2 年, 4 月前ホリィ CX ウィジェットが変更

コピーダウンロードリンク

つめ CX @SIVA

メンバー
2022年7月8日 12:18

versionの背景を方眼紙にしたいと言う声よくありますね！

上記の方法では必要ないですが、

version設定（記事設定）で行う場合には方眼紙の画像が必要になります！

方眼紙メーカーで作成すると便利なので共有します！！

https://crocro.com/tools/item/gen_graph_paper/
はしもっちゃん CX ヒートマップ好き

メンバー
2022年8月4日 18:55

ちなみに個人的にはこちらの方眼紙画像を使うと綺麗に見えます

ホリィ CX @SIVA

つめ CX @SIVA

はしもっちゃん CX ヒートマップ好き