閉じる
カテゴリー
もっと見る:jimdo

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

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

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

【PR】 配色サイト "Tricolors"

3色ベースの配色見本Tricolors、タップ/クリックで配色パターンを切り替え!

例:ルフィたんじろうウェディングクジャクシベリアンハスキーコスモス など

おすすめ配色見本サイト Tricolors(トリカラーズ) Color Palettes / Color Combinations

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

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

おすすめ

HTML/CSSを学ぶと、Jimdoでつくったウェブサイトをカスタマイズできます。HTML/CSS入門はこちらから!

Jimdoでホームページ作成!