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

Jimdoウェブデザイン
文字にマーカーで印をつける

Jimdoのコンテンツ「文章」では、メニューにある既存の機能を使って、文字色を変えることはできますが、文字にマーカーで印をつける(蛍光ペンでハイライトする)ことはできません。

ですが、HTMLを少し編集するだけで簡単にマーカーで印をつけることができ、サイトの視認性を向上させることができます。

マーカーで印をつける手順

  1. コンテンツ「文章」で文字を入力したら、メニューから「HTMLを編集」を選びます。
  2. Jimdoコンテンツ「文章」から、メニュー「HTMLを編集」を選択する。 HTML編集画面
  3. マーカーで印をつけたい語句を<mark>と</mark>で囲います。
  4. マーカーで印をつけたい(蛍光ペンでハイライトしたい)語句を<mark>と</mark>で囲う。
  5. OKを押して、保存する。
  6. マーカーで印をつけた(蛍光ペンでハイライトした)
  7. マーカーの色を変えたい場合は、ヘッダーから指定します。管理メニューから「基本設定」「ヘッダー編集」と進み、下記コードをペーストします。
  8. <style type="text/css">

    mark {
      background-color: gray;
    }

    </style>
    ヘッダーにCSSコード(background-color)を追加する。
  9. 保存完了を押して、完成。
  10. マーカー(蛍光ペンのハイライト)の色を変更

設定したコードの解説

<mark>xxxx</mark>は、字面のとおり、囲んだ部分に対して、マーカー(蛍光ペン)で印をつけます。

ヘッダーに挿入したbackground-colorは、背景色、つまりマーカーの色を指定します。ここでは一例としてgray(グレー)にしましたが、カラーネームまたはカラーコードで好きな色に指定することができるので、適宜変更してみてください(参考:カラーネーム/カラーコード一覧)。

マーカーでサイトの視認性を向上させる

冒頭でもふれましたが、マーカーを適度に使うと、より見やすいサイトになって、ユーザビリティが向上します。

Jimdoの既存の文字装飾機能は、せいぜい太字にするか、文字色を変更するかしかないので(斜体は基本的にアルファベット用です)、ぜひ活用してみてください。

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

こちらも役立つかも?

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

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

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

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

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

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

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