THE THORの投稿画面のマーカーの設定と文字色の変更方法!

  • 2020年8月1日
  • 2020年8月14日
  • THE THOR
  • 14view

こんにちは!ブログを書いて1年で月収60万円突破したみのりんです。

THE THORの投稿画面のエディターはスッキリとしています。その分、マーカーやボックスを使用するためにはツールに追加してあげないと簡単に使うことができません。

そこで、THE THORの記事作成時、時間短縮にもなるようにあらかじめやっておく設定方法や文字色の変更などお伝えします。

 

THE THORの投稿画面を使いやすく調整

まずは、THE THORの投稿画面を見ていきましょう。普通のエディターと変わりありませんが最初は(どのテーマでも)基本のツールのみ表示されています。

THE THORの最初からあるパーツ

  • プリセットパーツ
  • 共通ボタン
  • カラム
  • ショートコード
  • サブタイトル編集
  • アイコン挿入

 

最初に投稿画面を開くと以下のようになっていると思います。

よく見るとビジュアルエディターの部分には何もありません。テーマを入れていない状態ではシンプルな状態です。

テーマを入れると以下のように一定の項目が出てきます。

この状態で「スタイル」があるかどうか確認してみてください。この「スタイル」でマーカーや囲い枠を挿入することになりますので、もしなければ次の操作をします。

TinyMCE Advancedインストール

スタイルがない場合にはプラグイン「TinyMCE Advanced」を導入します。

外観 ⇒ プラグイン
「新規追加」をクリックし検索窓にTinyMCE Advancedと打ち込みます。
この右側に「今すぐインストール」をクリックし「有効化」します。

TinyMCE Advancedの設定

プラグインをインストールしたら次に設定をします。

設定から選択するか、プラグインの「設定」をクリックします。

 

以下は、インストール済みのプラグインの一覧からも設定画面に移れます。

 

タブの部分を旧エディターに変更し(旧エディターの場合)下の一覧にある「スタイル」をドラッグ&ドロップで移動させます。

 

必要なものをビジュアルエディターに追加できたら、変更を保存をクリックします。

これで、準備が整いました!

 

THE THORの投稿画面のマーカーと文字色の例

ここまでできたら、次にTHE THORではどんなことができるのか見ていきましょう。マーカーについては基本のラインが用意されています。

 

ラインの形態 ラインの色
  • マーカー(太)
  • マーカー(中)
  • マーカー(細)
  • レッド
  • ブルー
  • イエロー
  • ピンク
  • グレー
  • グリーン

 

操作の手順

スタイル ⇒ マーカー(太さ) ⇒ 色
投稿画面の記事にマーカーを使うのは難しくありません。あなたがマーカーをしたい文章を反転させスタイルからマーカーを選べばよいだけです。

実際のマーカー(大きさ)

  • マーカー(太)・・・あいうえおかきくけこさしすせそたちつてと・・・
  • マーカー(中)・・・ABCDEFGHIJKLMNOPQRSTU・・・
  • マーカー(小)・・・いろはにほへとちりぬるを・・・

実際のマーカー(マーカーの色)

  • あいうえおかきくけこさしすせそたちつてと
  • ABCDEFGHIJKLMNOPQRSTU
  • いろはにほへとちりぬるを

色によっては若干見えづらくなるものもありますが、色が濃すぎても文章が目に入ってこない場合もあるのでちょうど良いですね!

マーカーの色を変えたい時にはコツがいる

使っていると、色を変更したいな~と感じる時があると思います。変更はほんの少しだけコツがいります(笑)といっても、そんな難しくはないのですが、1工程入るので念のために説明しておきます。

あいうえおかきくけこさしすせそたちつてと

↑ 上のようにまず太文字のレッドを入れたあとにやっぱり変更するという場合、一度マーカー部分を反転させ太文字のレッドの部分をクリックし解除します。

普通の感覚なら、マーカーの部分を反転させて違う色をクリックするのですが、そのままでは色の変更はされません。いったん、元の色の解除の行動は必要ですのでちょっとしたことですが覚えておいてください。

 

THE THORの投稿画面のよく使うマーカー色の指定

文章の中にマーカーを引くとき、色は統一しておいたほうがまとまりがあります。時には赤、時には青となるとどれが重要な文章なのかわからなくなってしまいます。

どれだけ長い文章でも2色くらいにしておいた方が見やすいです。THE THORでは、よく使うマーカーを指定してわかりやすくできます。

たったこれだけですが、たくさんマーカーの種類があるので、ひとつ設定しておくと効率化できます。

外観 ⇒ カスタマイズ ⇒ パーツスタイル[THE] ⇒ マーカー
よく使うマーカー設定で好きなラインと色を設定しておきます。

THE THORの投稿画面で文字色の変更方法

THE THORだけではなく他の投稿画面でも同じようにテキストの色変更ができます。

上の図のようなマークが出ていると色変更ができますが、初めて設定をした場合などにはまだ出ていないかもしれません。もし、このマークが出ていなければ先ほどご紹介したプラグインTinyMCE Advancedで設定をします。

 

TinyMCE Advanced設定画面でテキストの色の追加

 

設定 ⇒ TinyMCE Advanced
使用しないボタンに「A テキスト色」があれば、ドラッグ&ドロップでエディターに加えます。

ビジュアルエディターにテキスト色のアイコンが導入されたら実際のテキスト色の変更をしていきます。

まずは、色を変更したい文字を反転させます。テキスト色の部分「▼」をクリックするとカラーパレットが開きます。好きな色をクリックすると反転した部分の色がかわります。

カスタムカラーにする

カラーパレットに好きな色がなく、他の微妙な色変更を行いたい場合にはカスタムカラーもしくはwebの色番号を入力して変更が可能です。

  1. カスタムカラー
  2. 色番号で変更

 

1. カスタムカラーで変更

テキストの色変更と同じ要領で「▼」をクリックしカラーパレットをだします。

下の方にある「カスタム」をクリックすると展開します。

ここで、色味と明度を調整していきます。

2. 色番号で変更

色番号を入力することで好きな色に設定ができます。

色番号は、ネットで探すといろんなサイトがでてきますので調べてみてください。

出典:原色大辞典

色の番号を控えておきカラーパレットに入力します。

テキストの色変更のアイコン「▼」をクリックし展開します。カスタムをクリックし同じパレットを出します。

#「・・・・」となっている部分に色番号を入力するとその下に自分が選んだ色が出てきますので、それでよければOKをクリックします。

テキストの色変更と塗りつぶしをする

THE THORでは、マーカーが用意されていますので特に必要ないかもしれませんが、THE THORのマーカーがテキストを邪魔しないように薄い色なのでもう少しインパクトを加える文章にしたい場合には塗りつぶしを使っても良いでしょう。

あいうえおかきくけこさしすせそたちつてと・・・
あいうえおかきくけこさしすせそたちつてと・・・

 

上の段がテキストの色変更のみ、下の段がテキストの色変更と背景の色を追加してあります。ビジュアルエディターに出てきていない場合には、プラグインTinyMCE Advancedで設定します。(背景をドラッグ&ドロップします)

こちらも、背景色のアイコンの右にある▼をクリックしカラーパレットを出して好きな色を選びます。(好きな色がなければテキストと同じやり方で色変更ができますので試してみてください)

 

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

ブログを作る上でカッコいいデザインとSEO対策は必須です。THE THORは誰でも好感がもてるデザインと、最新のSEO対策で大人気のテーマです。

CTR IMG