THE THOR には標準で マーカー 機能が備わっています。
マーカーとは、文章に目印を付け目立たせるモノ。また学生時代に使ったマーカーのように文字に蛍光ペンでラインを引いたような装飾のことです。⇐これのこと
THE THOR の マーカー 機能
THE THOR のマーカーは6色。
それに太さが3つで計18パターンのマーカーが使用できます。
使い方はマーカーを適用したい部分を選択して、メニューのスタイルから使用するマーカーを選べばOK
頻繁に使用するマーカーは「よく使うマーカー」に登録しておくと便利です。「よく使うマーカー」の登録はマーカー設定で選択できます。
外観 → カスタマイズ → パーツスタイル設定[THE] → マーカー設定
マーカーの色と太さ
THE THOR のマーカー全18種類の一覧です。
()内はクラス名です。クラス名は色の名前と太さの組み合わせになっているので参考までにどうぞ。
例.太いピンクマーカーのクラス名 mark_orange
THE THOR マーカーのカスタマイズ
マーカーを使ったちょっとしたカスタマイズを紹介。
マーカーの色を変更する方法
マーカーの色を変更します。
変更するマーカーのクラス名は前述の表を参考に選んでください。サンプルのコードでは太い緑（mark_green）を使用しています。
.content .mark_green {
background: linear-gradient(transparent 35%,#D2FFD2 35%);
}
この色の部分#D2FFD2を変更すると太い緑マーカーの色が変わります。他のマーカーを変更したい場合は、mark_greenの部分を他のカラーのクラス名にしてください。
コードは追加CSSの記述します。
外観 → カスタマイズ → 追加CSS
ちょこっと解説
THE THOR のマーカーではグラデーションの中間位置を変更することで線の太さを表現しています。（サンプルでは35％）
この中間位置を変更すると「もう少し太く」や「もう少し細く」といった微調整が可能です。
このコードでは上から下に向かってグラデーションがかかっています。
上から35％の位置まで透明（transparent）、35%から最後まで#D2FFD2 といった内容です。
例えば、2個めの35％を60％に変更すると、上から透明が35％の位置まで続き、35％から60％の間は透明から#D2FFD2にグラデーションしていきます。60％から100％までは#D2FFD2の単色になります。
言葉だと難しいので図を…
用意していません！
詳しくはサルワカをどうぞ。
マーカーを帯にするカスタマイズ
前述のカスタマイズを僕は採用していませんが、このカスタマイズは採用しています。
まず絶対に使わないであろうマーカーを選択します。僕の場合はさっきも出てきた太い緑マーカーです。
使わない緑マーカーを有意義なマーカーになるよう変更します。
出来上がりはコレです。特徴は改行されても行間が残ってくれることです。見出し(H3など)を使うまでもない、または意味的/SEO的に見出しにはしたくないけど、ちょっと目立たせたい小見出し/強調として便利に使える装飾です。
/*マーカーのカスタマイズ*/
.content .mark_green {
background: #409ecc;
color: #b7ffff;
padding: 3px;
}
※色などは各サイトに合わせ変更してください。
カスタマイズは以上です。
※カスタマイズは自己責任でお願いします。
コメント