【Spotlightの使い方】記事にチャットアプリ風の吹き出しを表示させる方法

【Spotlightの使い方】記事にチャットアプリ風の吹き出しを表示させる方法

114

 

にすた氏
このように表示されます。

にすた氏
右からこんにちは。

にすた氏
長文は、このように表示されます。これら吹き出しを出すために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の使い方】
【記事の書き方】

関連リンク

SpotlightとMonappy:クリプト系ブログサービスの比較

【Spotlightの使い方】記事にツイートを埋め込む方法

【Spotlightの使い方】アイキャッチ画像に最適のサイズとは?

114