AFFINGER６のブロックエディタで文字にマーカーを引きたい。
この悩みを解決します。( ｀ー´)ノ
- アンダーラインを引く
- ハイライトを入れる
↑↑↑
この方法を見ていきましょう。(^^)/
※番外編で文字に下線、文字の真ん中に横線を引く方法も記事内で解説しています。
文字にマーカーを引く方法【AFFINGER６/ ブロックエディタ】
①ー1：ブロックエディタ標準装備でマーカーを引く(アンダーライン)
まず、ブロックエディタの標準装備でアンダーラインマーカーを引く方法です。
下記の手順で進めていきましょう。
【 テキスト選択 】→【 続きを読む ( ∨ ) 】→【 マイ細マーカーA or B 】
１．マーカーを引きたいテキストを選択し、「 ∨ 」をクリック
２．ボックス内からマイ細マーカーA or B を選択
これで、テキストにアンダーラインマーカーを引くことができます。
AFFINGER６のデフォルトでは、
- マイ細マーカーAが黄色アンダーライン
- マイ細マーカーBが赤色アンダーライン
となっています。
マイ細マーカーの色を変更したい場合
マイ細マーカーはAFFINGER管理のGutenberg設定で変更できます。
こちらも画像付きでのせておきますね。(^^)
１．AFFINGER管理のGutenberg設定をクリック
２．全般をクリック
３．カラー設定で色を選択
これでマイ細マーカーABを好きな色に設定できます。
カラー設定ではマイ細マーカーを引いたときのテキストの色も変更できますよ。
【 例 】：テキスト色→青、マイ細マーカーA→黄色アンダーラインの場合は下のようになります。
↓↓↓
マイ細マーカーは呼びだすのが簡単なので、使用頻度の高い色を設定しておくと便利ですね。
わたしは赤と黄をよくつかうのでデフォルトのままにしています。
【 補足 】マイ細マーカーでアンダーラインを引いた場合、テキストは自動で太文字になります。
①ー2：ブロックエディタ標準装備でマーカーを引く(ハイライト)
ブロックエディタでは文字に背景色をいれてハイライトをつけることができます。
手順はかんたんです。
【 テキスト選択 】→【 右上の設定 】→【 ブロック 】→【 背景色を選択 】
１．ハイライトを入れたいテキストを選択し右上の設定をクリック
２．( テキストは選択した状態のまま ) ブロックの「 テキストの色 」で背景色を選択
※今回は Very pale yellow ( 画像黒枠 ) を選択します。
このように、文字にハイライトが入りました。
↓↓↓
あいうえお
「 テキストの色 」でできること
- 文字色を変える
- 背景色で文字にハイライトをいれる
- 背景色を濃くして文字を白くする
などなど、色の選択肢が多いので好きなパターンをつくることができます。
ちなみに、
同じブロック内の「 色設定 」で文字色と背景色を指定するとこんな感じになります。
【 例 】：文字色→白、背景色→青
↓↓↓
こんな風に見出しのように装飾できます。
②：クラシック版の段落を呼びだしてマーカーを引く
次はクラシック版の段落を呼びだしてマーカーを引くやり方です。
※プラグイン 「Advanced Editor Tools ( 旧TinyMCE Advanced )」をインストール、有効化しておきましょう。
※クラシックエディタに慣れた方はこのプラグインがつかいやすくて便利だと思います。
クラシック版の段落を呼びだす場合は下記の手順でマーカーを引けます。
【 ＋ 】→【 クラシック版の段落 】→【 テキスト選択 】→【 スタイル 】→【 マーカー 】→【 マーカー 選択 】
１．「＋」をクリック
２．クラシック版の段落を選択
３．( マーカーを引きたいテキストを選択した状態で ) スタイル→マーカーの順にクリックし、マーカーを選択
これで、文字にマーカーを引くことができます。
各マーカーはこのような見た目です。
- 黄マーカー
- 黄マーカー ( 細 )
- 赤マーカー
- 赤マーカー ( 細 )
- 青マーカー
- 青マーカー ( 細 )
- 鼠マーカー
- 鼠マーカー ( 細 )
※( 細 ) とついてないものがハイライトになりますね。
③：Snow Monkey Editorを使って文字にマーカーを引く
2021.7 現在。AFFINGER６でSnow Monkey Editorプラグインを導入するとワードプレスバージョンアップの際「このブロックでエラーが発生したためプレビューできません」というエラーが発生します。改善があり次第追記します。
最後は「 Snow Monkey Editor 」というプラグインを入れてマーカーを引く方法です。
※プラグイン「 Snow Monkey Editor 」をインストール、有効化しておきましょう。
- ワードプレステーマ「 Snow Monkey 」のブロックエディタ機能拡張プラグインですが、AFFINGER６でもつかえます。
- マーカー以外の機能もたくさんつかえるのですごく便利ですよ。
手順はこちらです。
【 テキストを選択 】→【 SnowMonkeyEditorコントロールをクリック 】→【 蛍光ペン 】→【 色を選択 】
１．マーカーを引きたいテキストを選択しSnow Monkey Editorコントロールをクリック
２．蛍光ペンをクリック
３．色を選択
※ここではVivid yellow を選択
すると、このように文字にマーカー ( アンダーライン ) が引けます。
↓↓↓
あいうえお
ハイライトをいれたい場合
先ほどと同じようにSnow Monkey Editorコントロールから背景色をクリックし、好きな色を選びましょう。
１．背景色をクリック
２．ここでは Light grayish red を選んでみます。
このようにハイライトがはいりました。
↓↓↓
あいうえお
番外編：ブロックエディタで文字に下線、真ん中に横線を引く方法
文字に下線、真ん中に横線を引く方法
番外編で文字に下線、真ん中に横線 ( ＡＢＣ ) を引く方法も解説します。
すごくかんたんですよ。(^^)
文字に下線を引く
１．下線を引きたいテキストを選択し、右上の設定をクリック
２．ブロックの「 整形」で U をクリック
これで文字に下線を引くことができます。
文字の真ん中に横線をを引く
１．横線を引きたいテキストを選択し、「 ∨ 」をクリック
２．ボックス内で取り消し線をクリック
これでこのように ( →あいうえお ) 文字の真ん中に横線を引くことができます。
下線と横線も意外とつかう機会がおおいので、覚えておくと便利です。
まとめ：文字にマーカーをいれて見やすくしよう【AFFINGER６/ ブロックエディタ】
文字にマーカを引くことで、
- 伝えたいことを強調する、目立たせる、見やすくする
ということができますね。(^^)
当ブログはマーカーを引く際AFFINGER６ブロックエディタの標準装備 + Snow Monkey Editorをつかっています。
文字にマーカーを引く方法を知りたかった方の参考になれば幸いです。
今回は以上です。
ノ アンダーラインを引く ハイライトを入れる ↑↑↑ この方法を見ていきましょう。(^^)/ ※番外){kind=link}