コピペでできるテキスト装飾『便箋』と画像装飾『折った紙』

コピー&ペーストでできる装飾です。

便箋

文字下罫線が実線のものと破線のものとあります。破線タイプは実線HTMLの親要素に hasen クラスを追加するだけです。CSSは共通です。

/* 基本設定(基本設定以外の変更非推奨) */
:root {
  --binsen-margin-vertical: 3em;/* 便箋全体と前後要素との距離 */
  --binsen-bgcolor: rgb(250,250,250);/* 背景色 */
  --binsen-color: rgb(51,51,51);/* 文字色 */
  --binsen-radius: 3px;/* 角丸 */
  --binsen-font_size: 1.4rem;/* 大きくしすぎるとモバイル閲覧が困難になります */
  --binsen-border_color: rgb(220,220,220);/* 便箋全体のボーダー */

  --binsen-line_color: rgb(200,200,200);/* 線の色 */
  --binsen-line_height: 3.1em;/* 行間 */
  --binsen-line-width: 1px;/* 線太さ */
  --binsen-line-range: 8px;/* 間隔 */

  --binsen-hole_color: rgb(180,180,180);/* 穴の色 */
  --binsen-hole_size: 7px;/* 穴の大きさ */

  --binsen-separator_color: rgb(145,208,211);/* 穴の右横 縦ライン色 */
  --binsen-separator_size: 3px;/* ライン太さ */
}
/* 基本設定ここまで */

.binsen {
  position: relative;
  margin: var(--binsen-margin-vertical) 0;
  padding: var(--binsen-line_height) 3% var(--binsen-line_height) calc(var(--binsen-hole_size) * 7 + .5em);
  border-radius: var(--binsen-radius);
  border: 1px solid var(--binsen-border_color);
  background: var(--binsen-bgcolor);
  color: var(--binsen-color);
}

.binsen::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--binsen-hole_size) * 7);
  height: 100%;
  border-right: var(--binsen-separator_size) solid var(--binsen-separator_color);
  background-image: radial-gradient(var(--binsen-hole_color) var(--binsen-hole_size), rgba(0,0,0,0) calc(var(--binsen-hole_size) + 1px));
  background-size: calc(var(--binsen-hole_size) * 5) calc(var(--binsen-hole_size) * 5);
  background-position: top left;
  background-repeat: repeat-y;
}

.binsen::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 2px;
  width: calc(100% - 4px);
  height: 4px;
  border: 1px solid var(--binsen-border_color);
  background: var(--binsen-bgcolor);
}

.binsen p {
  margin: var(--binsen-line_height) 0;
  padding: 0 .5em var(--binsen-line-width) .5em;
  background-image: linear-gradient(180deg, var(--binsen-line_color) var(--binsen-line-width), rgba(0,0,0,0) var(--binsen-line-width));
  background-size: 100% var(--binsen-line_height);
  background-position: var(--binsen-line-width) top;
  line-height: var(--binsen-line_height);
  font-size: var(--binsen-font_size);
}

.binsen p:first-of-type {
  margin-top: 0;
}

.binsen p:last-of-type {
  margin-bottom: 0;
}

/* 破線のスタイル */
.hasen p {
  background-color: var(--binsen-bgcolor);
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, var(--binsen-bgcolor) 50%, var(--binsen-bgcolor) 100%),
                    linear-gradient(180deg, var(--binsen-line_color) var(--binsen-line-width), transparent var(--binsen-line-width));
  background-size: var(--binsen-line-range) 100%,
                   100% var(--binsen-line_height);
}

実線タイプ

あなたは今もしこの賞翫観というのの時より考えるでない。どうぞ今の思索らはもしこの批評んべくじゃを歩くてしまいですがも誘惑窮めですなて、しばらくには承ないでないで。家で困りなくものもようやく場合にてんでましたです。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="binsen">
  <p>文章</p>
  <p>文章</p>
</div>

破線タイプ

あなたは今もしこの賞翫観というのの時より考えるでない。どうぞ今の思索らはもしこの批評んべくじゃを歩くてしまいですがも誘惑窮めですなて、しばらくには承ないでないで。家で困りなくものもようやく場合にてんでましたです。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="binsen hasen">
  <p>文章</p>
  <p>文章</p>
</div>

バインダー

便箋と同じくCSSは共通、破線タイプは実線タイプHTMLに b-hasen を追加します。

/* 基本設定(基本設定以外の変更非推奨) */
:root {
  --binder-margin-vertical: 3em;/* バインダー全体と前後要素との距離 */
  --binder-bgcolor: rgb(250,250,250);/* 背景色 */
  --binder-color: rgb(51,51,51);/* 文字色 */
  --binder-box_shadow_color: rgba(0,0,0,.2);/* ドロップシャドウ色 */
  --binder-radius: 3px;/* 角丸 */
  --binder-font_size: 1.4rem;/* 大きくしすぎるとモバイル閲覧が困難になります */
  --binder-border_color: rgb(220,220,220);/* 便箋全体のボーダー */

  --binder-line_color: rgb(200,200,200);/* 線の色 */
  --binder-line_height: 3.1em;/* 行間 */
  --binder-line-width: 1px;/* 線の太さ */
  --binder-line-range: 8px;/* 間隔 */

  --binder-hole_color: rgb(220,220,220);/* 穴の色 */
  --binder-ring_color: rgb(145,152,229);/* リングの色 */
}
/* 基本設定ここまで */

.binder {
  position: relative;
  margin: 3em 0 3em 12px;
  padding: var(--binder-line_height) 3% var(--binder-line_height) calc(30px + .5em);
  box-shadow: 0 2px 8px var(--binder-box_shadow_color);
  border-radius: var(--binder-radius);
  border: 1px solid var(--binder-border_color);
  background: var(--binder-bgcolor);
  color: var(--binder-color);
}

.binder::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background-image: radial-gradient(var(--binder-hole_color) 7px, transparent 8px);
  background-size: 30px 30px;
  background-position: top 8px left 2px;
  background-repeat: repeat-y;
}

.binder::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -12px;
  width: 30px;
  height: 100%;
  background: repeating-linear-gradient(rgb(0,0,0,0), rgb(0,0,0,0) 20px, var(--binder-ring_color) 20px, var(--binder-ring_color) 26px, rgba(0,0,0,.2) 26px, rgba(0,0,0,0) 30px);
}

.binder p {
  margin: var(--binder-line_height) 0;
  padding: 0 .5em var(--binder-line-width) .5em;
  background-image: linear-gradient(180deg, var(--binder-line_color) var(--binder-line-width), transparent var(--binder-line-width));
  background-size: auto var(--binder-line_height);
  line-height: var(--binder-line_height);
  font-size: var(--binder-font_size);
}

.binder p:first-of-type {
  margin-top: 0;
}

.binder p:last-of-type {
  margin-bottom: 0;
}

/* 破線のスタイル */
.b-hasen p {
  background-color: var(--binder-bgcolor);
  background-image: linear-gradient(90deg, transparent 0%, transparent 50%, var(--binder-bgcolor) 50%, var(--binder-bgcolor) 100%),
                    linear-gradient(180deg, var(--binder-line_color) var(--binder-line-width), transparent var(--binder-line-width));
  background-size: var(--binder-line-range) 100%,
                   100% var(--binder-line_height);
}

実線タイプ

あなたは今もしこの賞翫観というのの時より考えるでない。どうぞ今の思索らはもしこの批評んべくじゃを歩くてしまいですがも誘惑窮めですなて、しばらくには承ないでないで。家で困りなくものもようやく場合にてんでましたです。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="binder">
  <p>文章</p>
  <p>文章</p>
</div>

破線タイプ

あなたは今もしこの賞翫観というのの時より考えるでない。どうぞ今の思索らはもしこの批評んべくじゃを歩くてしまいですがも誘惑窮めですなて、しばらくには承ないでないで。家で困りなくものもようやく場合にてんでましたです。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="binder b-hasen">
  <p>文章</p>
  <p>文章</p>
</div>

折った紙(画像装飾)

折りたたんだ紙を開いたような装飾です。HTMLの 横実寸 高さ実寸 の部位は 単位をつけない よう注意。

<div class="paper__image">
  <img src="画像アドレス" width="横実寸" height="高さ実寸" alt="代替テキスト" loading="lazy">
  <div class="paper__overlay-wrapper">
    <div class="paper__overlay paper__overlay_1"></div>
    <div class="paper__overlay paper__overlay_2"></div>
    <div class="paper__overlay paper__overlay_3"></div>
    <div class="paper__overlay paper__overlay_4"></div>
  </div>
</div>
:root {
  --paper-margin-vertical: 3em;/* 前後要素との距離 */

  --paper-image_border-width: 10px;/* 写真枠太さ, 不要なら数値を 0 に */
  --paper-image_border-color: white;/* 写真枠色 */
  --paper-image_filter: sepia(20%);/* セピア加工不要ならこの一行削除 */

  --paper-watermark: "John Doe";/* 書き換え必須ウォーターマーク, 不要ならこの一行削除 */
  --paper-watermark-font_size: 1.2rem;/* 文字大きさ */
  --paper-watermark-bgcolor: rgba(0,0,0,.6);/* 背景色, 不要ならこの一行削除 */
  --paper-watermark-color: rgba(240,240,240);/* 文字色 */
  --paper-watermark-radius: 2px;/* 角丸 */
}

.paper__image {
  position: relative;
  margin: var(--paper-margin-vertical) 0;
  box-shadow: 2px 2px 8px 2px rgba(0,0,0,.25);
}

.paper__image::before {
  content: var(--paper-watermark, none);
  display: block;
  position: absolute;
  bottom: calc(var(--paper-image_border-width) + 2px);
  right: calc(var(--paper-image_border-width) + 2px);
  z-index: 1;
  padding: .2em 1em;
  border-radius: var(--paper-watermark-radius);
  background: var(--paper-watermark-bgcolor, none);
  color: var(--paper-watermark-color);
  font-size: var(--paper-watermark-font_size);
  font-style: italic;
}

.paper__image img {
  border: var(--paper-image_border-width) solid var(--paper-image_border-color);
  filter: var(--paper-image_filter, none);
}

.paper__overlay-wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.paper__overlay {
  position: relative;
  border: 0px solid rgba(30,10,60,.4);
}
.paper__overlay_1 {
  background: linear-gradient(to bottom, rgba(68,56,51,.02) 0%, rgba(68,56,51,0) 72%, rgba(68,56,51,.15) 95%, rgba(68,56,51,.24) 100%);
}

.paper__overlay_1::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(to right, rgba(68,56,51,.2) 0%, rgba(68,56,51,.1) 100%);
}

.paper__overlay_2 {
  background: linear-gradient(to bottom, rgba(68,56,51,.02) 0%, rgba(68,56,51,0) 60%, rgba(68,56,51,.22) 96%, rgba(68,56,51,.08) 100%);
}

.paper__overlay_2::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(to right, rgba(68,56,51,.04) 0%, rgba(68,56,51,0) 100%);
}

.paper__overlay_3 {
  background: linear-gradient(to top, rgba(68,56,51,.08) 0%, rgba(68,56,51,0) 40%, rgba(68,56,51,.14) 100%);
}

.paper__overlay_4 {
  background: linear-gradient(to top, rgba(68,56,51,.02) 0%, rgba(68,56,51,0) 60%, rgba(68,56,51,0.18) 94%, rgba(68,56,51,.02) 100%);
}

まとめ

本年2023年最後の投稿です。このところ多忙でご質問にすぐお返事できない状況にあり、年明けもしばらくこの状態が続きそうで申し訳ないです。

来春にはテンプレートを一点… 可能なら二点申請したいと考えています。2024年も変わらずお付き合い頂ければ幸いです :)

-
2023/12/22 (Fri) 17:47

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2023/12/23 (Sat) 01:48

To Merry Christmas! 内緒さん

こちらこそお世話になりました。またおもしろいドラマがあれば教え合いっこしましょう(笑)
良いお年を :)

okanchi
2023/12/29 (Fri) 15:04

お久しぶりです
また 楽しみが増えました
のんびり 楽しみたいと思います ありがとうございます

vanillaice (Akira)
vanillaice (Akira)
2024/01/25 (Thu) 00:25

To okanchiさん

お返事大変遅くなってごめんなさい。ご無沙汰しております :)

はい、また時間のあるときにでもお試しくださいね。

ぼっちん
2024/02/05 (Mon) 16:26

あっ 新作 🤩

Akiraさん、ちょっとぶりですね~ 😄
この記事に関わらないコメントで申し訳ありません。

只今表示中のテンプレート[Knoll] は、新作2点の内のものでしょうか?
もし違いましたら、新作に加えて頂きたいくらいに「好い感じ」で気に入ってしまいましたよ (•‾⌣‾•)にこ♪
いつも欲張りで相済みません(笑)

vanillaice (Akira)
vanillaice (Akira)
2024/02/08 (Thu) 16:19

To ぼっちんさん

こんにちは ('0')/
お返事遅くなってごめんなさい。

Knollは自分勝手なコード内容というか、とても不親切なものなのでとても共有には出せない ^^;
同じような色味(暗め)のものを共有予定です。ただやっぱり時間も取れないので今回はダークモード対応なしです。

ぼっちん
2024/02/08 (Thu) 17:26

To vanillaice (Akira)さん

おやおや、それは残念です。
潔く諦めます(笑)
お返事ありがとうございました 😊

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)