カテゴリー
閉じる
カテゴリー
Top >> ウェブデザイン(HTML/CSS)

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

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

「丸い画像+背景色つき文章」キャラクターが喋っているような吹き出し風コンテンツ

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

手順

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

  1. コンテンツ「ウィジェット/HTML」を開いて、下記コードをペースト、一旦保存します。
  2. <img src="" style="width: 100%; border-radius: 50%;">
  3. 素材サイトなどから正方形の画像を用意します。
  4. 管理メニューから「デザイン」→「独自レイアウト」に進み、「ファイル」タグから、画像をアップロードします。
  5. アップロードしたファイル名をクリックして、画像ページを開いたら、URL(画像へのパス)をコピーします。
  6. コピーしたURL(画像へのパス)を、手順1で挿入したimg src=" "のクオーテーションの中にペーストします。
  7. 保存して、画像は完成です。
  8. 丸くする前
    画像を丸くする前
    丸くした後
    画像を丸くした後
  9. コンテンツ「カラム」から2列のカラムを作り、片方に画像を移動し、もう片方では「文章」を生成します。
  10. 2列カラムに丸めた画像、背景色つき文章を設置する。

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

  11. コンテンツ「文章」のメニューから「HTMLを編集」を開きます。
  12. 「文章」のメニュー「HTMLを編集」を開く。
  13. コードの最初の行と最後の行に、それぞれ下記のコードをペーストします。
  14. 最初の行:<div style="background-color: lightyellow; padding: 16px; border-radius: 16px;">

    最後の行:</div>
    「HTMLを編集」画面で、divタグを挿入して、CSSコードを記述する。
  15. OKを押して、保存して完成。
  16. キャラクターが喋っているような吹き出し風コンテンツが完成。

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

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

オフィスペンぎん
作者:オフィスペンぎん(オフペン)
日英中翻訳者/メディアディベロッパー/ライター。ペンギンの教室の他、タブストックにてソロギター向け編曲や採譜。依頼、相談、メッセージはフォームまたはTwitterから。
記事のシェア
役に立った、参考になった、おもしろかった・・もしそう思ったら、シェアしていただけると嬉しいです♪

こちらも役立つかも?

同じカテゴリーの記事(ウェブデザイン HTML/CSS)

ペンギンの教室
カテゴリー
人気の記事
固有名詞/専門用語 日英辞書

化学、会計、観光、アニメ、漫画などの分野の用語を収録。

固有名詞・専門用語の日英・英日辞書
ペンギンの教室について
ペンギンの教室の作者:オフィスペンぎん

ペンギンの教室は、日ごろ感じる疑問や覚えなければいけないことを、記事や復習問題、クイズ、ゲームを通じて、わかりやすく学べるサイトです。

運営者:オフィスペンぎん

相談/連絡:フォームまたはTwitter