【THE THOR】文字装飾用マーカーの利用方法(ビジュアルエディタ&テキストエディタ用コード一覧)

【THE THOR】の投稿編集画面で使用可能な文字装飾用マーカーは、太さ3種×色6種の計18種類あります。

この記事では、ビジュアルエディタの【スタイル】から挿入可能なマーカーの利用方法とテキストエディタで挿入して利用する場合の属性コードの組み合わせ一覧について掲載しています。

 

スポンサーリンク

マーカーの利用方法

デフォルトではビジュアルエディタから挿入可能ですが、専用のクラス属性コードを挿入することによりテキストエディタからでも利用可能です。

 

ビジュアルエディタで利用する場合

「THE THOR」のデフォルトで実装されているマーカーは、太さ3種×色6種の計18種あります。

これらのマーカーは、ビジュアルエディタの【スタイル】から呼び出して記事に挿入することが出来ます。
また、いつも使用するマーカースタイルをカスタマイザーの【よく使うマーカー】に登録することにより、【スタイル】のドロップダウンボックスからすぐに選択することが可能になります。

 

メニュー

 

マーカーを適用させる場合は、適用したい文字列を選択している状態で、【スタイル】にある「マーカー」を選択します。

【マーカー(太)青】(marker-thickBlue) →【マーカー(中)赤】(marker-halfRed) のように既に適用させた文字列のマーカースタイルを変更したい場合は、現在適用されているスタイルをもう一度選択して(再選択)、そのスタイルを解除してから、変更したいスタイルを選択します。
(現在適用されているスタイルは、スタイル名が青で表示されています)

 

スタイル選択時の注意点

ビジュアルエディタの【スタイル】からマーカースタイルを変更する際、適用されていたスタイルを解除してから変更するのを忘れてしまうとスタイル変更をする度にタグ内に新たな属性が挿入され続けます。 系統の同じ属性が新たに挿入されても既に記述されていた分の属性は自動で削除されません。

<span class=”marker-thickRed marker-halfPink”></span> のようにひとつのタグ内に同じ系統の属性が重複して記述されていた場合、正しく表示されないことがありますのでスタイルを変更する際には注意してください。

ビジュアルエディタのスタイルの選択画面

※ ビジュアルエディタのスタイルは系統にかかわらず重複していくつでも選択が可能です。

 

【よく使うマーカー】の変更方法

ビジュアルエディタ編集画面の【スタイル】に登録されている【よく使うマーカー】は、【カスタマイザー】 → 【パーツスタイル設定[THE]】→【マーカー設定】 で変更が可能です。

よく使うマーカー登録画面

 
 

テキストエディタで利用する場合

テキストエディタで利用する場合は、直接タグを入力します。

(記述例)

マーカー見本

 

上に表示されている【マーカー見本】のソースコードです。

<span class=”marker-thickRed”>サンプル</span>

※ビジュアルエディタで挿入した場合は<span>タグが付加されます。

 

上で使用しているマーカーの内容は下のようになります。

  1. 【marker-】
    マーカーを使用する場合の共通のコードです。
  2. thick
    マーカーを太く
  3. Red
    マーカー色を赤に

 
 

マーカーの書式

マーカーを指定する際には、コードを組み合わせて記述します。

【marker-】+【太さ】+【色】

 

マーカースタイルの基本

  1. marker-
    マーカーを使用する場合に使用します。

  2. 太さ
    thick マーカーの太さ:太
    half マーカーの太さ:中
    thin マーカーの太さ:細

     


  3. Red マーカーの色:赤
    Blue マーカーの色:青
    Yellow マーカーの色:黄
    Pink マーカーの色:桃
    Green マーカーの色:緑
    Gray マーカーの色:灰

 
 

マーカーのスタイルコード一覧

太さ3種×色6種計18種類のスタイルコード一覧です。

太さ サンプル マーカーコード
マーカーサンプル marker-thickRed
マーカーサンプル marker-thickBlue
マーカーサンプル marker-thickYellow
マーカーサンプル marker-thickPink
マーカーサンプル marker-thickGreen
マーカーサンプル marker-thickGray
マーカーサンプル marker-halfRed
マーカーサンプル marker-halfBlue
マーカーサンプル marker-halfYellow
マーカーサンプル marker-halfPink
マーカーサンプル marker-halfGreen
マーカーサンプル marker-halfGray
マーカーサンプル marker-thinRed
マーカーサンプル marker-thinBlue
マーカーサンプル marker-thinYellow
マーカーサンプル marker-thinPink
マーカーサンプル marker-thinGreen
マーカーサンプル marker-thinGray

 

※プラグインの有無や使用サーバー等の環境によっては、位置がずれる等、掲載したパーツと同じスタイルで表示されない場合があります。