ハテブロの果て - Sophist Almanac

折りたたみ機能
吹きだしを作る
キャラクターアイコンをつくる
音声を張り付ける

折りたたみ機能

なんか、もう半日ぐらいかけていろいろやってみたけど、ぜんぜん難しくて意味わからんかった。

でも、下のコードだけでできるということがわかったよ。

コードを表示する

折りたたみ内容はここに

<details><summary>コードを表示する</summary>
折りたたみ内容はここに
</details>

吹きだしを作る

吹き出しを作るやり方は

とっても簡単

f:id:classlovesophia:20201017204928p:plain

l-fuki niko

l-fuki bikku

l-fuki neko

l-fuki kuma

f:id:classlovesophia:20201017205011p:plain

r-fuki ww

r-fuki koma

r-fuki yada

r-fuki nanto

f:id:classlovesophia:20201111043336p:plain

teacher gre bro snu

f:id:classlovesophia:20201111043558p:plain

red blue trump biden

コードを表示する

/* 吹き出しのCSS　*/ .entry-content .l-fuki, .entry-content .r-fuki { position: relative; width: calc(100% - 82px); box-sizing: border-box; -webkit-box-sizing: border-box; padding: 20px; border-radius: 6px; border: 2px solid #ddd; box-shadow: 0 3px 8px -2px rgba(0,0,0,.16); background-color: #fff; z-index: 1; box-sizing: border-box; } .entry-content .l-fuki { margin: 20px auto 36px 0; } .entry-content .r-fuki { margin: 20px 0 36px auto; } .entry-content .l-fuki::before, .entry-content .r-fuki::before { position: absolute; content: ""; top: 16px; width: 10px; height: 10px; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; background-color: #fff; z-index: 2; } .entry-content .l-fuki::before { right: -7px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .entry-content .r-fuki::before { left: -7px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .entry-content .l-fuki::after, .entry-content .r-fuki::after { position: absolute; content: ""; width: 60px; height: 60px; top: -6px; border-radius: 50%; border: 3px solid #fff; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: 1px 1px 5px #aaa; box-sizing: border-box; } .entry-content .l-fuki::after { right: -82px; } .entry-content .r-fuki::after { left: -82px; } @media screen and (min-width: 478px) { .entry-content .l-fuki::after, .entry-content .r-fuki::after { width: 80px; height: 80px; } .entry-content .l-fuki, .entry-content .r-fuki { width: calc(100% - 106px); } .entry-content .l-fuki::after { right: -106px; } .entry-content .r-fuki::after { left: -106px; } } .niko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190934_120.jpg);} .bikku::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190930_120.jpg);} .neko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190926_120.jpg);} .kuma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190922_120.jpg);} .ww::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190918_120.jpg);} .koma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190915_120.jpg);} .yada::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190910_120.jpg);} .nanto::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/c/classlovesophia/20201017/20201017190905_120.jpg);}

文字列を選択

右側につけるのが

l-fuki クラス名

左側につけるのが

r-fuki クラス名

Add class