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

Jimdoウェブデザイン
画像を枠線で囲む

Jimdoでは既存のコンテンツ「画像」を使うことで、簡単に画像を設置できます。

画像を拡縮したり、位置を揃えたりする機能はメニューにありますが、画像を枠線で囲むにはヘッダーにCSSコードを記述します。

手順

  1. コンテンツ「画像」で画像を設置する。
  2. Jimdo コンテンツ「画像」を挿入
  3. 管理メニューの「基本設定」から「ヘッダー編集」を開いて、下記コードをペーストします。
  4. <style type="text/css">

    img {
      border: solid 1px black;
    }

    </style>
    ヘッダー編集画面 CSSコード(border)を記述する
  5. 保存完了を押して、完成。
  6. 画像に枠線がついた

ペーストしたコードの解説

<style type="text/css">・・・</style>の・・・はデザインを指定するエリアで、ここにデザイン情報(CSSコード)を記述します。

img{・・・・}の・・・に、画像(img)に対するデザインを指定します。

border: solid 1px black;について、borderは枠線、solidはその枠線の種類を、1pxはその枠線の太さを、blackはその枠線の色を指定しています。

solid は「単線」を表しますが、次のように変更することもできます。

  • solid:単線
  • double:二重線
  • dashed:ハイフン線
  • dotted:点線
  • outset:立体
  • inset:窪み

blackは要するに黒ですが、次のようにカラーネームまたはカラーコード(16進数)で指定することもできます。

カラーネーム カラーコード
Blue #0000FF
Red #FF0000
Yellow #FFFF00
Green #008000
Brown #A52A2A
Grey #808080
White #FFFFFF
Black #000000

そして、枠線を太くしたければpxの数字を大きく、細くしたければpxの数字を小さくします。

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

こちらも役立つかも?

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

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

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

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

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

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

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