アフィリエイト広告を利用しています。

WordPress講座

AFFINGER6 で文字にマーカーを引く方法

AFFINGER6(アフィンガー6)で文字にマーカーを引く方法を解説します。

  • 文字を装飾したい
  • マーカーを引きたい

上記のような方に向けて、実際に AFFINGER6 を使っている管理人が紹介します。

\ ブログ収益化に苦戦している方へ! /

サブスク型スクール紹介サイト

※ AFFINGER6 で制作しています。

タカさん
記事を書いている管理人( @takafumi_net )の経歴は、以下の通りです。
  • WordPress歴、10年以上
  • 基本情報技術者資格所有者(ソフト開発の国家資格)
  • Withマーケ会員(2022年10月入会)

AFFINGER6 で文字にマーカーを引く方法

AFFINGER6 で文字にマーカーを引く方法

AFFINGER6(アフィンガー6)は、ブロックエディタ、クラシックエディタ、どちらも対応しています。

タカさん
それぞれ、文字にマーカーを引く方法を解説します。

マイ細マーカーを引く方法

タカさん
マイ細マーカーを引く方法です。

ブロックエディタの場合、以下の方法で装飾することができます。

テキスト選択 → さらにブロックツールを表示 → マイ細マーカーA(もしくは、マイ細マーカーB)

マイ細マーカーを引く方法

※ ブロックエディタ使用時の画像

マイ細マーカーAマイ細マーカーB のデフォルト色です。

色を変更する場合は、以下から設定することができます。

AFFINGER 管理 → Gutenberg 設定 → 全般 → カラー設定

クラシックエディタの場合、コードで装飾するのがおすすめです。

マイ細マーカーA のコード です。

<span class="st-mymarker-s">テキスト</span>

マイ細マーカーB のコード です。

<span class="st-mymarker-s-b">テキスト</span>

マーカーを引く方法(ハイライト)

タカさん
マーカーを引く方法(ハイライト)です。

ブロックエディタの場合、以下の方法で装飾することができます。

テキスト選択 → ブロック → テキストの色 → 文字背景色

マーカーを引く方法(ハイライト)

※ ブロックエディタ使用時の画像

ただし、この方法だと、太字になっていません。

太字にしたい場合は、別で設定する必要があります。

クラシックエディタの場合、コードで装飾するのがおすすめです。

何種類かコードを紹介します(太字も設定されています)。

黄マーカー(ハイライト)のコード です。

<span class="ymarker">テキスト</span>

赤マーカー(ハイライト)のコード です。

<span class="rmarker">テキスト</span>

マーカー以外の文字装飾

タカさん
マーカー以外の文字装飾を紹介します(AFFINGER6)。

太字です。

大文字です。

小文字です。

ドット線です。

打ち消し線です。

これらは、ブロックエディタの場合、以下から全て装飾することができます。

テキスト選択 → さらにブロックツールを表示

マーカー以外の文字装飾

※ ブロックエディタ使用時の画像

クラシックエディタユーザーのために、コードも紹介しておきます。

太字のコード です。

<span class="huto">テキスト</span>

大文字のコード です。

<span class="oomozi">テキスト</span>

小文字のコード です。

<span class="komozi">テキスト</span>

ドット線のコード です。

<span class="dotline">テキスト</span>

打ち消し線のコード です。

<del>テキスト</del>

文字装飾(マーカー)の使いすぎに注意

AFFINGER6(アフィンガー6)は、文字装飾が豊富にできる有料テーマです。

しかし、過剰に装飾すると、読者にとってはマイナスです。

取捨選択して、サイト(ブログ)によって、使うものを決めてしまうのがおすすめです。

マーカーに関しては、個人的に 2種類あれば、十分だと思っています。

タカさん
色分けは、ルールを決めると、わかりやすくなります。

一番重要なことは、記事を読んでもらうことです。

本質を見失わないようにしましょう。

AFFINGER6 で他の機能を使いこなしたい方へ

タカさん
記事を装飾するのは、文字装飾だけではありません。

吹き出し、表(テーブル)、画像など。

タイトルボックス(マイボックス)も使い勝手が良い部品です。

基本的なことですが、見出しも設定するべきです。

記事の書き方(AFFINGER6)について、詳しく知りたい方は、以下の記事をご参照下さい。

AFFINGER6 記事の書き方
関連記事AFFINGER6 記事の書き方【ブログ初心者向け】

AFFINGER6(アフィンガー6)で記事を書く方法について。 AFFINGER6 を使っているけど、できることが多くて取捨選択ができない 記事の書き方を知りたい 上記のような方に向けて、実際に AF ...

最後に

今回は、AFFINGER6 で文字にマーカーを引く方法を解説しました。

過剰な装飾をした結果、読みにくい記事を公開している人は意外といます。

時間をかけたのに、効果がマイナスだともったいないです。

タカさん
AFFINGER6 を上手く使うコツは、機能を厳選することです。

豊富な装飾をサイト(ブログ)ごとに使い分けて活用しましょう。

\ 正攻法のアフィリエイトが学べる! /

サブスク型スクール紹介サイト

※ AFFINGER6 で制作しています。

-WordPress講座