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

Jimdoウェブデザイン
画像を丸くする

Jimdoではコンテンツ「画像」を使うことで、画像を挿入することができます。

この機能はとても手軽ですが、手軽である反面、挿入した画像のデザインを調整するような細かな処理には対応していません。

ここでは、コンテンツ「画像」を使わずに画像を挿入し、挿入した四角い画像を、サイト上で丸く処理する方法を解説します。

スタートとゴール

サイト上で正方形の画像の四隅を丸めて、画像を円にします。丸い画像は、プロフィール画像などで多用されます。

丸くする前
画像を丸くする前
丸くした後
画像を丸くした後

画像を丸くする手順

  1. コンテンツ「ウィジェット/HTML」を開いて、下記コードをペースト、一旦保存します。
  2. <img src="" style="width: 100%; border-radius: 50%;">
    Jimdoコンテンツ「ウィジェット/HTML」を選択する。 「ウィジェット/HTML」編集画面
  3. 次に、素材サイトなどから正方形の画像を用意します。
  4. 素材サイトなどから正方形の画像を調達する。
  5. 管理メニューから「デザイン」→「独自レイアウト」に進み、「ファイル」タグから、画像をアップロードします。
  6. 「独自レイアウト」から画像ファイルをアップロードする。
  7. アップロードしたファイル名をクリックして、画像ページを開いたら、URL(画像へのパス)をコピーします。
  8. 画像のパスを取得する。
  9. コピーしたURL(画像へのパス)を、手順1で挿入したimg src=" "のクオーテーションの中にペーストします。
  10. <img src="ここにペースト" style="width: 100%; border-radius: 50%;">
  11. 保存して、完成。
  12. 画像が丸くなった。

画像の横幅・大きさを調整するには

上記の設定だと、画像の横幅は親要素(画像が入るボックス)の横幅と同じ(100%)になります。変更したい場合は、ペーストしたwidth: 100%;のパーセンテージを変更します。例えば、50%にすると、親要素の横幅の半分になります。

もしプロフィール画像+吹き出しのように、カラムを使用する場合は、100%に設定しておく方が扱いやすいです。カラムの横幅を変更するに伴い、目一杯横広になるからです。

キャラクターが喋っているような「丸い画像+背景色つき文章」

サイト上で画像を丸く処理できれば、キャラクターが喋っているような吹き出し風コンテンツを作ることができます。

丸い画像+背景色つき文章で、キャラクターが喋っているように見せる。

Jimdoで背景色つきの文章を設定する方法は「Jimdoウェブデザイン:文章の背景に色をつける」で解説しています。

吹き出し風コンテンツの作り方は「Jimdoウェブデザイン:丸い画像+背景色つき文章で吹出風コンテンツを作る」をご覧ください。

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

こちらも役立つかも?

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

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

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

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

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

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

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