ブログで吹き出しを使おう！ 「 GhostChat 」作ってみた コードを公開

僕の名前は好奇心旺盛おばけ
今回はこんな吹き出しを開発してみたから
コードを公開するよ

ちなみに…
おばけの種類は…図鑑…から見てね…
riaimu.hateblo.jp

吹き出しの中には文字だけじゃなくて、ふつうに画像やリンクを貼れるのだ！
キャラクターのURLを変更するだけで利用できるから、もし「このプログラムを使ってみたい！」って人がいたらTwitterのDMで教えてください！
画像を変えたり、好きなデザインに変更します。
Twitter：@riaimu1222

コード

<div class="ghost-chat" type="好奇心旺盛おばけ" position='left'>
    <div class="ghost-chat-content">
        <p>こんにちは</p>
    </div>
</div>

<div class="ghost-chat" type="無おばけ" position='right'>
    <div class="ghost-chat-content">
        <p>こんにちは</p>
        <p>...</p>
    </div>
</div>

<style>
    .ghost-chat {
        display: table;
        padding: 10px;width: calc( 100% - 20px );
        background: whitesmoke;
        display: flex !important;
        align-items: center;
    }
    .ghost-chat img {
        border-radius: 70%;
        padding: 5px;
        border: 2px solid skyblue;
        background: white;
        width: 60px;height: 60px;
        vertical-align: middle;
    }
    .ghost-chat-content {
        position: relative;
        display: inline-block;
        margin: 0 20px;
        border-radius: 3%;
        padding: 7px 10px;
        width: calc(100% - 60px);
        color: #555;
        font-size: 1.05rem;
        background: white;
        border: solid 2px pink;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }
    .ghost-chat-content p {
        padding: 0;
        margin: 0;
    }

    .ghost-chat-left:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -24px;
        margin-top: -12px;
        border: 12px solid transparent;
        border-right: 12px solid #FFF;
        z-index: 2;
    }
    .ghost-chat-left:after {
        content: "";
        position: absolute;
        top: 50%;
        left: -30px;
        margin-top: -14px;
        border: 14px solid transparent;
        border-right: 14px solid pink;
        z-index: 1;
    }

    .ghost-chat-right:before {
        content: "";
        position: absolute;
        top: 50%;
        right: -24px;
        margin-top: -12px;
        border: 12px solid transparent;
        border-left: 12px solid #FFF;
        z-index: 2;
    }
    .ghost-chat-right:after {
        content: "";
        position: absolute;
        top: 50%;
        right: -30px;
        margin-top: -14px;
        border: 14px solid transparent;
        border-left: 14px solid pink;
        z-index: 1;
    }
</style>

<script>

    const GhostChat = {
        '好奇心旺盛おばけ' : 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/a1t2s2u2/20211230/20211230110109.jpg',
        'イケイケおばけ' : 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/a1t2s2u2/20220105/20220105173039.jpg',
        '無おばけ' : 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/a1t2s2u2/20220105/20220105173042.jpg',
        '微笑みおばけ' : 'https://cdn-ak.f.st-hatena.com/images/fotolife/a/a1t2s2u2/20220107/20220107081429.jpg',
    };
    Array.from(document.getElementsByClassName('ghost-chat')).forEach( (e, i) => {
        var img = "<img src='"+GhostChat[e.getAttribute('type')]+"' style='margin: 0 !important;'>";
        if(e.getAttribute('position') == 'left') {
            e.insertAdjacentHTML('afterbegin', img);
            document.getElementsByClassName('ghost-chat-content')[i].classList.add('ghost-chat-left');
        } else {
            e.insertAdjacentHTML('beforeend', img);
            document.getElementsByClassName('ghost-chat-content')[i].classList.add('ghost-chat-right');
        }
    });
</script>

【 表示結果 】

こんにちは

こんにちは
...

使い方

<div class="ghost-chat" type="{おばけの種類}" position='{アイコンの位置}'>
    <div class="ghost-chat-content">
        {吹き出しの中身}
    </div>
</div>

この中括弧{}に指定する値を入れるだけ。
とても簡単に編集できるように工夫しました。

強み

URLやスタイルを別で管理しているので、後から一括修正できる。
文字だけじゃなくて、なんでも表示できる。

記事を読んでいただきありがとうございます。
mio-mama-140.hatenablog.com
みおさんの記事に影響を受けて作ってしまいました。
これからデザインを改善していこうと思います。

この記事てきとうすぎました笑
詳しく解説しても需要ないと思うので…

【おすすめ記事】

riaimu.hateblo.jp
riaimu.hateblo.jp
riaimu.hateblo.jp

記事の内容に間違いがあった場合は、Twitterもしくはお問い合わせフォームからお伝えください。