【Spotlightの使い方】記事にチャットアプリ風の吹き出しを表示させる方法
にすた氏
このように表示されます。
にすた氏
右からこんにちは。
にすた氏
長文は、このように表示されます。これら吹き出しを出すためにEmbedを利用する方法は、Spotlight的には予期した使い方ではないと思うので、ヤメレ！って言われたら速やかにやめるようにしましょう！約束だぞ！
この画像の順序でEmbedの入力欄を表示し、「Paste your embed code below:」に下記のコードを挿入してください。
コード
【 】内には、あなた自身でカスタマイズする必要があります。
左からコメントを出す場合
<div style="width: 14%;display: inline-block;vertical-align: top;margin-bottom: 10px;box-sizing: border-box;text-align: right;padding-top: 14px;">
<img src="【画像URLを記載する＝〇〇〇〇.jpgなど】" style="width: 100%;max-width: 75px!important;border-radius: 50%;" />
</div><div style="font-size: small;position: relative;width: 62%;display:inline-block;vertical-align: top;margin-left: 4%;margin-right: 18%;margin-bottom: 10px;box-sizing: border-box;">
【名前の表示欄＝にすた氏】
<br /><div style="display:inline-block; background-color: #e0edff;padding: 10px;border-radius: 10px;font-size: medium;">
【コメントの表示欄＝このように表示されます。】
</div></div>右からコメントを出す場合
<div style="font-size: small;position: relative;width: 62%;display: inline-block;vertical-align: top;margin-right: 4%;margin-left: 18%;margin-bottom: 10px;box-sizing: border-box;text-align: right;">
【名前の表示欄＝にすた氏】
<br /><div style="display: inline-block;text-align:left;background-color: #ffeda5;padding: 10px;border-radius: 10px;font-size: medium;">
【コメントの表示欄＝右からこんにちは。】
</div></div><div style="width: 14%;display: inline-block;vertical-align: top;margin-bottom: 10px;box-sizing: border-box;padding-top: 14px;text-align: left;">
<img src="【画像URLを記載する＝〇〇〇〇.jpgなど】" style="width: 100%;max-width: 75px!important;border-radius: 50%;" />
</div>【画像URLを記載する＝〇〇〇〇.jpgなど】で、何を入れていいか迷った方は、Spotlightのマイページを表示し、自分のアイコンを右クリックして、「画像アドレスをコピー」したものをペーストすればいいと思います。
役に立ったら記事をぜひ購入してください。
【spotlightの使い方】
【記事の書き方】
関連リンク
