---
# System prepended metadata

title: Diary-templete
tags: [diary]

---

---
title: Diary-templete
image: https://i.imgur.com/LeUZYPc.jpg
tags: diary
---

# だいありー実験中
## ラグマスチャット風をめざして！

![](https://i.imgur.com/1YwXfwh.jpg)

<div class="ragmas">
    <div class="pudding"></div>
    <div class="left-msg">
    <h5>
    吹き出し風味のテンプレートだよ。<br>
    h5タグのとこにメッセージをかいてね。<br>
    class="pudding"をかえるとアイコンがかわるよ。<br>
    </h5>
    </div>
</div>

<div class="ragmas">
    <div class="right-msg">
    <h5>
    leftとrightを変えれば、吹き出しの向きがかわるよ。<br>
    顔アイコンつくりたいひとはぷりんちゃんに画像をわたそう。
<br>
    </h5>
    </div>
    <div class="tencha"></div>
</div>

<style>
.ragmas {
    display: flex
}
.ragmas > div.pudding {
    /* block形式 */
    display: block;
    width: 80px;
    height: 80px;
    content: '';
    /* icon設定 */
    background-image: url(https://i.imgur.com/LeUZYPc.jpg);
    background-repeat:  no-repeat;
    background-size: contain;
    background-color: #000000;
    /* アイコン枠 */
    border: solid 3px #6091d3;
    border-radius: 10px;
}
.ragmas > div.tencha {
    /* block形式 */
    display: block;
    width: 80px;
    height: 80px;
    content: '';
    /* icon設定 */
    background-image: url(https://i.imgur.com/CboP21f.jpg);
    background-repeat:  no-repeat;
    background-size: contain;
    background-color: #000000;
    /* アイコン枠 */
    border: solid 3px #6091d3;
    border-radius: 10px;
}
.left-msg {
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}
.left-msg:before {
  content: "";
  position: absolute;
  top: 60%;
  left: -30px;
  margin-top: -25px;
  border: 15px solid transparent;
  border-right: 15px solid #e0edff;
}
.left-msg > h5 {
    margin-top: 3px;
    font-size: 16px;
}
.ragmas {
    display: flex
}

.right-msg {
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  display: inline-block;
  margin: 0 15px 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e4ffe0;
  border-radius: 15px;
}
.right-msg:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #e4ffe0;
}
.left-msg > h5 {
    margin-top: 3px;
    font-size: 16px;
}
.right-msg > h5 {
    margin-top: 3px;
    font-size: 16px;
}

.part > img {
    display: block;
    height: 200px;
    border-radius: 15px;
}

/* https://0edition.net/archives/1448 ここを参考にしています。*/
.ui-view-area:not(.ui-scrollable) #doc > *[id]::before {
  /* きれいじゃないけど、これで段落ずれおきない。*/
  height: 30px;
}

.markdown-body > h1{
 background-color: #f5d5da; /* 背景色 */
 border-radius: 5px;
 color: #ef858c; /* 文字色 */
 padding: 10px 10px 10px 10px; /* 上・右・下・左の余白 */
 position: relative;
 text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff; /* 文字の影 */
}
.markdown-body > h1:before{
 content: '＊*'; /*花に見せかけるためのアスタリスク*/
 color: #fff; /* アスタリスクの色 */
 display: inline-block;
 font-size: 30px; /* アスタリスクの大きさ */
 font-weight: bold;
 margin-right: 10px;
 position: relative;
 top: 0px;
 left: 0px;
 transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff; /* アスタリスク周りの影 */
}

.markdown-body > h1:after{
 border-bottom: 2px dotted #fff; /* 下線 */
 content: '';
 position: absolute;
 bottom: 3px;
 left: 3px;
 right: 3px;
}

.markdown-body > h2{
 color: #d04255; /* 文字色 */
 padding: 10px 10px 10px 10px; /* 上・右・下・左の余白 */
 position: relative;
}
.markdown-body > h2:before{
 content: '＊*'; /*花に見せかけるためのアスタリスク*/
 color: #fff; /* アスタリスクの色 */
 display: inline-block;
 font-size: 30px; /* アスタリスクの大きさ */
 font-weight: bold;
 position: relative;
 top: 0px;
 left: 0px;
 transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -webkit-transform: rotate(20deg);
 -o-transform: rotate(20deg);
 text-shadow: 0px 0px 6px #EAA8BF, 0px 0px 4px #EAA8BF, 0 0 0.5px #EAA8BF; /* アスタリスク周りの影 */
}
.markdown-body > h2:after{
 border-bottom: 2px dotted #EAA8BF; /* 下線 */
 content: '';
 position: absolute;
 bottom: 0px;
 left: 0px;
 width: 100%;
}


h3{
 border-bottom: 1px solid #f0bdc4; /* 下線 */
 color: #ff99ac; /* 文字色 */
 padding: 10px 10px 10px ; /* 上・右・下・左の余白 */
 position: relative;
}

/* https://saruwakakun.com/html-css/reference/ul-ol-li-design ここを参考にしています。*/
.markdown-body > ul, ol {
  background: #fffde8;
  box-shadow: 0px 0px 0px 10px #fffde8;/*線の外側*/
  border: dashed 2px #ffb03f;/*破線*/
  border-radius: 9px;
  margin-left: 10px;/*はみ出ないように調整*/
  margin-right: 10px;/*はみ出ないように調整*/
  padding: 0.5em 0.5em 0.5em 2em;
}

.markdown-body > ul li, ol li {
  line-height: 1.5;
  padding: 0.5em 0;
}

.part > img {
    display: block;
    height: 200px;
    border-radius: 15px;
}
</style>