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

Jimdoウェブデザイン
文章の背景に色をつける

Jimdoのコンテンツ「文章」では、メニューにある既存の機能を使って、文字色を調整することはできますが、文章の背景に色をつけることはできません。

背景色を設定するには、HTMLを少し編集することになります。

背景色を個別に設定することで、記事コンテンツのバリエーションが増え、サイトデザインの幅が広がります。

文章背景色の設定手順

  1. コンテンツ「文章」で文字を入力したら、メニューから「HTMLを編集」を選びます。
  2. Jimdoコンテンツ「文章」から、メニュー「HTMLを編集」を選択する。 HTML編集画面
  3. コードの最初の行と最後の行に、それぞれ下記のコードをペーストします。
  4. 最初の行:<div style="background-color: gray; padding: 8px;">

    最後の行:</div>
    divタグで既存の段落タグを囲む

    ペーストしたコードのうち、grayは背景色の指定です。別のカラーネームまたはカラーコードを指定することで、背景色を変更できます(参考:カラーネーム/カラーコード一覧)。

    また、ここでの8pxは、枠と文字までの上下左右の距離です。値を大きくすれば間隔はより広く、値を小さくすれば間隔はより狭くなります。

  5. OKを押して、保存する。
  6. 文章の背景に色がついた。
  7. もし、角を丸くしたいのなら、下記コードを画像のとおりに挿入します。
  8. border-radius: 8px;
    角を丸くするborder-radiusを追加する。
  9. 保存完了を押すと、背景色「グレー」、枠から文章までの距離「8px」、角が半径「8px」の円周、の背景ができあがります。
  10. 文章の背景のボックスの角が丸まった。
  11. 背景色によっては、文字色を調整する方が望ましい場合もありますので、適宜調整します。
  12. 背景色にあわせて文字色を調整する。

設定したコードの解説

最初の行と最後の行に挿入した<div....>xxxxx</div>で、文章をボックスの中に入れたことになります。

style以下の記述が、そのボックスに対するデザインの指示になります。

background-colorはボックスの背景色、paddingはボックスの枠と中身(ここでは文章)との距離、border-radiusはボックスの角の丸みを表しています。

背景色つき文章は応用が効く

文章の背景に色をつけられるようになると、デザイン上の幅が広がるだけでなく、さまざまなコンテンツを作成するのに応用が効きます。

例えば、複数の背景色つき文章を矢印で結ぶことで、フローチャートを作成できます。

また、2列のカラムのうち、片方を丸めたプロフィール画像、もう片方を背景色つき文章とすることで、吹き出し風のコンテンツを作ることもできます。

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

サイト上で画像を丸く表示する方法は「Jimdoウェブデザイン:画像を丸くする」で解説しています。

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

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

関連ページ

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

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

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

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

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

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

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