Jimdoウェブデザイン
丸い画像＋背景色つき文章で吹出風コンテンツを作る

次のような、キャラクターが喋っているように見える吹き出し風コンテンツをJimdoで作る方法を解説します。

これを作るには丸くした画像、背景色をつけた文章をカラムで並列表示します。

手順

まずは、画像をサイト上で丸く表示します。「Jimdoウェブデザイン：画像を丸くする」で詳しく手順を解説しているので、参照ください。

1. コンテンツ「ウィジェット／HTML」を開いて、下記コードをペースト、一旦保存します。
<img src="" style="width: 100%; border-radius: 50%;">
2. 素材サイトなどから正方形の画像を用意します。
3. 管理メニューから「デザイン」→「独自レイアウト」に進み、「ファイル」タグから、画像をアップロードします。
4. アップロードしたファイル名をクリックして、画像ページを開いたら、URL（画像へのパス）をコピーします。
5. コピーしたURL（画像へのパス）を、手順1で挿入したimg src=" "のクオーテーションの中にペーストします。
6. 保存して、画像は完成です。

丸くする前



丸くした後


7. コンテンツ「カラム」から2列のカラムを作り、片方に画像を移動し、もう片方では「文章」を生成します。


以下、文章に背景色をつけていきます。「Jimdoウェブデザイン：文章に背景色をつける」で詳しい手順を解説しているので、参照ください。

8. コンテンツ「文章」のメニューから「HTMLを編集」を開きます。

9. コードの最初の行と最後の行に、それぞれ下記のコードをペーストします。
最初の行：<div style="background-color: lightyellow; padding: 16px; border-radius: 16px;">

最後の行：</div>

10. OKを押して、保存して完成。

吹き出しの口を尖らせることも可能ですが、CSSの記述がやや複雑になるので、ここではシンプルな口なしの吹き出しの設置方法のみを解説しました。

丸くしたプロフィール画像の隣に、四角い背景色のある文章を置くだけでも、割と吹き出しに見えます。