配布ページ！！

↓HEAD編集にコピペしてね↓

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

:root{
--one-color: #8b4513; /* 一人目(左)カラー */
--two-color: #bcbcff; /* 二人目(右)カラー */
--three-color: #d3d3d3; /* 三人目(吹出しなし)カラー */
--one1-color: #fcfcfc; /* 一人目文字色(#fcfcfc(白)もしくは#333333(黒)) */
--two1-color: #333333; /* 二人目文字色(#fcfcfcもしくは#333333) */
--three1-color: #333333; /* 三人目文字色(#fcfcfcもしくは#333333) */
}

body{
  background-image:  radial-gradient( var(--one-color) 2px, transparent 2px), radial-gradient( var(--two-color) 2px, #ffffff 2px);
  background-size: 40px 40px;
  background-position: 0 0,20px 20px;
background-color: #fff;
font-family: 'Quicksand','Zen Kaku Gothic New', sans-serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

a{
text-decoration:none;
color: #999;
}

.wrp{
background: #fff;
width: 90%;
max-width: 600px;
margin: 0 auto 10px;
padding: 10px;
}

header{
background: #fff;
font-family: 'Yomogi';
font-size:1.2em;
text-align: center ;
font-weight: bold;
height: 120px;
margin: 30px auto;
padding: 15px;
}

.hitorime{
  color: var(--one-color);
}
.hitorime::before {
  background-image: url(一人目アイコン画像URL);  /* 一人目(左)のアイコン画像 */
}
.hitorime::after {
  content: "一色真宵";  /* 一人目の名前 */
}

.hutarime{
  color: var(--two-color);
}
.hutarime::before {
  background-image: url(二人目アイコン画像URL);  /* 二人目(右)のアイコン画像 */
}
.hutarime::after {
  content: "春日紫音";  /* 二人目の名前 */
}

.icon {
  display: inline-block;
  position: relative;
  width: 70px;
  height: 70px;
}

.icon::before{
  background-size: contain;
  content: "";
  top: 0;
}

.icon::after{
  position: absolute;
  display: inline-block;
  top: 75px;
}

.icon::before, .icon::after{
  position: absolute;
  display: inline-block;
  left: 0;
  width: 70px;
  height: 70px;
}

.cross {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 2px;
  background: #333;
  transform: rotate(45deg);
  vertical-align: middle;
  margin-top: -40px;
}
.cross::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transform: rotate(90deg);
}

hr {
height: 8px;
border: none;
border-top: dotted 2px #000;
margin:30px auto;
}

h1{
font-family: 'Yomogi';
font-size:1.5em;
color: #000;
font-weight:400;}

h3{
font-family: 'Yomogi';
font-size:1.2em;
}

.waku{
  position: relative;
  margin: 2em;
  padding: 20px;
  border-radius: 10px;
}

/* 一人目(左)の吹き出し設定。【mayoi】の部分を変更してください。変更した文字を名前に入力すると反映します。変更箇所は３か所あります。先頭の.は消さないように注意！！ */

.mayoi {
  color: var(--one1-color);
  background-color: var(--one-color);
}

.mayoi::before{
  left: 20px;
  top: -15px;
  border-left: 20px solid var(--one-color);
  border-top: 20px solid var(--one-color);
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(45deg);
}

.mayoi::after{
  left: 35px;
  top: -20px;
  border-left: 20px solid #fff;
  border-top: 20px solid #fff;
  border-right: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(45deg);
}

/* 二人目(右)の吹き出し設定。【shion】の部分を変更してください。変更した文字を名前に入力すると反映します。変更箇所は３か所あります。先頭の.は消さないように注意！！ */

.shion {
  color: var(--two1-color);
  background-color: var(--two-color);
}

.shion::before{
  right: 20px;
  top: -15px;
  border-right: 20px solid var(--two-color);
  border-top: 20px solid var(--two-color);
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(-45deg);
}

.shion::after{
  right: 35px;
  top: -20px;
  border-right: 20px solid #fff;
  border-top: 20px solid #fff;
  border-left: 20px solid transparent;
  border-bottom: 20px solid transparent;
  transform: rotate(-45deg);
}

/* 三人目の枠設定(吹出しなし枠のみ)。【amamiya】の部分を変更可能。変更した文字を名前に入力すると反映します。変更箇所は１か所。先頭の.は消さないように注意！！ */

.amamiya {
  color: var(--three1-color);
  background-color: var(--three-color);
}

.waku::before,.waku::after
{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
}

.write{
text-align: right;
}

.write a{
color: #333;
background: #ccc;
border: dotted 2px #fff;
box-shadow: 2px 2px 0 #ccc, -2px -2px 0 #ccc;
margin: 2px;
padding: 3px;
border-radius: 3px;
}

.right{
text-align: right;
font-size: 0.7em;
}

footer{
font-family: 'Yomogi';
text-align: center ;
margin: 50px auto 20px;
}

input, textarea {
width: 85%;
border: solid 1px #333;
background: #fff;
margin: 1em;
padding: 2px;
}
textarea{
height: 5em;
}
</style>

変更が必要な箇所は以下の太字の箇所です
①　--one-color: #8b4513; /* 一人目(左)カラー */
②　--two-color: #bcbcff; /* 二人目(右)カラー */
③　--one1-color: #fcfcfc; /* 一人目文字色(#fcfcfc(白)もしくは#333333(黒)) */
④　--two1-color: #333333; /* 二人目文字色(#fcfcfcもしくは#333333) */
⑤　 background-image: url(一人目アイコン画像URL); /* 一人目(左)のアイコン画像 */
⑥　 content: "一色真宵"; /* 一人目の名前 */
⑦　 background-image: url(二人目アイコン画像URL); /* 二人目(右)のアイコン画像 */
⑧　 content: "春日紫音"; /* 二人目の名前 */
/* 一人目(左)の吹き出し設定。～略～ */
⑨　.mayoi {
⑩　.mayoi::before{
⑪　.mayoi::after{
/* 二人目(右)の吹き出し設定。～略～ */
⑫　.shion {
⑬　.shion::before{
⑭　.shion::after{

なるべくわかりやすくしたつもり……だけどわからなかったら聞いてください！

★一覧ページ編集★

↓ページ上部編集ボックスにコピペしてね↓

↓ページ下部編集ボックスにコピペしてね↓

↓投稿部編集ボックスにコピペしてね↓

★投稿項目設定★

□名前入力欄
→適宜変更してください

□ﾒｯｾｰｼﾞ入力欄
→適宜変更してください

□E-Mail入力欄／□サイトURL入力欄
→非表示に設定

□データ投稿
→投稿不可に設定

★投稿ページ編集★

↓ページ上部編集ボックスにコピペしてね↓

↓ページ下部編集ボックスにコピペしてね↓

★削除ページ編集／編集ページ編集／検索ページ編集★

↓ページ上部編集ボックスの一番上にコピペで追加してね↓
※もともとある内容は残しておいてね※

↓ページ下部編集ボックスにコピペしてね↓
※こっちは全部書き換えてOK※

ここから下は確認用！

本文

[編集]

本文

[編集]

本文

[編集]

　海のおきへ、遠く遠く出ていきますと、水の色は、いちばん美しいヤグルマソウの花びらのようにまっさおになり、きれいにすきとおったガラスのように、すみきっています。けれども、そのあたりは、とてもとても深いので、どんなに長いいかり綱づなをおろしても、底まで届くようなことはありません。海の底から、水の面おもてまで届くためには、教会の塔とうを、いくつもいくつも、積みかさねなければならないでしょう。そういう深いところに、人魚たちは住んでいるのです。
「人魚の姫」ハンス・クリスチャン・アンデルセン／青空文庫

[編集]